Skip to main content Skip to docs navigation
View on GitHub

Customize

Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.

Sass Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
Options Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
Color Learn about and customize the color systems that support the entire toolkit.
Color modes Explore our default light mode and the new dark mode, or create custom color modes yourself.
Components Learn how we build nearly all our components responsively and with base and modifier classes.
CSS variables Use Bootstrap's CSS custom properties for fast and forward-looking design and development.
Optimize Keep your projects lean, responsive, and maintainable so you can deliver the best experience.

Overview

There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.

Our two preferred methods are:

  1. Using Bootstrap via package manager so you can use and extend our source files.
  2. Using Bootstrap’s compiled distribution files or jsDelivr so you can add onto or override Bootstrap’s styles.

While we cannot go into details here on how to use every package manager, we can give some guidance on using Bootstrap with your own Sass compiler.

For those who want to use the distribution files, review the getting started page for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you’d like to use.

As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.

CSPs and embedded SVGs

Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. For organizations with more strict CSP configurations, we’ve documented all instances of our embedded SVGs (all of which are applied via background-image) so you can more thoroughly review your options.

Based on community conversation, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.

` 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-2024 The Bootstrap Authors\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\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 docs or StackBlitz\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 = \u0060${toastPlacement.dataset.originalClass} ${this.value}\u0060\n })\n }\n\n \/\/ Instantiate all toasts in docs pages 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 docs pages only\n \/\/ js-docs-start live-toast\n const toastTrigger = document.getElementById(\u0027liveToastBtn\u0027)\n const toastLiveExample = document.getElementById(\u0027liveToast\u0027)\n\n if (toastTrigger) {\n const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)\n toastTrigger.addEventListener(\u0027click\u0027, () =\u003e {\n toastBootstrap.show()\n })\n }\n \/\/ js-docs-end live-toast\n\n \/\/ -------------------------------\n \/\/ Alerts\n \/\/ -------------------------------\n \/\/ Used in \u0027Show live alert\u0027 example in docs or StackBlitz\n\n \/\/ js-docs-start live-alert\n const alertPlaceholder = document.getElementById(\u0027liveAlertPlaceholder\u0027)\n const appendAlert = (message, type) =\u003e {\n const wrapper = document.createElement(\u0027div\u0027)\n wrapper.innerHTML = [\n \u0060\u003cdiv class=\u0022alert alert-${type} alert-dismissible\u0022 role=\u0022alert\u0022\u003e\u0060,\n \u0060 \u003cdiv\u003e${message}\u003c\/div\u003e\u0060,\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 const alertTrigger = document.getElementById(\u0027liveAlertBtn\u0027)\n if (alertTrigger) {\n alertTrigger.addEventListener(\u0027click\u0027, () =\u003e {\n appendAlert(\u0027Nice, you triggered this alert message!\u0027, \u0027success\u0027)\n })\n }\n \/\/ js-docs-end live-alert\n\n \/\/ --------\n \/\/ Carousels\n \/\/ --------\n \/\/ Instantiate all non-autoplaying carousels in docs or StackBlitz\n document.querySelectorAll(\u0027.carousel:not([data-bs-ride=\u0022carousel\u0022])\u0027)\n .forEach(carousel =\u003e {\n bootstrap.Carousel.getOrCreateInstance(carousel)\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 \/\/ js-docs-start varying-modal-content\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 \/\/ If necessary, you could initiate an Ajax request here\n \/\/ and then do the updating in a callback.\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 = \u0060New message to ${recipient}\u0060\n modalBodyInput.value = recipient\n })\n }\n \/\/ js-docs-end varying-modal-content\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' }) }