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

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

Reboot Part of Bootstrap’s job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more. Conte

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

Popovers Add small overlay content, like those found in iOS, to any element for housing secondary information. Contents Overview Example: Enable popovers everywhere Example: Using the container option Static popover Live demo Four directions Dismiss on next click Usage Options Methods $().popover(options) .popover('show') .popover('hide') .popover('toggle') .popover('dispose') Events Overview Things to know when using the popover plugin: Popovers rely on the 3rd party library Tether for

Pagination Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results or inboxes. Contents Overview Working with icons Disabled and active states Sizing Alignment Overview We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built wit

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

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

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