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

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

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

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

Tables Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes. Contents Examples Table head options Striped rows Bordered table Hoverable rows Small table Contextual classes Responsive tables Examples Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All t

Spacing Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem. Contents Notation Examples Horizontal centering Notation Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are appli

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

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

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

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