Bootstrap Navbar & Cards — Layout & Content Containers

Every website needs navigation to help users find their way, and content containers to display information beautifully. Bootstrap's Navbar and Card components are the perfect tools for these tasks. They're flexible, responsive, and can be customized to fit any design.

1. Bootstrap Navbar

The Navbar is a responsive navigation header that can collapse on smaller screens. It supports branding, navigation links, dropdowns, forms, and more.

Basic Navbar Structure

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
        <!-- Brand / Logo -->
        <a class="navbar-brand" href="#">Brand Name</a>

        <!-- Toggle button (hamburger menu) -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links (collapsible) -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Navbar Colors & Themes

Use .navbar-dark or .navbar-light with background color classes to style your navbar.

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

<!-- Primary navbar -->
<nav class="navbar navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">Primary Navbar</a>
    </div>
</nav>

<!-- Light navbar -->
<nav class="navbar navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Light Navbar</a>
    </div>
</nav>

Navbar with Dropdown

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
        <a class="navbar-brand" href="#">My Site</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        Products
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Electronics</a></li>
                        <li><a class="dropdown-item" href="#">Clothing</a></li>
                        <li><a class="dropdown-item" href="#">Books</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Navbar with Search Form

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
        <a class="navbar-brand" href="#">Searchable Site</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSearch">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search..." aria-label="Search">
                <button class="btn btn-outline-primary" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Navbar with Brand Image

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="logo.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
            Brand Name
        </a>
        <!-- rest of navbar -->
    </div>
</nav>

Fixed Navbar

Make the navbar stick to the top or bottom of the viewport.

<!-- Fixed to top -->
<nav class="navbar fixed-top bg-body-tertiary">...</nav>

<!-- Fixed to bottom -->
<nav class="navbar fixed-bottom bg-body-tertiary">...</nav>

<!-- Sticky top (only sticks when scrolling past) -->
<nav class="navbar sticky-top bg-body-tertiary">...</nav>

Navbar Placement & Spacing

Note: When using .fixed-top, add padding-top to your body to prevent content from hiding behind the navbar.

2. Bootstrap Cards

Cards are flexible content containers that can include headers, footers, images, lists, and more. They're perfect for displaying blog posts, products, profiles, and any other piece of content.

Basic Card Structure

<div class="card" style="width: 18rem;">
    <img src="image.jpg" class="card-img-top" alt="Card image">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text to build on the card title.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Card with Header & Footer

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-body-secondary">
        2 days ago
    </div>
</div>

Card with List Group

<div class="card" style="width: 18rem;">
    <div class="card-header">Featured</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Card with Image (Top / Bottom / Overlay)

<!-- Image on top (default) -->
<div class="card">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <p class="card-text">Some text</p>
    </div>
</div>

<!-- Image on bottom -->
<div class="card">
    <div class="card-body">
        <p class="card-text">Some text</p>
    </div>
    <img src="image.jpg" class="card-img-bottom" alt="...">
</div>

<!-- Image overlay (text on top of image) -->
<div class="card text-bg-dark">
    <img src="image.jpg" class="card-img" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Text on top of image.</p>
    </div>
</div>

Card Styles

Use contextual classes to change the card's appearance.

<!-- Primary card -->
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title">Primary card</h5>
        <p class="card-text">Some quick example text.</p>
    </div>
</div>

<!-- Success card -->
<div class="card text-bg-success mb-3">...</div>

<!-- Danger card -->
<div class="card text-bg-danger mb-3">...</div>

<!-- Warning card -->
<div class="card text-bg-warning mb-3">...</div>

<!-- Info card -->
<div class="card text-bg-info mb-3">...</div>

Card with Background & Border

<!-- Border card -->
<div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-body">
        <h5 class="card-title text-primary">Border card</h5>
        <p class="card-text">Some quick example text.</p>
    </div>
</div>

Card Groups

Group multiple cards together with equal height and width using .card-group.

<div class="card-group">
    <div class="card">
        <img src="image1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">This is a card in a group.</p>
        </div>
    </div>
    <div class="card">
        <img src="image2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">This is another card in the group.</p>
        </div>
    </div>
    <div class="card">
        <img src="image3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">This is a third card in the group.</p>
        </div>
    </div>
</div>

Card Columns (Responsive Grid)

Use the grid system to create responsive card layouts.

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <div class="col">
        <div class="card">
            <img src="image1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">This is a card.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="image2.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">This is another card.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="image3.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">This is a third card.</p>
            </div>
        </div>
    </div>
</div>

Horizontal Card

<div class="card mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <img src="image.jpg" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Horizontal Card</h5>
                <p class="card-text">This is a wider card with supporting text.</p>
            </div>
        </div>
    </div>
</div>

Card with Links & Buttons

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card with Links</h5>
        <p class="card-text">Some text.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
        <button class="btn btn-primary mt-2">Button</button>
    </div>
</div>

Putting It All Together

Here's a complete example combining a Navbar with a Card grid layout:

<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">My Blog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#blogNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="blogNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Blog content with cards -->
<div class="container mt-4">
    <h2 class="mb-4">Latest Posts</h2>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="post1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Post Title 1</h5>
                    <p class="card-text">This is a short description of the blog post.</p>
                    <a href="#" class="btn btn-primary">Read More →</a>
                </div>
                <div class="card-footer text-body-secondary">
                    2 days ago
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="post2.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Post Title 2</h5>
                    <p class="card-text">A longer description that might wrap to multiple lines.</p>
                    <a href="#" class="btn btn-primary">Read More →</a>
                </div>
                <div class="card-footer text-body-secondary">
                    5 days ago
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="post3.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Post Title 3</h5>
                    <p class="card-text">Short description.</p>
                    <a href="#" class="btn btn-primary">Read More →</a>
                </div>
                <div class="card-footer text-body-secondary">
                    1 week ago
                </div>
            </div>
        </div>
    </div>
</div>