Style Guidelines

​​Heading Styles

ClassSampleCode

.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

ClassSampleCode

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


Card Styles

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

ClassSampleCode
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.

ClassSampleCode
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.

ClassSampleCode
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
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
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Light Alert
Dark Alert