Close icon Use a generic close icon for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label. Open example on getbootstrap.com <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

Overview Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes. Contents Containers Responsive breakpoints Z-index Containers Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (m

Flexbox Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Contents Enable flex behaviors Direction Justify content Align items Align self Auto margins With justify-content With align-items Wrap Order Align content Enable flex behaviors Apply display utilities to create a flexbox container and transform direct children elements int

Image replacement Utilize the .text-hide class or mixin to help replace an element’s text content with a background image. <h1 class="text-hide">Custom heading</h1> // Usage as a mixin .heading { @include text-hide; }

Reboot Part of Bootstrap’s job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more. Conte

Invisible content The .invisible class can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document. <div class="invisible">...</div> // Class .invisible { visibility: hidden; } // Usage as a mixin .element { @include invisible; }

Typography Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the textual utility classes. Contents Global settings Headings Customizing headings Display headings Lead Inline text elements Text utilities Abbreviations Blockquotes Naming a source Reverse layout Lists Unstyled Inline Description list alignment Responsive typography Global settings Bootstrap sets basic global display, typography, and link st

Navbar The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. It’s easily extensible and, thanks to our Collapse plugin, can easily integrate responsive behaviors. Contents How it works Supported content Brand Nav Forms Text Color schemes Containers Placement Responsive behaviors Toggler External content How it works Here’s what you need to know before getting started with the navbar: Navbars require a wrapping .navbar with .navbar-toggleable-

Modal Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more. Contents How it works Examples Modal components Live demo Scrolling long content Tooltips and popovers Using the grid Varying modal content Remove animation Dynamic heights Accessibility Embedding YouTube videos Optional sizes Usage Via data attributes Via JavaSc

Screenreaders Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins. <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> // Usage as a mixin .skip-navigation { @include sr-only; @include sr-only-focusable; }