How do I create a landing page hero with centered content and CTA?

Asked on Aug 21, 2025

1 Answer

To create a landing page hero with centered content and a call-to-action (CTA) using Bootstrap 5, you can utilize the grid system and utility classes for alignment and spacing.

<!-- BEGIN COPY / PASTE -->
        <div class="container vh-100 d-flex align-items-center justify-content-center">
            <div class="text-center">
                <h1 class="display-4">Welcome to Our Website</h1>
                <p class="lead">We provide the best solutions for your business.</p>
                <a href="#" class="btn btn-primary btn-lg">Get Started</a>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `container` class centers the content horizontally and vertically using `d-flex`, `align-items-center`, and `justify-content-center`.
The `vh-100` class makes the container take the full viewport height.
The `text-center` class centers the text within the container.
The `display-4` and `lead` classes style the heading and paragraph for emphasis.
The `btn`, `btn-primary`, and `btn-lg` classes style the CTA button.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions