Screenreaders Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins. <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> // Usage as a mixin .skip-navigation { @include sr-only; @include sr-only-focusable; }

Badges Small and adaptive tag for adding context to just about any content. Contents Example Contextual variations Pill badges Example Badges scale to match the size of the immediate parent element by using relative font sizing and em units. Open example on getbootstrap.com <h1>Example heading <span class="badge badge-default">New</span></h1> <h2>Example heading <span class="badge badge-default">New</span></h2> <h3>Example heading <span

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

Tooltips Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage. Contents Overview Example: Enable tooltips everywhere Examples Static demo Interactive demo Usage Markup Options Methods $().tooltip(options) .tooltip('show') .tooltip('hide') .tooltip('toggle') .tooltip('dispose') Events Overview Things to know when using the tooltip plugin: Tool

Sizing Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for 25%, 50%, 75%, and 100% by default. Width and height utilities are generated from the $sizes Sass map in _variables.scss. Modify those values as you need to generate different utilities here. Open example on getbootstrap.com <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="w-50 p-3" style="background-color: #eee;">

Vertical alignment Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements. Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed. With inline elements: Open example on getbootstrap.com <span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align

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

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

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

Typography Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the textual utility classes. Contents Global settings Headings Customizing headings Display headings Lead Inline text elements Text utilities Abbreviations Blockquotes Naming a source Reverse layout Lists Unstyled Inline Description list alignment Responsive typography Global settings Bootstrap sets basic global display, typography, and link st