Collapse The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript. Contents Example Accordion example Accessibility Usage Via data attributes Via JavaScript Options Methods .collapse(options) .collapse('toggle') .collapse('show') .collapse('hide') Events Example Click the buttons below to show and hide another element via class changes: .collapse hides content .collapsing is applied during transitions .collapse.show s

Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Contents Examples Link color Additional content Dismissing JavaScript behavior Triggers Methods Events Examples Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin. Open example on getbootst

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

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

Forms Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms. Contents Form controls Textual inputs Form layouts Form groups Inline forms Using the Grid Checkboxes and radios Default (stacked) Inline Without labels Static controls Disabled states Readonly inputs Control sizing Column sizing Help text Block level Inline Validation How it works Defining states Examples Custom forms Checkboxes and radios Checkboxes Rad

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

Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. Contents Examples Button tags Outline buttons Sizes Active state Disabled state Button plugin Toggle states Checkbox and radio buttons Methods Examples Bootstrap includes six predefined button styles, each serving its own semantic purpose. Open example on getbootstrap.com <!-- Provides extra visual weight and identifies th

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

JavaScript Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more. Contents Individual or compiled Dependencies Data attributes Programmatic API Default settings No conflict Events Version numbers No special fallbacks when JavaScript is disabled Transitions Individual or compiled Plugins can be included individually (using Bootstrap’s individual *.js files), or all at once u

Accessibility Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT. Contents Component requirements Button groups Skip navigation Nested headings Additional resources Component requirements Some common HTML elements are always in need for basic accessibility enhancements through roles and Aria attributes. Below is a list of some of the most frequently used ones. Button groups In order for assistive technologie