Scribd
Upload
8 views23 pages

Gmail - Bootstrap Classes

The document provides a comprehensive reference for Bootstrap 5.1.0 classes, detailing various components such as Accordion, Alerts, and Alignment with their respective class names and descriptions. It includes a structured layout with a search feature and visually distinct sections for easy navigation. The document is formatted in HTML and styled for clarity and usability.

Uploaded by

yusufmansuri80787
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views23 pages

Gmail - Bootstrap Classes

The document provides a comprehensive reference for Bootstrap 5.1.0 classes, detailing various components such as Accordion, Alerts, and Alignment with their respective class names and descriptions. It includes a structured layout with a search feature and visually distinct sections for easy navigation. The document is formatted in HTML and styled for clarity and usability.

Uploaded by

yusufmansuri80787
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Bootstrap classes

2 messages

Irfan mansuri <irfanbhai8949@[Link]> Sun, Jul 6, 2025 at 1:56 PM


To: yusufmansuri80787@[Link]

[Link]
46b2963cc2/[Link]

Sent from my iPhone

Irfan mansuri <irfanbhai8949@[Link]> Sun, Jul 6, 2025 at 5:09 PM


To: yusufmansuri80787@[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Bootstrap 5.1.0 Classes Reference</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
h1, h2, h3 {
color: #2c3e50;
}
h1 {
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
text-align: center;
}
h2 {
background-color: #e8f4fc;
padding: 10px;
border-left: 4px solid #3498db;
margin-top: 40px;
}
.category {
margin-bottom: 40px;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.class-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
}
.class-card {
border: 1px solid #e0e0e0;
padding: 15px;
border-radius: 5px;
background-color: white;
}
.class-name {
font-weight: bold;
color: #e74c3c;
margin-bottom: 5px;
font-family: monospace;
font-size: 0.9em;
word-break: break-word;
}
.class-desc {
color: #555;
font-size: 0.9em;
}
.version {
color: #7f8c8d;
font-style: italic;
margin-bottom: 20px;
text-align: center;
display: block;
}
.search-container {
margin: 20px 0;
text-align: center;
}
#search {
padding: 10px;
width: 100%;
max-width: 500px;
border: 1px solid #ddd;
border-radius: 4px;
}
.hidden {
display: none;
}
@media (max-width: 768px) {
.class-list {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h1>Complete Bootstrap 5.1.0 Classes Reference</h1>
<span class="version">v5.1.0 – August 2021</span>

<div class="search-container">
<input type="text" id="search" placeholder="Search for classes...">
</div>

<!-- Accordion -->


<div class="category">
<h2>Accordion</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.accordion</div>
<div class="class-desc">Base class for accordion component</div>
</div>
<div class="class-card">
<div class="class-name">.accordion-body</div>
<div class="class-desc">Styles the content area of an accordion item</div>
</div>
<div class="class-card">
<div class="class-name">.accordion-button</div>
<div class="class-desc">Styles the clickable header of an accordion item</div>
</div>
<div class="class-card">
<div class="class-name">.accordion-collapse</div>
<div class="class-desc">Manages the collapsing behavior of accordion content</div>
</div>
<div class="class-card">
<div class="class-name">.accordion-flush</div>
<div class="class-desc">Removes outer borders for a flush accordion</div>
</div>
<div class="class-card">
<div class="class-name">.accordion-header</div>
<div class="class-desc">Styles the header container of an accordion item</div>
</div>
<div class="class-card">
<div class="class-name">.accordion-item</div>
<div class="class-desc">Styles each individual item in an accordion</div>
</div>
</div>
</div>

<!-- Alerts -->


<div class="category">
<h2>Alerts</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.alert</div>
<div class="class-desc">Base alert component</div>
</div>
<div class="class-card">
<div class="class-name">.alert-danger</div>
<div class="class-desc">Red alert indicating danger</div>
</div>
<div class="class-card">
<div class="class-name">.alert-dark</div>
<div class="class-desc">Dark gray alert</div>
</div>
<div class="class-card">
<div class="class-name">.alert-dismissible</div>
<div class="class-desc">Alert that can be dismissed</div>
</div>
<div class="class-card">
<div class="class-name">.alert-heading</div>
<div class="class-desc">Styles headings within alerts</div>
</div>
<div class="class-card">
<div class="class-name">.alert-info</div>
<div class="class-desc">Blue alert for informational messages</div>
</div>
<div class="class-card">
<div class="class-name">.alert-light</div>
<div class="class-desc">Light gray alert</div>
</div>
<div class="class-card">
<div class="class-name">.alert-link</div>
<div class="class-desc">Styles links within alerts</div>
</div>
<div class="class-card">
<div class="class-name">.alert-primary</div>
<div class="class-desc">Primary brand color alert</div>
</div>
<div class="class-card">
<div class="class-name">.alert-secondary</div>
<div class="class-desc">Secondary color alert</div>
</div>
<div class="class-card">
<div class="class-name">.alert-success</div>
<div class="class-desc">Green alert indicating success</div>
</div>
<div class="class-card">
<div class="class-name">.alert-warning</div>
<div class="class-desc">Yellow alert for warnings</div>
</div>
</div>
</div>
<!-- Alignment -->
<div class="category">
<h2>Alignment</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.align-baseline</div>
<div class="class-desc">Aligns items to their baseline</div>
</div>
<div class="class-card">
<div class="class-name">.align-bottom</div>
<div class="class-desc">Aligns items to the bottom</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-around</div>
<div class="class-desc">Distributes space around flex lines</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-between</div>
<div class="class-desc">Distributes space between flex lines</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-center</div>
<div class="class-desc">Centers flex lines</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-end</div>
<div class="class-desc">Aligns flex lines to the end</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-lg-around</div>
<div class="class-desc">align-content-around on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-lg-between</div>
<div class="class-desc">align-content-between on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-lg-center</div>
<div class="class-desc">align-content-center on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-lg-end</div>
<div class="class-desc">align-content-end on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-lg-start</div>
<div class="class-desc">align-content-start on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-lg-stretch</div>
<div class="class-desc">align-content-stretch on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-md-around</div>
<div class="class-desc">align-content-around on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-md-between</div>
<div class="class-desc">align-content-between on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-md-center</div>
<div class="class-desc">align-content-center on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-md-end</div>
<div class="class-desc">align-content-end on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-md-start</div>
<div class="class-desc">align-content-start on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-md-stretch</div>
<div class="class-desc">align-content-stretch on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-sm-around</div>
<div class="class-desc">align-content-around on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-sm-between</div>
<div class="class-desc">align-content-between on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-sm-center</div>
<div class="class-desc">align-content-center on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-sm-end</div>
<div class="class-desc">align-content-end on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-sm-start</div>
<div class="class-desc">align-content-start on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-sm-stretch</div>
<div class="class-desc">align-content-stretch on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-start</div>
<div class="class-desc">Aligns flex lines to the start</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-stretch</div>
<div class="class-desc">Stretches flex lines to fill container</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xl-around</div>
<div class="class-desc">align-content-around on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xl-between</div>
<div class="class-desc">align-content-between on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xl-center</div>
<div class="class-desc">align-content-center on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xl-end</div>
<div class="class-desc">align-content-end on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xl-start</div>
<div class="class-desc">align-content-start on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xl-stretch</div>
<div class="class-desc">align-content-stretch on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xxl-around</div>
<div class="class-desc">align-content-around on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xxl-between</div>
<div class="class-desc">align-content-between on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xxl-center</div>
<div class="class-desc">align-content-center on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xxl-end</div>
<div class="class-desc">align-content-end on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xxl-start</div>
<div class="class-desc">align-content-start on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-content-xxl-stretch</div>
<div class="class-desc">align-content-stretch on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-center</div>
<div class="class-desc">Centers flex items vertically</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-end</div>
<div class="class-desc">Aligns flex items to the end</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-lg-baseline</div>
<div class="class-desc">align-items-baseline on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-lg-center</div>
<div class="class-desc">align-items-center on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-lg-end</div>
<div class="class-desc">align-items-end on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-lg-start</div>
<div class="class-desc">align-items-start on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-lg-stretch</div>
<div class="class-desc">align-items-stretch on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-md-baseline</div>
<div class="class-desc">align-items-baseline on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-md-center</div>
<div class="class-desc">align-items-center on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-md-end</div>
<div class="class-desc">align-items-end on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-md-start</div>
<div class="class-desc">align-items-start on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-md-stretch</div>
<div class="class-desc">align-items-stretch on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-sm-baseline</div>
<div class="class-desc">align-items-baseline on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-sm-center</div>
<div class="class-desc">align-items-center on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-sm-end</div>
<div class="class-desc">align-items-end on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-sm-start</div>
<div class="class-desc">align-items-start on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-sm-stretch</div>
<div class="class-desc">align-items-stretch on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-start</div>
<div class="class-desc">Aligns flex items to the start</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-stretch</div>
<div class="class-desc">Stretches flex items to fill container</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xl-baseline</div>
<div class="class-desc">align-items-baseline on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xl-center</div>
<div class="class-desc">align-items-center on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xl-end</div>
<div class="class-desc">align-items-end on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xl-start</div>
<div class="class-desc">align-items-start on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xl-stretch</div>
<div class="class-desc">align-items-stretch on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xxl-baseline</div>
<div class="class-desc">align-items-baseline on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xxl-center</div>
<div class="class-desc">align-items-center on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xxl-end</div>
<div class="class-desc">align-items-end on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xxl-start</div>
<div class="class-desc">align-items-start on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-items-xxl-stretch</div>
<div class="class-desc">align-items-stretch on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-auto</div>
<div class="class-desc">Resets align-self to default</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-baseline</div>
<div class="class-desc">Aligns item to baseline</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-center</div>
<div class="class-desc">Centers item vertically</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-end</div>
<div class="class-desc">Aligns item to the end</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-lg-auto</div>
<div class="class-desc">align-self-auto on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-lg-baseline</div>
<div class="class-desc">align-self-baseline on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-lg-center</div>
<div class="class-desc">align-self-center on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-lg-end</div>
<div class="class-desc">align-self-end on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-lg-start</div>
<div class="class-desc">align-self-start on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-lg-stretch</div>
<div class="class-desc">align-self-stretch on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-md-auto</div>
<div class="class-desc">align-self-auto on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-md-baseline</div>
<div class="class-desc">align-self-baseline on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-md-center</div>
<div class="class-desc">align-self-center on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-md-end</div>
<div class="class-desc">align-self-end on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-md-start</div>
<div class="class-desc">align-self-start on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-md-stretch</div>
<div class="class-desc">align-self-stretch on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-sm-auto</div>
<div class="class-desc">align-self-auto on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-sm-baseline</div>
<div class="class-desc">align-self-baseline on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-sm-center</div>
<div class="class-desc">align-self-center on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-sm-end</div>
<div class="class-desc">align-self-end on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-sm-start</div>
<div class="class-desc">align-self-start on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-sm-stretch</div>
<div class="class-desc">align-self-stretch on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-start</div>
<div class="class-desc">Aligns item to the start</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-stretch</div>
<div class="class-desc">Stretches item to fill container</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xl-auto</div>
<div class="class-desc">align-self-auto on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xl-baseline</div>
<div class="class-desc">align-self-baseline on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xl-center</div>
<div class="class-desc">align-self-center on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xl-end</div>
<div class="class-desc">align-self-end on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xl-start</div>
<div class="class-desc">align-self-start on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xl-stretch</div>
<div class="class-desc">align-self-stretch on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xxl-auto</div>
<div class="class-desc">align-self-auto on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xxl-baseline</div>
<div class="class-desc">align-self-baseline on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xxl-center</div>
<div class="class-desc">align-self-center on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xxl-end</div>
<div class="class-desc">align-self-end on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xxl-start</div>
<div class="class-desc">align-self-start on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-self-xxl-stretch</div>
<div class="class-desc">align-self-stretch on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.align-text-bottom</div>
<div class="class-desc">Aligns text to the bottom of its container</div>
</div>
<div class="class-card">
<div class="class-name">.align-text-top</div>
<div class="class-desc">Aligns text to the top of its container</div>
</div>
<div class="class-card">
<div class="class-name">.align-top</div>
<div class="class-desc">Aligns element to the top</div>
</div>
</div>
</div>

<!-- Badges & Backgrounds -->


<div class="category">
<h2>Badges & Backgrounds</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.badge</div>
<div class="class-desc">Small count and labeling component</div>
</div>
<div class="class-card">
<div class="class-name">.bg-black</div>
<div class="class-desc">Black background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-body</div>
<div class="class-desc">Default body background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-danger</div>
<div class="class-desc">Red background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-dark</div>
<div class="class-desc">Dark gray background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-gradient</div>
<div class="class-desc">Adds gradient to background colors</div>
</div>
<div class="class-card">
<div class="class-name">.bg-info</div>
<div class="class-desc">Light blue background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-light</div>
<div class="class-desc">Light gray background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-opacity-10</div>
<div class="class-desc">10% opacity for background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-opacity-100</div>
<div class="class-desc">100% opacity for background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-opacity-25</div>
<div class="class-desc">25% opacity for background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-opacity-50</div>
<div class="class-desc">50% opacity for background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-opacity-75</div>
<div class="class-desc">75% opacity for background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-primary</div>
<div class="class-desc">Primary brand background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-secondary</div>
<div class="class-desc">Secondary background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-success</div>
<div class="class-desc">Green background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-transparent</div>
<div class="class-desc">Transparent background</div>
</div>
<div class="class-card">
<div class="class-name">.bg-warning</div>
<div class="class-desc">Yellow background color</div>
</div>
<div class="class-card">
<div class="class-name">.bg-white</div>
<div class="class-desc">White background color</div>
</div>
</div>
</div>

<!-- Borders -->


<div class="category">
<h2>Borders</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.border</div>
<div class="class-desc">Adds border to element</div>
</div>
<div class="class-card">
<div class="class-name">.border-0</div>
<div class="class-desc">Removes border</div>
</div>
<div class="class-card">
<div class="class-name">.border-1</div>
<div class="class-desc">Thin border (1px)</div>
</div>
<div class="class-card">
<div class="class-name">.border-2</div>
<div class="class-desc">Medium border (2px)</div>
</div>
<div class="class-card">
<div class="class-name">.border-3</div>
<div class="class-desc">Thick border (3px)</div>
</div>
<div class="class-card">
<div class="class-name">.border-4</div>
<div class="class-desc">Extra thick border (4px)</div>
</div>
<div class="class-card">
<div class="class-name">.border-5</div>
<div class="class-desc">Very thick border (5px)</div>
</div>
<div class="class-card">
<div class="class-name">.border-bottom</div>
<div class="class-desc">Bottom border only</div>
</div>
<div class="class-card">
<div class="class-name">.border-bottom-0</div>
<div class="class-desc">Removes bottom border</div>
</div>
<div class="class-card">
<div class="class-name">.border-danger</div>
<div class="class-desc">Red border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-dark</div>
<div class="class-desc">Dark gray border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-end</div>
<div class="class-desc">Right border (LTR) or left border (RTL)</div>
</div>
<div class="class-card">
<div class="class-name">.border-end-0</div>
<div class="class-desc">Removes end border</div>
</div>
<div class="class-card">
<div class="class-name">.border-info</div>
<div class="class-desc">Light blue border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-light</div>
<div class="class-desc">Light gray border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-primary</div>
<div class="class-desc">Primary brand border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-secondary</div>
<div class="class-desc">Secondary border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-start</div>
<div class="class-desc">Left border (LTR) or right border (RTL)</div>
</div>
<div class="class-card">
<div class="class-name">.border-start-0</div>
<div class="class-desc">Removes start border</div>
</div>
<div class="class-card">
<div class="class-name">.border-success</div>
<div class="class-desc">Green border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-top</div>
<div class="class-desc">Top border only</div>
</div>
<div class="class-card">
<div class="class-name">.border-top-0</div>
<div class="class-desc">Removes top border</div>
</div>
<div class="class-card">
<div class="class-name">.border-warning</div>
<div class="class-desc">Yellow border color</div>
</div>
<div class="class-card">
<div class="class-name">.border-white</div>
<div class="class-desc">White border color</div>
</div>
</div>
</div>

<!-- Positioning -->


<div class="category">
<h2>Positioning</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.bottom-0</div>
<div class="class-desc">Positions element at bottom of container</div>
</div>
<div class="class-card">
<div class="class-name">.bottom-100</div>
<div class="class-desc">Positions element 100% from bottom</div>
</div>
<div class="class-card">
<div class="class-name">.bottom-50</div>
<div class="class-desc">Positions element 50% from bottom</div>
</div>
<div class="class-card">
<div class="class-name">.end-0</div>
<div class="class-desc">Positions element at end (right in LTR)</div>
</div>
<div class="class-card">
<div class="class-name">.end-100</div>
<div class="class-desc">Positions element 100% from end</div>
</div>
<div class="class-card">
<div class="class-name">.end-50</div>
<div class="class-desc">Positions element 50% from end</div>
</div>
<div class="class-card">
<div class="class-name">.fixed-bottom</div>
<div class="class-desc">Fixes element to bottom of viewport</div>
</div>
<div class="class-card">
<div class="class-name">.fixed-top</div>
<div class="class-desc">Fixes element to top of viewport</div>
</div>
<div class="class-card">
<div class="class-name">.position-absolute</div>
<div class="class-desc">Sets position: absolute</div>
</div>
<div class="class-card">
<div class="class-name">.position-fixed</div>
<div class="class-desc">Sets position: fixed</div>
</div>
<div class="class-card">
<div class="class-name">.position-relative</div>
<div class="class-desc">Sets position: relative</div>
</div>
<div class="class-card">
<div class="class-name">.position-static</div>
<div class="class-desc">Sets position: static</div>
</div>
<div class="class-card">
<div class="class-name">.position-sticky</div>
<div class="class-desc">Sets position: sticky</div>
</div>
<div class="class-card">
<div class="class-name">.start-0</div>
<div class="class-desc">Positions element at start (left in LTR)</div>
</div>
<div class="class-card">
<div class="class-name">.start-100</div>
<div class="class-desc">Positions element 100% from start</div>
</div>
<div class="class-card">
<div class="class-name">.start-50</div>
<div class="class-desc">Positions element 50% from start</div>
</div>
<div class="class-card">
<div class="class-name">.sticky-top</div>
<div class="class-desc">Makes element stick to top of viewport</div>
</div>
<div class="class-card">
<div class="class-name">.sticky-sm-top</div>
<div class="class-desc">sticky-top on small screens</div>
</div>
<div class="class-card">
<div class="class-name">.sticky-md-top</div>
<div class="class-desc">sticky-top on medium screens</div>
</div>
<div class="class-card">
<div class="class-name">.sticky-lg-top</div>
<div class="class-desc">sticky-top on large screens</div>
</div>
<div class="class-card">
<div class="class-name">.sticky-xl-top</div>
<div class="class-desc">sticky-top on extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.sticky-xxl-top</div>
<div class="class-desc">sticky-top on extra extra large screens</div>
</div>
<div class="class-card">
<div class="class-name">.top-0</div>
<div class="class-desc">Positions element at top of container</div>
</div>
<div class="class-card">
<div class="class-name">.top-100</div>
<div class="class-desc">Positions element 100% from top</div>
</div>
<div class="class-card">
<div class="class-name">.top-50</div>
<div class="class-desc">Positions element 50% from top</div>
</div>
<div class="class-card">
<div class="class-name">.translate-middle</div>
<div class="class-desc">Translates element -50% on both X and Y axes</div>
</div>
<div class="class-card">
<div class="class-name">.translate-middle-x</div>
<div class="class-desc">Translates element -50% on X axis</div>
</div>
<div class="class-card">
<div class="class-name">.translate-middle-y</div>
<div class="class-desc">Translates element -50% on Y axis</div>
</div>
</div>
</div>

<!-- Grid System -->


<div class="category">
<h2>Grid System</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.col</div>
<div class="class-desc">Equal-width column</div>
</div>
<div class="class-card">
<div class="class-name">.col-1 to .col-12</div>
<div class="class-desc">Specific column widths (1-12 columns)</div>
</div>
<div class="class-card">
<div class="class-name">.col-auto</div>
<div class="class-desc">Column sized to content width</div>
</div>
<div class="class-card">
<div class="class-name">.col-lg, .col-lg-1 to .col-lg-12, .col-lg-auto</div>
<div class="class-desc">Large screen column classes</div>
</div>
<div class="class-card">
<div class="class-name">.col-md, .col-md-1 to .col-md-12, .col-md-auto</div>
<div class="class-desc">Medium screen column classes</div>
</div>
<div class="class-card">
<div class="class-name">.col-sm, .col-sm-1 to .col-sm-12, .col-sm-auto</div>
<div class="class-desc">Small screen column classes</div>
</div>
<div class="class-card">
<div class="class-name">.col-xl, .col-xl-1 to .col-xl-12, .col-xl-auto</div>
<div class="class-desc">Extra large screen column classes</div>
</div>
<div class="class-card">
<div class="class-name">.col-xxl, .col-xxl-1 to .col-xxl-12, .col-xxl-auto</div>
<div class="class-desc">Extra extra large screen column classes</div>
</div>
<div class="class-card">
<div class="class-name">.g-0 to .g-5</div>
<div class="class-desc">Gutters between columns (spacing)</div>
</div>
<div class="class-card">
<div class="class-name">.g-lg-0 to .g-lg-5</div>
<div class="class-desc">Large screen gutters</div>
</div>
<div class="class-card">
<div class="class-name">.g-md-0 to .g-md-5</div>
<div class="class-desc">Medium screen gutters</div>
</div>
<div class="class-card">
<div class="class-name">.g-sm-0 to .g-sm-5</div>
<div class="class-desc">Small screen gutters</div>
</div>
<div class="class-card">
<div class="class-name">.g-xl-0 to .g-xl-5</div>
<div class="class-desc">Extra large screen gutters</div>
</div>
<div class="class-card">
<div class="class-name">.g-xxl-0 to .g-xxl-5</div>
<div class="class-desc">Extra extra large screen gutters</div>
</div>
<div class="class-card">
<div class="class-name">.row</div>
<div class="class-desc">Horizontal group of columns</div>
</div>
<div class="class-card">
<div class="class-name">.row-cols-1 to .row-cols-6</div>
<div class="class-desc">Sets number of columns per row</div>
</div>
<div class="class-card">
<div class="class-name">.row-cols-lg-1 to .row-cols-lg-6</div>
<div class="class-desc">Large screen row columns</div>
</div>
<div class="class-card">
<div class="class-name">.row-cols-md-1 to .row-cols-md-6</div>
<div class="class-desc">Medium screen row columns</div>
</div>
<div class="class-card">
<div class="class-name">.row-cols-sm-1 to .row-cols-sm-6</div>
<div class="class-desc">Small screen row columns</div>
</div>
<div class="class-card">
<div class="class-name">.row-cols-xl-1 to .row-cols-xl-6</div>
<div class="class-desc">Extra large screen row columns</div>
</div>
<div class="class-card">
<div class="class-name">.row-cols-xxl-1 to .row-cols-xxl-6</div>
<div class="class-desc">Extra extra large screen row columns</div>
</div>
</div>
</div>

<!-- Display & Flexbox -->


<div class="category">
<h2>Display & Flexbox</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.d-block</div>
<div class="class-desc">Displays as block element</div>
</div>
<div class="class-card">
<div class="class-name">.d-flex</div>
<div class="class-desc">Displays as flex container</div>
</div>
<div class="class-card">
<div class="class-name">.d-grid</div>
<div class="class-desc">Displays as grid container</div>
</div>
<div class="class-card">
<div class="class-name">.d-inline</div>
<div class="class-desc">Displays as inline element</div>
</div>
<div class="class-card">
<div class="class-name">.d-inline-block</div>
<div class="class-desc">Displays as inline-block element</div>
</div>
<div class="class-card">
<div class="class-name">.d-inline-flex</div>
<div class="class-desc">Displays as inline flex container</div>
</div>
<div class="class-card">
<div class="class-name">.d-none</div>
<div class="class-desc">Hides element completely</div>
</div>
<div class="class-card">
<div class="class-name">.d-table</div>
<div class="class-desc">Displays as table</div>
</div>
<div class="class-card">
<div class="class-name">.d-table-cell</div>
<div class="class-desc">Displays as table cell</div>
</div>
<div class="class-card">
<div class="class-name">.d-table-row</div>
<div class="class-desc">Displays as table row</div>
</div>
<div class="class-card">
<div class="class-name">.flex-column</div>
<div class="class-desc">Flex direction column</div>
</div>
<div class="class-card">
<div class="class-name">.flex-column-reverse</div>
<div class="class-desc">Flex direction column-reverse</div>
</div>
<div class="class-card">
<div class="class-name">.flex-fill</div>
<div class="class-desc">Flex item fills available space</div>
</div>
<div class="class-card">
<div class="class-name">.flex-grow-0</div>
<div class="class-desc">Prevents flex item from growing</div>
</div>
<div class="class-card">
<div class="class-name">.flex-grow-1</div>
<div class="class-desc">Allows flex item to grow</div>
</div>
<div class="class-card">
<div class="class-name">.flex-nowrap</div>
<div class="class-desc">Prevents flex items from wrapping</div>
</div>
<div class="class-card">
<div class="class-name">.flex-row</div>
<div class="class-desc">Flex direction row</div>
</div>
<div class="class-card">
<div class="class-name">.flex-row-reverse</div>
<div class="class-desc">Flex direction row-reverse</div>
</div>
<div class="class-card">
<div class="class-name">.flex-shrink-0</div>
<div class="class-desc">Prevents flex item from shrinking</div>
</div>
<div class="class-card">
<div class="class-name">.flex-shrink-1</div>
<div class="class-desc">Allows flex item to shrink</div>
</div>
<div class="class-card">
<div class="class-name">.flex-wrap</div>
<div class="class-desc">Allows flex items to wrap</div>
</div>
<div class="class-card">
<div class="class-name">.flex-wrap-reverse</div>
<div class="class-desc">Flex items wrap in reverse</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-start</div>
<div class="class-desc">Justifies content to start</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-end</div>
<div class="class-desc">Justifies content to end</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-center</div>
<div class="class-desc">Centers content</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-between</div>
<div class="class-desc">Distributes space between items</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-around</div>
<div class="class-desc">Distributes space around items</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-evenly</div>
<div class="class-desc">Distributes space evenly</div>
</div>
</div>
</div>

<!-- Responsive Breakpoints -->


<div class="category">
<h2>Responsive Breakpoints</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.d-sm-*</div>
<div class="class-desc">Small screen display classes (≥576px)</div>
</div>
<div class="class-card">
<div class="class-name">.d-md-*</div>
<div class="class-desc">Medium screen display classes (≥768px)</div>
</div>
<div class="class-card">
<div class="class-name">.d-lg-*</div>
<div class="class-desc">Large screen display classes (≥992px)</div>
</div>
<div class="class-card">
<div class="class-name">.d-xl-*</div>
<div class="class-desc">Extra large screen display classes (≥1200px)</div>
</div>
<div class="class-card">
<div class="class-name">.d-xxl-*</div>
<div class="class-desc">Extra extra large screen display classes (≥1400px)</div>
</div>
<div class="class-card">
<div class="class-name">.flex-sm-*</div>
<div class="class-desc">Small screen flex classes</div>
</div>
<div class="class-card">
<div class="class-name">.flex-md-*</div>
<div class="class-desc">Medium screen flex classes</div>
</div>
<div class="class-card">
<div class="class-name">.flex-lg-*</div>
<div class="class-desc">Large screen flex classes</div>
</div>
<div class="class-card">
<div class="class-name">.flex-xl-*</div>
<div class="class-desc">Extra large screen flex classes</div>
</div>
<div class="class-card">
<div class="class-name">.flex-xxl-*</div>
<div class="class-desc">Extra extra large screen flex classes</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-sm-*</div>
<div class="class-desc">Small screen justify content classes</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-md-*</div>
<div class="class-desc">Medium screen justify content classes</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-lg-*</div>
<div class="class-desc">Large screen justify content classes</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-xl-*</div>
<div class="class-desc">Extra large screen justify content classes</div>
</div>
<div class="class-card">
<div class="class-name">.justify-content-xxl-*</div>
<div class="class-desc">Extra extra large screen justify content classes</div>
</div>
</div>
</div>

<!-- Print Utilities -->


<div class="category">
<h2>Print Utilities</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.d-print-block</div>
<div class="class-desc">Displays as block when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-flex</div>
<div class="class-desc">Displays as flex when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-grid</div>
<div class="class-desc">Displays as grid when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-inline</div>
<div class="class-desc">Displays as inline when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-inline-block</div>
<div class="class-desc">Displays as inline-block when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-inline-flex</div>
<div class="class-desc">Displays as inline-flex when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-none</div>
<div class="class-desc">Hides element when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-table</div>
<div class="class-desc">Displays as table when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-table-cell</div>
<div class="class-desc">Displays as table cell when printing</div>
</div>
<div class="class-card">
<div class="class-name">.d-print-table-row</div>
<div class="class-desc">Displays as table row when printing</div>
</div>
</div>
</div>

<!-- Sizing -->


<div class="category">
<h2>Sizing</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.w-25</div>
<div class="class-desc">Width: 25%</div>
</div>
<div class="class-card">
<div class="class-name">.w-50</div>
<div class="class-desc">Width: 50%</div>
</div>
<div class="class-card">
<div class="class-name">.w-75</div>
<div class="class-desc">Width: 75%</div>
</div>
<div class="class-card">
<div class="class-name">.w-100</div>
<div class="class-desc">Width: 100%</div>
</div>
<div class="class-card">
<div class="class-name">.w-auto</div>
<div class="class-desc">Width: auto</div>
</div>
<div class="class-card">
<div class="class-name">.h-25</div>
<div class="class-desc">Height: 25%</div>
</div>
<div class="class-card">
<div class="class-name">.h-50</div>
<div class="class-desc">Height: 50%</div>
</div>
<div class="class-card">
<div class="class-name">.h-75</div>
<div class="class-desc">Height: 75%</div>
</div>
<div class="class-card">
<div class="class-name">.h-100</div>
<div class="class-desc">Height: 100%</div>
</div>
<div class="class-card">
<div class="class-name">.h-auto</div>
<div class="class-desc">Height: auto</div>
</div>
<div class="class-card">
<div class="class-name">.mw-100</div>
<div class="class-desc">Max-width: 100%</div>
</div>
<div class="class-card">
<div class="class-name">.mh-100</div>
<div class="class-desc">Max-height: 100%</div>
</div>
<div class="class-card">
<div class="class-name">.min-vw-100</div>
<div class="class-desc">Min-width: 100vw</div>
</div>
<div class="class-card">
<div class="class-name">.min-vh-100</div>
<div class="class-desc">Min-height: 100vh</div>
</div>
<div class="class-card">
<div class="class-name">.vw-100</div>
<div class="class-desc">Width: 100vw</div>
</div>
<div class="class-card">
<div class="class-name">.vh-100</div>
<div class="class-desc">Height: 100vh</div>
</div>
</div>
</div>

<!-- Spacing -->


<div class="category">
<h2>Spacing</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.m-0 to .m-5</div>
<div class="class-desc">Margin utilities (0=0rem, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem)</div>
</div>
<div class="class-card">
<div class="class-name">.mt-*</div>
<div class="class-desc">Margin top utilities</div>
</div>
<div class="class-card">
<div class="class-name">.mb-*</div>
<div class="class-desc">Margin bottom utilities</div>
</div>
<div class="class-card">
<div class="class-name">.ms-*</div>
<div class="class-desc">Margin start (left in LTR) utilities</div>
</div>
<div class="class-card">
<div class="class-name">.me-*</div>
<div class="class-desc">Margin end (right in LTR) utilities</div>
</div>
<div class="class-card">
<div class="class-name">.mx-*</div>
<div class="class-desc">Horizontal margin utilities</div>
</div>
<div class="class-card">
<div class="class-name">.my-*</div>
<div class="class-desc">Vertical margin utilities</div>
</div>
<div class="class-card">
<div class="class-name">.p-0 to .p-5</div>
<div class="class-desc">Padding utilities with same scale as margins</div>
</div>
<div class="class-card">
<div class="class-name">.pt-*</div>
<div class="class-desc">Padding top utilities</div>
</div>
<div class="class-card">
<div class="class-name">.pb-*</div>
<div class="class-desc">Padding bottom utilities</div>
</div>
<div class="class-card">
<div class="class-name">.ps-*</div>
<div class="class-desc">Padding start (left in LTR) utilities</div>
</div>
<div class="class-card">
<div class="class-name">.pe-*</div>
<div class="class-desc">Padding end (right in LTR) utilities</div>
</div>
<div class="class-card">
<div class="class-name">.px-*</div>
<div class="class-desc">Horizontal padding utilities</div>
</div>
<div class="class-card">
<div class="class-name">.py-*</div>
<div class="class-desc">Vertical padding utilities</div>
</div>
<div class="class-card">
<div class="class-name">.gap-0 to .gap-5</div>
<div class="class-desc">Gap between grid/flex items</div>
</div>
<div class="class-card">
<div class="class-name">.g-*</div>
<div class="class-desc">Gutters between columns</div>
</div>
<div class="class-card">
<div class="class-name">.gx-*</div>
<div class="class-desc">Horizontal gutters</div>
</div>
<div class="class-card">
<div class="class-name">.gy-*</div>
<div class="class-desc">Vertical gutters</div>
</div>
</div>
</div>

<!-- Text -->


<div class="category">
<h2>Text</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.text-start</div>
<div class="class-desc">Left-aligned text</div>
</div>
<div class="class-card">
<div class="class-name">.text-end</div>
<div class="class-desc">Right-aligned text</div>
</div>
<div class="class-card">
<div class="class-name">.text-center</div>
<div class="class-desc">Center-aligned text</div>
</div>
<div class="class-card">
<div class="class-name">.text-nowrap</div>
<div class="class-desc">Prevents text from wrapping</div>
</div>
<div class="class-card">
<div class="class-name">.text-wrap</div>
<div class="class-desc">Allows text to wrap</div>
</div>
<div class="class-card">
<div class="class-name">.text-break</div>
<div class="class-desc">Breaks long words to prevent overflow</div>
</div>
<div class="class-card">
<div class="class-name">.text-decoration-none</div>
<div class="class-desc">Removes text decoration</div>
</div>
<div class="class-card">
<div class="class-name">.text-decoration-underline</div>
<div class="class-desc">Underlines text</div>
</div>
<div class="class-card">
<div class="class-name">.text-decoration-line-through</div>
<div class="class-desc">Strikes through text</div>
</div>
<div class="class-card">
<div class="class-name">.text-lowercase</div>
<div class="class-desc">Transforms text to lowercase</div>
</div>
<div class="class-card">
<div class="class-name">.text-uppercase</div>
<div class="class-desc">Transforms text to uppercase</div>
</div>
<div class="class-card">
<div class="class-name">.text-capitalize</div>
<div class="class-desc">Capitalizes first letter of each word</div>
</div>
<div class="class-card">
<div class="class-name">.fs-1 to .fs-6</div>
<div class="class-desc">Font size utilities (1=largest, 6=smallest)</div>
</div>
<div class="class-card">
<div class="class-name">.fw-bold</div>
<div class="class-desc">Bold font weight</div>
</div>
<div class="class-card">
<div class="class-name">.fw-bolder</div>
<div class="class-desc">Bolder font weight (relative to parent)</div>
</div>
<div class="class-card">
<div class="class-name">.fw-light</div>
<div class="class-desc">Light font weight</div>
</div>
<div class="class-card">
<div class="class-name">.fw-lighter</div>
<div class="class-desc">Lighter font weight (relative to parent)</div>
</div>
<div class="class-card">
<div class="class-name">.fw-normal</div>
<div class="class-desc">Normal font weight</div>
</div>
<div class="class-card">
<div class="class-name">.fst-italic</div>
<div class="class-desc">Italic font style</div>
</div>
<div class="class-card">
<div class="class-name">.fst-normal</div>
<div class="class-desc">Normal font style</div>
</div>
<div class="class-card">
<div class="class-name">.lh-1</div>
<div class="class-desc">Line height: 1</div>
</div>
<div class="class-card">
<div class="class-name">.lh-sm</div>
<div class="class-desc">Small line height</div>
</div>
<div class="class-card">
<div class="class-name">.lh-base</div>
<div class="class-desc">Base line height (1.5)</div>
</div>
<div class="class-card">
<div class="class-name">.lh-lg</div>
<div class="class-desc">Large line height</div>
</div>
<div class="class-card">
<div class="class-name">.text-truncate</div>
<div class="class-desc">Truncates text with ellipsis</div>
</div>
</div>
</div>

<!-- Text Colors -->


<div class="category">
<h2>Text Colors</h2>
<div class="class-list">
<div class="class-card">
<div class="class-name">.text-primary</div>
<div class="class-desc">Primary brand text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-secondary</div>
<div class="class-desc">Secondary text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-success</div>
<div class="class-desc">Green text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-danger</div>
<div class="class-desc">Red text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-warning</div>
<div class="class-desc">Yellow text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-info</div>
<div class="class-desc">Light blue text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-light</div>
<div class="class-desc">Light gray text color (on dark backgrounds)</div>
</div>
<div class="class-card">
<div class="class-name">.text-dark</div>
<div class="class-desc">Dark gray text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-body</div>
<div class="class-desc">Default body text color</div>
</div>
<div class="class-card">
<div class="class-name">.text-muted</div>
<div class="class-desc">Muted, secondary t

You might also like