Images Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. Contents Responsive images Image thumbnails Aligning images Responsive images Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element. Open example on getbootstrap.com <img src="..." class="img-fluid" alt="Responsive image"> SVG i

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

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

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

Input group Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s. Contents Basic example Sizing Checkboxes and radio addons Multiple addons Button addons Buttons with dropdowns Segmented buttons Accessibility Basic example Place one add-on or button on either side of an input. You may also place one on both sides of an input. We do not support multiple form-controls in a single input group. Open example on getbootstrap.com <div clas

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

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

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

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