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

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

List group List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class. Contents Basic example Active items Disabled items Links and buttons Contextual classes With badges Custom content Basic example The most basic list group is an unordered list with list items and the proper classes. Build upon it with the option

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

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

Collapse The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript. Contents Example Accordion example Accessibility Usage Via data attributes Via JavaScript Options Methods .collapse(options) .collapse('toggle') .collapse('show') .collapse('hide') Events Example Click the buttons below to show and hide another element via class changes: .collapse hides content .collapsing is applied during transitions .collapse.show s

Figures Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>. Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive. Open example on getbootstrap.com <figure class="figure"> <img src="..." clas

Display property Use .d-block, .d-inline, or .d-inline-block to simply set an element’s display property to block, inline, or inline-block (respectively). To make an element display: none, use our responsive utilities instead. Open example on getbootstrap.com <div class="d-inline bg-success">Inline</div> <div class="d-inline bg-success">Inline</div> Open example on getbootstrap.com <span class="d-block bg-primary">Block</span> Open example on getbootstrap.com