Media object

Media object The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox. Contents Example Nesting Alignment Order Media list Example Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utiliti

Jumbotron

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

Layout

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

JavaScript

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

Invisible content

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

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

Images

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

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

Grid

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

Forms

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