Hackforge Academy

Explanation

Bootstrap Typography provides ready-to-use classes for headings, paragraphs, text alignment, font weight, text transformation, and display headings. These utility classes help create consistent and responsive text styles without writing custom CSS.

Code:

<h1 class="display-1">Display Heading</h1>
<h2 class="h3">Bootstrap Heading</h2>
<p class="lead">This is a lead paragraph.</p>
<p class="small">This is small text.</p>

Explanation

Bootstrap includes a wide range of contextual color classes for text and backgrounds. These predefined classes help maintain a consistent color palette across the application.

Code:

<p class="text-primary">Primary Text</p>
<p class="text-success">Success Text</p>
<p class="text-danger">Danger Text</p>
<div class="bg-warning p-3">Warning Background</div>
<div class="bg-dark text-white p-3">Dark Background</div>

Explanation

Bootstrap utility classes simplify common styling tasks such as spacing, sizing, borders, shadows, rounded corners, and display properties. These utilities reduce the need for custom CSS.

Code:

<div class="p-4 m-3 border rounded shadow">
    Bootstrap Utility Classes Example
</div>

Explanation

Spacing utilities use a simple naming convention: • m = margin • p = padding • t, b, s, e = top, bottom, start, end • x, y = horizontal and vertical • Values range from 0 to 5. These classes make layout adjustments quick and consistent.

Code:

<div class="mt-5 mb-3 px-4 py-2 bg-light border">
    Margin and Padding Example
</div>

Explanation

Bootstrap also provides utilities for text alignment, font weight, display, flexbox, visibility, and sizing. These classes allow developers to build responsive layouts without writing additional CSS.

Code:

<div class="d-flex justify-explanation-between align-items-center bg-light p-3">
    <span class="fw-bold text-primary">Left</span>
    <span class="text-end text-success">Right</span>
</div>