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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Aug 27, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Aug 27, 2025

Answer

The Q&A Network