How to make a Full-width Background in Bootstrap 5 ?
Last Updated :
13 Feb, 2024
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.
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=
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;">GeeksforGeeks</h1>
<h3 class="mb-4">
Applying Full-Width Colour Background
</h3>
<button class="btn btn-warning">
Explore More
</button>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Full-Width Image as Background
For applying a Full-Width Image Background to the application. We have applied the “d-flex” Bootstrap class to the <body> element to apply full-width background. By using the style property, we have applied the background image by providing the absolute URL of the image. The image is been applied in full width to the entire page.
Syntax:
<body class="bg-primary d-flex align-items-center justify-content-center"
style="background: url('image') no-repeat center center fixed;
background-size: cover; height: 100vh;">
<!-- Content -->
</body>
Example: Illustration of full-width Image as background using flexbox utilities.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Full-Width Image Background</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-primary d-flex
align-items-center
justify-content-center"
style="background: url(
no-repeat center center fixed;
background-size: cover;
height: 100vh;">
<div class="container text-center text-white">
<h1 class="text-black fw-bold">GeeksforGeeks</h1>
<h3 class="text-warning fw-bold">
Applying Full-Width Image Background
</h3>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Bootstrap container-fluid Utility
For creating the full-width background using the container-fluid utility. We have used this utlitlity in the <div> element.
Syntax:
<div class="container-fluid">
Example: Illustration of full-width background using container-fluid utility.
HTML
<!DOCTYPE html>
<html>
<head>
<title>The full-width background</title>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container-fluid bg-warning text-light p-5">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3 style="color: black;">
The full-width background using Containers-fluid utility
</h3>
</div>
</body>
</html>
|
Output:
Bootstrap row Utility
For creating full-width background in Bootstrap 5 using the rows, we have applied the row and col classes to the <div> element and also aded to simple grey color as the background to proper demonstration.
Syntax:
<div class="row">
Example: Illustration of full-width background using Bootstrap row utility.
HTML
<!DOCTYPE html>
<html>
<head>
<title>The full-width Background</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="row bg-secondary text-light p-5">
<div class="col">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3 style="color: red;">
The full-width background using Bootstrap row Utility
</h3>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...