How to use bg Utility Class In Bootstrap

Q: How to use bg Utility Class In Bootstrap

In this approach, a Bootstrap 5 utility class named bg class is used to set a background image, and additional inline styles control its size and position.

Using Card Utility Class

In this approach, a Bootstrap 5 utility class named bg class is used to set a background image, and additional inline styles control its size and position.

Syntax:

<div class="bg" style="background-image: url('img);"></div>

Example: The below example describes adding a background image using the bg Utility Class in Bootstrap 5.

HTML

<!DOCTYPE html>
 
<head>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
 
<body class="bg-primary">
    <div class="container-fluid h-100">
        <div class="row h-100">
            <div class="col-12">
                <div class="bg"
                    style="background-image: 
url('https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png'); 
                        background-size: cover; 
                        background-position: center; 
                        height: 100vh;">
                    <div class="d-flex flex-column justify-content-center 
                                align-items-center h-100 text-center text-white">
                        <h1 class="display-2"
                            style="font-weight: bold; color:black;">
                            w3wiki
                        </h1>
                        <h2 class="display-6"
                            style="font-weight: bold; color:red;">
                            <b>Using bg Utility Class</b>
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap JavaScript CDN -->
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
 
</html>

Output:

How to Add a Background Image using Bootstrap 5 ?

Bootstrap 5 is one of the alternatives for CSS styling of the elements. Rather than defining the separate properties for the elements, we can directly apply the Bootstrap 5 classes for more attractive styling of the elements. We can add a background image to the application in Bootstrap 5 using various approaches as listed below:

Table of Content