Brand guidelines

Documentation and examples for Bootstrap’s logo and brand usage guidelines.

On this page

Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.

Logo

When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap’s branding for your own open or closed source projects. Do not use the Twitter name or logo in association with Bootstrap.

Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.

Name

Bootstrap should always be referred to as just Bootstrap. No Twitter before it and no capital s.

Bootstrap

Correct

BootStrap

Incorrect

Twitter Bootstrap

Incorrect

` const jsSnippetContent = jsSnippet ? '\/\/ NOTICE!!! Initially embedded in our docs this JavaScript\n\/\/ file contains elements that can help you create reproducible\n\/\/ use cases in StackBlitz for instance\.\n\/\/ In a real project please adapt this content to your needs\.\n\/\/ \u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\n\n\/\*!\n \* JavaScript for Bootstrap\u0027s docs $https:\/\/getbootstrap\.com\/$\n \* Copyright 2011\-2022 The Bootstrap Authors\n \* Copyright 2011\-2022 Twitter, Inc\.\n \* Licensed under the Creative Commons Attribution 3\.0 Unported License\.\n \* For details, see https:\/\/creativecommons\.org\/licenses\/by\/3\.0\/\.\n \*\/\n\n\/\* global bootstrap: false \*\/\n\n$\($ =\u003e \{\n \u0027use strict\u0027\n\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Tooltips\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Instantiate all tooltips in a docs or StackBlitz page\n document\.querySelectorAll$\u0027\[data\-bs\-toggle=\u0022tooltip\u0022\]\u0027$\n \.forEach$tooltip =\u003e \{\n new bootstrap\.Tooltip\(tooltip$\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Popovers\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Instantiate all popovers in a docs or StackBlitz page\n document\.querySelectorAll$\u0027\[data\-bs\-toggle=\u0022popover\u0022\]\u0027$\n \.forEach$popover =\u003e \{\n new bootstrap\.Popover\(popover$\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Toasts\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Used by \u0027Placement\u0027 example in docs or StackBlitz\n const toastPlacement = document\.getElementById$\u0027toastPlacement\u0027$\n if $toastPlacement$ \{\n document\.getElementById$\u0027selectToastPlacement\u0027$\.addEventListener$\u0027change\u0027, function \($ \{\n if $!toastPlacement\.dataset\.originalClass$ \{\n toastPlacement\.dataset\.originalClass = toastPlacement\.className\n \}\n\n toastPlacement\.className = `\$\{toastPlacement\.dataset\.originalClass\} \$\{this\.value\}`\n \}\)\n \}\n\n \/\/ Instantiate all toasts in a docs page only\n document\.querySelectorAll$\u0027\.bd\-example \.toast\u0027$\n \.forEach$toastNode =\u003e \{\n const toast = new bootstrap\.Toast\(toastNode, \{\n autohide: false\n \}$\n\n toast\.show\n \}\)\n\n \/\/ Instantiate all toasts in a docs page only\n const toastTrigger = document\.getElementById$\u0027liveToastBtn\u0027$\n const toastLiveExample = document\.getElementById$\u0027liveToast\u0027$\n if $toastTrigger$ \{\n toastTrigger\.addEventListener$\u0027click\u0027, \($ =\u003e \{\n const toast = new bootstrap\.Toast$toastLiveExample$\n\n toast\.show\n \}\)\n \}\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Alerts\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Used in \u0027Show live toast\u0027 example in docs or StackBlitz\n const alertPlaceholder = document\.getElementById$\u0027liveAlertPlaceholder\u0027$\n const alertTrigger = document\.getElementById$\u0027liveAlertBtn\u0027$\n\n const appendAlert = $message, type$ =\u003e \{\n const wrapper = document\.createElement$\u0027div\u0027$\n wrapper\.innerHTML = \[\n `\u003cdiv class=\u0022alert alert\-\$\{type\} alert\-dismissible\u0022 role=\u0022alert\u0022\u003e`,\n ` \u003cdiv\u003e\$\{message\}\u003c\/div\u003e`,\n \u0027 \u003cbutton type=\u0022button\u0022 class=\u0022btn\-close\u0022 data\-bs\-dismiss=\u0022alert\u0022 aria\-label=\u0022Close\u0022\u003e\u003c\/button\u003e\u0027,\n \u0027\u003c\/div\u003e\u0027\n \]\.join$\u0027\u0027$\n\n alertPlaceholder\.append$wrapper$\n \}\n\n if $alertTrigger$ \{\n alertTrigger\.addEventListener$\u0027click\u0027, \($ =\u003e \{\n appendAlert$\u0027Nice, you triggered this alert message!\u0027, \u0027success\u0027$\n \}\)\n \}\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Checks \u0026 Radios\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Indeterminate checkbox example in docs and StackBlitz\n document\.querySelectorAll$\u0027\.bd\-example\-indeterminate \[type=\u0022checkbox\u0022\]\u0027$\n \.forEach$checkbox =\u003e \{\n if \(checkbox\.id\.includes\(\u0027Indeterminate\u0027$\) \{\n checkbox\.indeterminate = true\n \}\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Links\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Disable empty links in docs examples only\n document\.querySelectorAll$\u0027\.bd\-content \[href=\u0022#\u0022\]\u0027$\n \.forEach$link =\u003e \{\n link\.addEventListener\(\u0027click\u0027, event =\u003e \{\n event\.preventDefault\($\n \}\)\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Modal\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Modal \u0027Varying modal content\u0027 example in docs and StackBlitz\n const exampleModal = document\.getElementById$\u0027exampleModal\u0027$\n if $exampleModal$ \{\n exampleModal\.addEventListener$\u0027show\.bs\.modal\u0027, event =\u003e \{\n \/\/ Button that triggered the modal\n const button = event\.relatedTarget\n \/\/ Extract info from data\-bs\-\* attributes\n const recipient = button\.getAttribute\(\u0027data\-bs\-whatever\u0027$\n\n \/\/ Update the modal\u0027s content\.\n const modalTitle = exampleModal\.querySelector$\u0027\.modal\-title\u0027$\n const modalBodyInput = exampleModal\.querySelector$\u0027\.modal\-body input\u0027$\n\n modalTitle\.textContent = `New message to \$\{recipient\}`\n modalBodyInput\.value = recipient\n \}\)\n \}\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Offcanvas\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ \u0027Offcanvas components\u0027 example in docs only\n const myOffcanvas = document\.querySelectorAll$\u0027\.bd\-example\-offcanvas \.offcanvas\u0027$\n if $myOffcanvas$ \{\n myOffcanvas\.forEach$offcanvas =\u003e \{\n offcanvas\.addEventListener\(\u0027show\.bs\.offcanvas\u0027, event =\u003e \{\n event\.preventDefault\($\n \}, false\)\n \}\)\n \}\n\}\)\n' : null const project = { files: { 'index.html': markup, 'index.js': jsSnippetContent }, title: 'Bootstrap Example', description: `Official example from ${window.location.href}`, template: jsSnippet ? 'javascript' : 'html', tags: ['bootstrap'] } StackBlitzSDK.openProject(project, { openFile: 'index.html' }) }

	
		OSZAR »