Horje
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

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/[email protected]/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;">GeeksforGeeks</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/[email protected]/dist/js/bootstrap.min.js">
      </script>
</body>
  
</html>

Output:

9021

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>
  
<body class="bg-primary d-flex 
             align-items-center 
             justify-content-center"
      style="background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240130153050/geeks14.png') 
             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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
</body>
  
</html>

Output:

Screenshot-2024-01-30-at-15-38-38-Full-Width-Background---Approach-1-min

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </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:

9022

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          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:

9023


 


Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
Bootstrap 5 Grid Extra Small Bootstrap 5 Grid Extra Small
Create a Countdown using Bootstrap 5 Create a Countdown using Bootstrap 5
How to create a FAQ Section in Bootstrap ? How to create a FAQ Section in Bootstrap ?
How to Add a Background Image using Bootstrap 5 ? How to Add a Background Image using Bootstrap 5 ?
Create a To Do List using Bootstrap 5 Create a To Do List using Bootstrap 5

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 16



 

Horje