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

Contents Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each flavor’s contents and structure below. Remember, no matter the implementation flavor, Bootstrap’s JavaScript plugins require jQuery. Precompiled Bootstrap Once downloaded, unzip the compressed folder and you’ll see something like this: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.js └──

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

Position Position utilities are helpful for quickly placing a component outside the normal document flow. Choose from a handful of fixed or sticky position classes as needed. Fixed top Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS. <div class="fixed-top">...</div> Fixed bottom Position an element at the bottom of the viewport, from edge to edge. Be sure

Popovers Add small overlay content, like those found in iOS, to any element for housing secondary information. Contents Overview Example: Enable popovers everywhere Example: Using the container option Static popover Live demo Four directions Dismiss on next click Usage Options Methods $().popover(options) .popover('show') .popover('hide') .popover('toggle') .popover('dispose') Events Overview Things to know when using the popover plugin: Popovers rely on the 3rd party library Tether for

Pagination Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results or inboxes. Contents Overview Working with icons Disabled and active states Sizing Alignment Overview We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built wit

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

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