How to use Card Utility Class In Bootstrap

Using bg Utility Class

In this approach, we are using the Bootstrap 5 Card component with custom styling like border-5 and border-danger. The background image is been embedded in the Card component using its styling properties. This created a Card-live layout with the background image in the application.

Syntax:

<div class="card border-5 border-danger" 
         style="background-image: url('img');">
</div>

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

HTML

<!DOCTYPE html>
 
<head>
    <!-- Bootatrap CSS CDN -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" >
    <title>Example 2</title>
</head>
 
<body>
    <div class="container">
        <div class="card border-5 border-danger"
            style=
"background-image: url('https://media.w3wiki.org/wp-content/uploads/20230816191453/gfglogo.png');
            background-size: cover; 
            background-position: center; 
            height: 100vh;">
            <div class="card-body">
                <h1 class="card-title text-center" style="color: green;">
                    w3wiki
                </h1>
                <h1 class="card-title text-center">
                    Using Card Utility Class
                </h1>
            </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