Home > Courses > Bootstrap > Core Content & Media Elements

Core Content & Media Elements

Subject: Bootstrap
Bootstrap 5 provides clean, built-in classes to style common web elements like images, tables, and figures so they look great and remain responsive across all devices without needing complex custom CSS.

Key Concepts to Remember


1. Responsive Images (img-fluid): adding the img-fluid class to an <img > tag scales the image nicely to fit the parent element (setting max-width: 100% and height: auto), preventing images from overflowing smaller screens.
2. Image Shapes: quickly adjust image styling using utility classes like rounded (rounded corners), rounded-circle (makes an image perfectly circular), or img-thumbnail (adds a neat border padding effect).
3. Responsive Tables (table): use the base table class on <table> tags, and enhance them with variants like table-striped (zebra-striped rows), table-hover (highlights rows on mouse hover), or table-bordered for clean grid lines.
4. Figures: use <figure> with figure-img and figure-caption to display images alongside captions neatly.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Core Content & Media Example</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>

    <div class="container mt-5">
        <h1>Core Content & Media Elements</h1>
        <p class="text-muted">Examples of responsive tables and styled images.</p>

        <!-- Responsive Table Example -->
        <table class="table table-striped table-hover table-bordered mb-5">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Role</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Benjamin</td>
                    <td>Developer</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Sarah</td>
                    <td>Designer</td>
                </tr>
            </tbody>
        </table>

        <!-- Responsive Image Example -->
        <div class="row">
            <div class="col-md-4">
                <p class="fw-bold">Rounded Image (.rounded)</p>
                <img src="https://benonuorah.com/img/ben_phd.jpg" class="img-fluid rounded shadow-sm" alt="Responsive Example">
            </div>
            <div class="col-md-4">
                <p class="fw-bold">Circle Image (.rounded-circle)</p>
                <img src="https://benonuorah.com/img/ben_phd.jpg" class="img-fluid rounded-circle shadow-sm" alt="Circular Example">
            </div>
        </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