Code Styles for inline code snippets and longer, multiline blocks of code. Contents Inline code Code blocks Variables User input Sample output Inline code Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets. Open example on getbootstrap.com For example, <code>&lt;section&gt;</code> should be wrapped as inline. Code blocks Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper re

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

Clearfix Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin. <div class="clearfix">...</div> // Mixin itself @mixin clearfix() { &::after { display: block; content: ""; clear: both; } } // Usage as a mixin .element { @include clearfix; } The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the

Cards A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. Contents Example Content types Blocks Titles, text, and links Images List groups Kitchen sink Header and footer Sizing Using gr

Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. Contents Examples Button tags Outline buttons Sizes Active state Disabled state Button plugin Toggle states Checkbox and radio buttons Methods Examples Bootstrap includes six predefined button styles, each serving its own semantic purpose. Open example on getbootstrap.com <!-- Provides extra visual weight and identifies th

Button group Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin. Contents Basic example Button toolbar Sizing Nesting Vertical variation Tooltips and popovers Basic example Wrap a series of buttons with .btn in .btn-group. Open example on getbootstrap.com <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left&l

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

Browsers and devices Bootstrap supports a wide variety of modern browsers and devices, and some older ones. See which exact ones below, as well as detailed information on known quirks and bugs. Contents Supported browsers Mobile devices Desktop browsers Internet Explorer Internet Explorer 10 in Windows Phone 8 Modals and dropdowns on mobile Overflow and scrolling iOS text fields and scrolling Navbar Dropdowns Browser zooming Sticky :hover/:focus on mobile Printing Android stock browser Sel

Breadcrumb Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content. Open example on getbootstrap.com <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb">

Best practices We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves. Heads up! This copy is a work in progress. General outline Working with CSS Working with Sass files Building new CSS components Working with flexbox Ask in Slack