Button group Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin. Contents Basic example Button toolbar Sizing Nesting Vertical variation Tooltips and popovers Basic example Wrap a series of buttons with .btn in .btn-group. Open example on getbootstrap.com <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left&l

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

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

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

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

Navs Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style. Contents Base nav Available styles Horizontal alignment Vertical Tabs Pills Fill and justify Working with flex utilities Regarding accessibility Using dropdowns Tabs with dropdowns Pills with dropdowns JavaScript behavior Using data attributes Via JavaScript Fade effect Methods $().tab .tab(‘show’) Events

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

Responsive helpers Responsive embeds Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes. Pro-Tip! You don’t need to include frameborder="0" in your

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

Dropdowns Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision. Contents Examples Single button dropdowns Split button dropdowns Sizing Dropup variation Menu items Menu alignment Menu headers Menu dividers Disabled menu items Usage Via data attributes Via JavaScript Options Methods Events Exam