Shortcodes
Please follow this link to view all bootstrap 5 framework classes
Accordion
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Pulvinar fames non phasellus dignissim imperdiet sociosqu magna dictum gravida, tincidunt mattis mauris felis ante montes rhoncus semper, iaculis nisl facilisis malesuada maecenas pharetra metus risus
Ultrices nunc aptent lacus sodales sagittis amet urna viverra ut, elementum habitant at congue rhoncus ultricies nostra vitae bibendum, sed libero vulputate mus dictumst felis imperdiet enim.
Backgrounds
.bg-primary-lighten
.bg-primary
.bg-primary-darken
.bg-secondary-lighten
.bg-secondary
.bg-secondary-darken
.bg-success-lighten
.bg-success
.bg-success-darken
.bg-info-lighten
.bg-info
.bg-info-darken
.bg-warning-lighten
.bg-warning
.bg-warning-darken
.bg-danger-lighten
.bg-danger
.bg-danger-darken
.bg-third-lighten
.bg-third
.bg-third-darken
.bg-fourth-lighten
.bg-fourth
.bg-fourth-darken
.bg-fifth-lighten
.bg-fifth
.bg-fifth-darken
.bg-light-lighten
.bg-light
.bg-light-darken
.bg-dark-lighten
.bg-dark
.bg-dark-darken
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-primary.bg-hvr-light
.bg-primary.bg-hvr-dark
.bg-secondary.bg-hvr-light
.bg-secondary.bg-hvr-dark
.bg-success.bg-hvr-light
.bg-success.bg-hvr-dark
.bg-info.bg-hvr-light
.bg-info.bg-hvr-dark
.bg-warning.bg-hvr-light
.bg-warning.bg-hvr-dark
.bg-danger.bg-hvr-light
.bg-danger.bg-hvr-dark
.bg-third.bg-hvr-light
.bg-third.bg-hvr-dark
.bg-fourth.bg-hvr-light
.bg-fourth.bg-hvr-dark
.bg-fifth.bg-hvr-light
.bg-fifth.bg-hvr-dark
.bg-light.bg-hvr-light
.bg-light.bg-hvr-dark
.bg-dark.bg-hvr-light
.bg-dark.bg-hvr-dark
Dividers
<hr />
<hr class="border-primary" />
<hr class="border-secondary" />
<hr class="border-success" />
<hr class="border-info" />
<hr class="border-warning" />
<hr class="border-warning" />
<hr class="border-third" />
<hr class="border-fourth" />
<hr class="border-fifth" />
<hr class="border-light" />
<hr class="border-dark" />
Alerts
<div class="alert alert-primary" role="alert"> ... </div>
This is a primary alert-check it out!
<div class="alert alert-secondary" role="alert"> ... </div>
This is a secondary alert-check it out!
<div class="alert alert-success" role="alert"> ... </div>
This is a success alert-check it out!
<div class="alert alert-danger" role="alert"> ... </div>
This is a danger alert-check it out!
<div class="alert alert-warning" role="alert"> ... </div>
This is a warning alert-check it out!
<div class="alert alert-info" role="alert"> ... </div>
This is a info alert-check it out!
<div class="alert alert-third" role="alert"> ... </div>
This is a third alert-check it out!
<div class="alert alert-fourth" role="alert"> ... </div>
This is a fourth alert-check it out!
<div class="alert alert-fifth" role="alert"> ... </div>
This is a fifth alert-check it out!
<div class="alert alert-light" role="alert"> ... </div>
This is a light alert-check it out!
<div class="alert alert-dark" role="alert"> ... </div>
This is a dark alert-check it out!
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
Holy guacamole! You should check in on some of those fields below.
Progress
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>
Spinners
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
Growing spinner
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Loading...
