Typography


Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.






h1. Heading 1


h2. Heading 2


h3. Heading 3


h4. Heading 4


h5. Heading 5

h6. Heading 6



Display 1


Display 2


Display 3


Display 4


Display 5


Display 6








This is a lead paragraph. It stands out from regular paragraphs.


You can use the mark tag to highlight text.


This line of text is meant to be treated as deleted text.


This line of text is meant to be treated as no longer accurate.


This line of text is meant to be treated as an addition to the document.


This line of text will render as underlined.


This line of text is meant to be treated as fine print.


This line rendered as bold text.


This line rendered as italicized text.








Alerts


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




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.







Badge


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





Example heading New


Example heading New


Example heading New


Example heading New


Example heading New


Example heading New


Example heading New


Example heading New



Primary Secondary Success Danger Warning Info Light Dark







Buttons


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




        

       

  







Card


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






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






Image



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














Card styles


Cards include various options for customizing their backgrounds, borders, and color.







Header


Primary card title

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







Header


Secondary card title

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







Header


Success card title

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







Header


Danger card title

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







Header


Warning card title

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







Header


Info card title

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







Header


Light card title

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







Header


Dark card title

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












Progress


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






0%



25%



50%



75%



100%









Spinners


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





Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...



Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...

 
Loading...








Pagination


Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.