Prev Next

BS5 Dark Mode

Bootstrap 5 provides built-in support for dark mode using the .bg-dark, .text-light, and related utility classes. Dark mode improves readability in low-light environments and is visually appealing for certain applications.

Key Topics

Basic Dark Mode

Apply dark mode to a section or container using .bg-dark and adjust text with .text-light.

<div class="bg-dark text-light p-3">
    This section uses dark mode styling.
</div>

Explanation: The .bg-dark class sets the background color to dark, and .text-light ensures the text is readable.

Dark Mode with Cards

Use dark mode for Bootstrap cards by applying the .bg-dark and .text-light classes.

<div class="card bg-dark text-light">
    <div class="card-header">
        Dark Mode Card Header
    </div>
    <div class="card-body">
        This is a card body with dark mode styling.
    </div>
</div>

Explanation: Apply dark mode to Bootstrap cards by adding .bg-dark to the card and .text-light for the text.

Dark Mode with Navbar

Apply dark mode to a navbar using .navbar-dark and .bg-dark classes.

<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Dark Navbar</a>
    </div>
</nav>

Explanation: The .navbar-dark class ensures proper text and icon visibility on a dark background.

Complete Dark Mode Example

Here is a complete example combining dark mode elements, including a section, card, and navbar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Dark Mode Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Dark Mode Navbar</a>
        </div>
    </nav>
    <div class="bg-dark text-light p-3 mt-4">
        <h2>Dark Mode Section</h2>
        This section uses dark mode styling.
    </div>
    <div class="card bg-dark text-light mt-3">
        <div class="card-header">
            Dark Mode Card Header
        </div>
        <div class="card-body">
            This is a card body with dark mode styling.
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates how to implement dark mode across multiple components, ensuring consistent styling.

Key Takeaways

  • Use .bg-dark and .text-light for dark mode sections.
  • Apply .navbar-dark and .bg-dark for dark navbars.
  • Combine dark mode classes with cards and other Bootstrap components for consistent styling.
Prev Next