Style Guidelines

Heading Styles

Class	Sample	Code
`.h1`	Heading 1	`<h1>Text goes here</h1>`
`.h2`	Heading 2	`<h2>Text goes here</h2>`
`.h3`	Heading 3	`<h3>Text goes here</h3>`
`.h4`	Heading 4	`<h4>Text goes here</h4>`
`.h5`	Heading 5	`<h5>Text goes here</h5>`
`.h6`	Heading 6	`<h6>Text goes here</h6>`

Paragraph Styles

Class Sample Code

Class	Sample	Code
`.lead`	Lead Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`<p class="lead">Text goes here</p>`
`.p`	Regular Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	`<p>Text</p>`
`.small`	Small Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	`<p class="small">Text goes here</p>`

.lead

Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text goes here

.p

Regular Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text

.small

Small Paragraph

Text goes here

Card Styles

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

Class Sample Code

Class	Sample	Code
Card With Header - Shadow Add an optional header and shadow to your cards. `.card-header .shadow`	Heading 3 Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere	`<div class="card card-shadow"> <div class="card-header"> <h3>Heading 3</h3> </div> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>`
Card With Header: No Shadow Add an optional header within a card. `.card-header`	Heading 3 Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere	`<div class="card"> <div class="card-header"> <h3>Heading 3</h3> </div> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>`
Regular Card Here is a sample of a basic card. `.card`	Heading 3 With supporting text below as a natural lead-in to additional content. Go somewhere	`<div class="card"> <div class="card-body"> <h3>Heading 3</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>`

Card With Header - Shadow

Add an optional header and shadow to your cards.

.card-header .shadow

Heading 3

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

Go somewhere

 <div class="card card-shadow">
   <div class="card-header">
     <h3>Heading 3</h3>
   </div>
   <div class="card-body">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
 </div>

Card With Header: No Shadow

Add an optional header within a card.

.card-header

Heading 3

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

Go somewhere

 <div class="card">
   <div class="card-header">
     <h3>Heading 3</h3>
   </div>
   <div class="card-body">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
 </div>

Regular Card

Here is a sample of a basic card.

.card

Heading 3

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

Go somewhere

 <div class="card">
   <div class="card-body">
     <h3>Heading 3</h3>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
 </div>

Button Styles

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

Class Sample Code

Class	Sample	Code
Regular Buttons Tile Design includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.	Primary Button Secondary Button Dark Button Link Button	Primary Button: `<a href="URL Link" class="btn btn-primary" role="button">Link Text</a>` Secondary Button: `<a href="URL Link" class="btn btn-secondary" role="button">Link Text</a>` Dark Button: `<a href="URL Link" class="btn btn-dark" role="button">Link Text</a>` Link Button: `<a href="URL Link" class="btn btn-link" role="button">Link Text</a>`
Large Buttons Use class `.btn-lg` to make the button bigger.	Primary Button Secondary Button Dark Button Link Button	Primary Button: `<a href="URL Link" class="btn btn-primary btn-lg" role="button">Link Text</a>` Secondary Button: `<a href="URL Link" class="btn btn-secondary btn-lg" role="button">Link Text</a>` Dark Button: `<a href="URL Link" class="btn btn-dark btn-lg" role="button">Link Text</a>` Link Button: `<a href="URL Link" class="btn btn-link btn-lg" role="button">Link Text</a>`
Small Buttons Use class `.btn-sm` to make the button smaller.	Primary Button Secondary Button Dark Button Link Button	Small primary button: `<a href="URL Link" class="btn btn-primary btn-sm" role="button">Link Text</a>` Small secondary button: `<a href="URL Link" class="btn btn-secondary btn-sm" role="button">Link Text</a>` Small dark button: `<a href="URL Link" class="btn btn-dark btn-sm" role="button">Link Text</a>` Small link button: `<a href="URL Link" class="btn btn-link btn-sm" role="button">Link Text</a>`

Regular Buttons

Tile Design includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Primary Button Secondary Button Dark Button Link Button

Primary Button:
<a href="URL Link" class="btn btn-primary" role="button">Link Text</a>

Secondary Button:
<a href="URL Link" class="btn btn-secondary" role="button">Link Text</a>

Dark Button:
<a href="URL Link" class="btn btn-dark" role="button">Link Text</a>

Link Button:
<a href="URL Link" class="btn btn-link" role="button">Link Text</a>

Large Buttons

Use class .btn-lg to make the button bigger.

Primary Button Secondary Button Dark Button Link Button

Primary Button:
<a href="URL Link" class="btn btn-primary btn-lg" role="button">Link Text</a>

Secondary Button:
<a href="URL Link" class="btn btn-secondary btn-lg" role="button">Link Text</a>

Dark Button:
<a href="URL Link" class="btn btn-dark btn-lg" role="button">Link Text</a>

Link Button:
<a href="URL Link" class="btn btn-link btn-lg" role="button">Link Text</a>

Small Buttons

Use class .btn-sm to make the button smaller.

Primary Button Secondary Button Dark Button Link Button

Small primary button: <a href="URL Link" class="btn btn-primary btn-sm" role="button">Link Text</a>

Small secondary button: <a href="URL Link" class="btn btn-secondary btn-sm" role="button">Link Text</a>

Small dark button: <a href="URL Link" class="btn btn-dark btn-sm" role="button">Link Text</a>

Small link button: <a href="URL Link" class="btn btn-link btn-sm" role="button">Link Text</a>

Accordions

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

Class	Sample	Code
Transparent Accordion `.accordion .accordion-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.	<div class="accordion accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingOne"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Accordion Item #1 </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Accordion Item #2 </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Accordion Item #3 </button> </h2> <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion.</div> </div> </div> </div>

List Groups

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.

LINK LIST

The current link item A second link item A third link item A fourth link item A disabled link item

TRANSPARENT LIST

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

Alert Styles

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

Primary Alert

A simple primary alert—check it out!

Secondary Alert

A simple secondary alert—check it out!

Success Alert

A simple success alert—check it out!

Danger Alert

A simple danger alert—check it out!

Warning Alert

A simple warning alert—check it out!

Light Alert

A simple light alert—check it out!

Dark Alert

A simple dark alert—check it out!

Style Guidelines

​​Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph Styles

Lead Paragraph

Regular Paragraph

Small Paragraph

Card Styles

Card With Header - Shadow

Heading 3

Card With Header: No Shadow

Heading 3

Regular Card

Heading 3

Button Styles

Regular Buttons

Large Buttons

Small Buttons

Accordions

Transparent Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

List Groups

LINK LIST

TRANSPARENT LIST

Alert Styles

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Light Alert

Dark Alert

Heading Styles