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

Jumbotron A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site. Example Open example on getbootstrap.com <div class="jumbotron"> <h1 class="display-3">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typogra

Overview Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes. Contents Containers Responsive breakpoints Z-index Containers Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (m

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

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

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

Grid system Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes. Contents How it works Grid options Auto-layout columns Equal-width Setting one column width Variable width content Equal-width multi-row Responsive classes All breakpoints Stacked to horizontal Mix and match Alignment Vertica

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

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