State of Wisconsin
.h1
<h1>Text goes here</h1>
.h2
<h2>Text goes here</h2>
.h3
<h3>Text goes here</h3>
.h4
<h4>Text goes here</h4>
.h5
<h5>Text goes here</h5>
.h6
<h6>Text goes here</h6>
.lead
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
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
<p class="small">Text goes here</p>
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Add an optional header and shadow to your cards.
.card-header .shadow
Some quick example text to build on the card title and make up the bulk of the card's content.
<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>
Add an optional header within a card.
.card-header
<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>
Here is a sample of a basic card.
.card
With supporting text below as a natural lead-in to additional content.
<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>
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Tile Design includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Primary Button: <a href="URL Link" class="btn btn-primary" role="button">Link Text</a>
<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>
<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>
<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>
<a href="URL Link" class="btn btn-link" role="button">Link Text</a>
Use class .btn-lg to make the button bigger.
.btn-lg
Primary Button: <a href="URL Link" class="btn btn-primary btn-lg" role="button">Link Text</a>
<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>
<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>
<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>
<a href="URL Link" class="btn btn-link btn-lg" role="button">Link Text</a>
Use class .btn-sm to make the button smaller.
.btn-sm
Small primary button: <a href="URL Link" class="btn btn-primary btn-sm" role="button">Link Text</a>
<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>
<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>
<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>
<a href="URL Link" class="btn btn-link btn-sm" role="button">Link Text</a>
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
.accordion .accordion-flush
.accordion-flush
<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 are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.