Components

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page. click here.

Accordion

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

Default

Accordion Item #1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sit eum nisi qui quas veniam blanditiis alias, facere fugiat deleniti enim natus repudiandae in laudantium culpa eaque. Dolorem ipsam beatae nisi, a excepturi harum voluptatum consectetur culpa eos, ea optio? Optio minima vel, cum ipsam.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur.

Alerts

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

Default

Icons

Additional content

Badges

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

Default

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Background colors

Primary Secondary Success Danger Warning Info Light Dark

Pill badges

Primary Secondary Success Danger Warning Info Light Dark

Badges with button

Positioned

Profile

Buttons

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

Default

Outline buttons

Small buttons

Large buttons

Disabled state

Active toggle state

Block buttons

Button group Basic

Mixed styles

Button toolbar

Collapses

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

Link with href & data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Multiple targets

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Cards

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

Card image cap
Card title

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link
Card image cap
Card title

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

Go somewhere
Featured
Special title treatment

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

Go somewhere
2 days ago

Horizontal

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. View details.

Forms Basic

Checks & radios

Switches

Floating labels

Input Group

@
https://example.com/users/
$ .00
@
With textarea

List Group

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. View details.

Default List Group

Dapibus ac facilisis in A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

List Group With badges

  • A list item 14
  • A second list item 2
  • A third list item 1
  • A list item 14
  • A second list item 2
  • A third list item 1
  • A list item 14
  • A second list item 2
  • A third list item 1

Custom content

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.

Horizontal

  • 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

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. View details.

Left offcanvas

Offcanvas left
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Right offcanvas

Offcanvas right
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Top offcanvas

Offcanvas top
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Bottom offcanvas

Offcanvas bottom
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. View details.

Tooltips Default

With an SVG:

Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. View details.

Border spinner

Growing spinner

Loading

Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. View details.

Backgrounds

10%
25%
50%
75%
100%

Animated striped

Components