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

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

Scrollspy Contents Example in navbar Usage Requires Bootstrap nav Requires relative positioning Via data attributes Via JavaScript Methods .scrollspy('refresh') Options Events Example in navbar The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well. Open example on getbootstrap.com Usage Requires Bootstrap nav Scrollspy currently requires

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

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

Typography The following utilities can be used to add additional styles to texts. Contents Text alignment Text transform Font weight and italics Text alignment Easily realign text to components with text alignment classes. Open example on getbootstrap.com <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, si

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

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

Progress Use our custom progress component for displaying simple or complex progress bars. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them. Contents How it works Customizing Labels Height Backgrounds Multiple bars Striped Animated stripes How it works Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We use the .progress as a wrapper to indicate the max v

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