Full-width background with Flexbox Utilities
We can achieve a full-width background by using Bootstrap 5 classes. Here, we have used the bg-info class which applied the blue-colored background to the entire page.
Syntax:
<body class="p-3 mb-2 bg-info d-flex align-items-center justify-content-center" style="height: 100vh;">
Example: Illustration of full-width background in Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title>Applying Full-Width Colour Background</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-3 mb-2 bg-info d-flex align-items-center justify-content-center" style="height: 100vh;"> <div class="text-center text-dark"> <h1 style="color: green;">w3wiki</h1> <h3 class="mb-4"> Applying Full-Width Colour Background </h3> <button class="btn btn-warning"> Explore More </button> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> </script> </body> </html> |
Output:
How to make a Full-width Background in Bootstrap 5 ?
Bootstrap 5 has various utility classes through which we can define the full-width background of the application to make the application more interactive. We can set the background to its full width by positioning and sizing the attributes. We will explore two different scenarios where we can make full-width colored and image backgrounds in Bootstrap 5.
Table of Content
- Full-width background with Flexbox Utilities
- Full-Width Image as Background
- Bootstrap container-fluid Utility
- Bootstrap row Utility