Home > Courses > Bootstrap > Spacing, Colors & Typography

Spacing, Colors & Typography

Subject: Bootstrap
Bootstrap 5 provides quick utility classes to control spacing (margins and padding), contextual color styling, and typography appearance without writing raw CSS from scratch.

Key Concepts to Remember


1. Spacing Utilities (m-* and p-*):
(a) m stands for margin (space outside an element) and p stands for padding (space inside an element).
(b) Directional letters follow: t (top), b (bottom), s (start/left), e (end/right), x (left and right), y (top and bottom).
(c) Sizes range from 0 to 5 (e.g., mt-3, p-5).

2. Color Utilities (text-* and bg-*):
(a) Bootstrap uses semantic color names to convey meaning: primary (blue), secondary (gray), success (green), danger (red), warning (yellow), info (teal), light, and dark.
(b) text-*: Changes the text color (e.g., text-primary, text-danger).
(c) bg-*: Changes the background color of an element (e.g., bg-dark, bg-light).

3. Typography:
(a) Headings (h1 through h6) scale naturally, or you can use matching classes (.h1 to .h6).
(b) display-* classes (display-1 through display-6) create larger, bolder headings for hero sections.
(b) .lead: Makes a paragraph stand out with a larger font size.
(e) Text alignment utilities include text-start, text-center, and text-end.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Spacing, Colors & Typography</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Container with top margin (mt-5) and padding (p-4) -->
    <div class="container mt-5 p-4 bg-light rounded shadow-sm">
        
        <!-- Typography: Display heading and lead paragraph -->
        <h1 class="display-6 text-primary fw-bold">Welcome to Bootstrap 5</h1>
        <p class="lead text-secondary">
            This paragraph uses the lead class to stand out, styled cleanly with Bootstrap utility classes.
        </p>

        <hr>

        <!-- Colors and Spacing in action -->
        <div class="p-3 mb-2 bg-success text-white rounded">This is a success background box with white text.</div>
        <div class="p-3 bg-danger text-white rounded">This is a danger background box with white text.</div>

    </div>

    <!-- Bootstrap 5 JavaScript Bundle CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>










By: Benjamin Onuorah

Comments

No Comment yet!

Login to comment or ask question on this topic

Previous Topic Next Topic