Carousel The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). Please be aware that neste

Responsive utilities For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed. Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device’s presentation. Contents Available classes Test cases Available classes The .hidden-*-up classes hide the element when the viewport is at

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; }

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; }

Build tools Bootstrap uses Grunt for its CSS and JavaScript build system and Jekyll for the written documentation. Our Gruntfile includes convenient methods for working with the framework, including compiling code, running tests, and more. Contents Tooling setup Using Grunt Autoprefixer Local documentation Troubleshooting Tooling setup To use our Gruntfile and run our documentation locally, you’ll need a copy of Bootstrap’s source files, Node, and Grunt. Follow these steps and you should be r

Media object The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox. Contents Example Nesting Alignment Order Media list Example Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utiliti

Accessibility Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT. Contents Component requirements Button groups Skip navigation Nested headings Additional resources Component requirements Some common HTML elements are always in need for basic accessibility enhancements through roles and Aria attributes. Below is a list of some of the most frequently used ones. Button groups In order for assistive technologie

JavaScript Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more. Contents Individual or compiled Dependencies Data attributes Programmatic API Default settings No conflict Events Version numbers No special fallbacks when JavaScript is disabled Transitions Individual or compiled Plugins can be included individually (using Bootstrap’s individual *.js files), or all at once u

Forms Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms. Contents Form controls Textual inputs Form layouts Form groups Inline forms Using the Grid Checkboxes and radios Default (stacked) Inline Without labels Static controls Disabled states Readonly inputs Control sizing Column sizing Help text Block level Inline Validation How it works Defining states Examples Custom forms Checkboxes and radios Checkboxes Rad

Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Contents Examples Link color Additional content Dismissing JavaScript behavior Triggers Methods Events Examples Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin. Open example on getbootst