How to use z-index in bootstrap 5?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use z-index in bootstrap with code example.

Several Boosted components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Boosted that’s been designed to properly layer navigation, tooltips and popovers, modals, and more

Table of contents

  • Framework and cdn link setup
  • Define its class name
  • Included JS bootstrap

This article will guide you to adding z-index in Bootstrap with example.

Step 1: Framework and cdn link setup

First of all, load the Bootstrap 5 framework CSS into the head tag of your webpage.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Step 2: Define its class name

After that, create the justify-content with a class name .justify-content.

<div class="z">
    <div class="red" style="height:100px; width:100px; background-color:grey; position:absolute; z-index:-1;">
        image
    </div>

    <div class="fea" style="height:100px; width:100px; margin-top:20px; margin-left:20px; background-color:black; position:absolute;">
        features
    </div>
    <div class="fea" style="height:100px; width:100px; margin-top:40px; margin-left:40px; background-color:orange; position:absolute; z-index-1;">
        rest
    </div>
</div>

Step 3: Included JS bootstrap

Now, load the Bootstrap JavaScript file before closing the body tag and done.

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Example.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        .carousel-item {
            height: 500px;
        }
    </style>
</head>

<body>
    <div class="z">
        <div class="red" style="height:100px; width:100px; background-color:grey; position:absolute; z-index:-1;">
            image
        </div>

        <div class="fea" style="height:100px; width:100px; margin-top:20px; margin-left:20px; background-color:black; position:absolute;">
            features
        </div>
        <div class="fea" style="height:100px; width:100px; margin-top:40px; margin-left:40px; background-color:orange; position:absolute; z-index-1;">
            rest
        </div>
    </div>


    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


</body>

</html>

Check the output of the above code example.

Bootstrap, z-index

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts