How do I build a 404 page using Bootstrap utilities only?

Asked on Sep 08, 2025

1 Answer

Creating a 404 page using Bootstrap utilities is straightforward and efficient. You can use Bootstrap's utility classes to style your page without custom CSS.

<!-- BEGIN COPY / PASTE -->
        <div class="d-flex flex-column justify-content-center align-items-center vh-100 bg-light">
            <h1 class="display-1 fw-bold text-danger">404</h1>
            <p class="lead">Page Not Found</p>
            <a href="/" class="btn btn-primary mt-3">Go Home</a>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `d-flex`, `flex-column`, `justify-content-center`, and `align-items-center` classes to center content vertically and horizontally.
The `vh-100` class ensures the content takes up the full viewport height.
The `display-1` and `fw-bold` classes are used for large, bold text.
The `text-danger` class gives the "404" text a red color.
The `lead` class styles the paragraph text for better readability.
The `btn` and `btn-primary` classes style the button, while `mt-3` adds a top margin for spacing.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions