Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Example

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Flush

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Always open

Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Example

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Live example

Link color

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Alert dismissible

Holy guacamole! You should check in on some of those fields below.

Badge

Documentation and examples for badges, our small count and labeling component.

Headings

Example heading New

Positioned

Background colors

Primary Secondary Success Danger Warning Info Light Dark

Breadcumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Example

Dividers

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Variants

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Example

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

card list group

An item
A second item
A third item

navigation

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Example

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Example

List

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Example

An item
A second item
A third item
A fourth item
And a fifth one

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Example

Paggination

Example

Placeholder

Example

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Accordion

Example

Accordion Item #1

Accordion Item #2

Accordion Item #3

Flush

Accordion Item #1

Accordion Item #2

Accordion Item #3

Always open

Accordion Item #1

Accordion Item #2

Accordion Item #3

Alert

Example

Live example

Link color

Alert dismissible

Badge

Headings

Example heading New