Bootstrap 5 Z-index

Last Updated : 07 May, 2024

In Bootstrap 5, the z-index property controls the stacking order of elements. It defines the depth of an element along the z-axis, determining which elements appear above others. Higher values place elements closer to the foreground, while lower values move them to the background.

Bootstrap 5 z-index classes:

Class	Description
z-index-n2	Represents z-index: -2
z-index-n1	Represents z-index: -1
z-index-0	Represents z-index: 0
z-index-1	Represents z-index: 1
z-index-2	Represents z-index: 2
z-index-3	Represents z-index: 3

Syntax:

<div class="z-index-1 bg-primary position-absolute">
    ...
</div>

Example 1: Below example demonstrates the z-index-0, z-index-n2, and z-index-n1.

HTML

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />

    <title>GeeksforGeeks</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" />
    <link href=
"https://getbootstrap.com/docs/5.3/assets/css/docs.css" 
          rel="stylesheet" />

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <center>
        <div>
            <h2>Bootstrap 5 z-index</h2>
        </div>
        <div class="p-3 m-0 border-0 bd-example 
                bd-example-zindex-levels position-relative">
            <div class="z-0 position-absolute bg-dark 
                    p-5 rounded-3">
            </div>
            <div class="z-n2 position-absolute 
                 bg-primary p-5 rounded-3">
            </div>
            <div class="z-n1 position-absolute bg-success 
                p-5 rounded-3">
            </div>
        </div>
    </center>
</body>

</html>

Output:

Bootstrap-5-z-index — Bootstrap 5 Z-index Example Output

Example 2: Below example demonstrates the z-index-3, z-index-n2, and z-index-n1 classes.

HTML

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>GeeksforGeeks</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" />
    <link href=
"https://getbootstrap.com/docs/5.3/assets/css/docs.css" 
          rel="stylesheet" />

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <center>
        <div>
            <h1 class="text-success">GeeksforGeeks</h1>
            <h2>Bootstrap 5 z-index</h2>
        </div>
        <div class="p-3 m-0 border-0 bd-example 
            bd-example-zindex-levels position-relative">
            <div class="z-3 position-absolute bg-light 
                p-5 rounded-3"></div>
            <div class="z-2 position-absolute bg-info 
                p-5 rounded-3"></div>
            <div class="z-1 position-absolute bg-error 
                p-5 rounded-3">
            </div>
        </div>
    </center>
</body>

</html>

Output:

Bootstrap-5-z-index2 — Bootstrap 5 Z-index Example Output

Bootstrap Reboot

tarunsinghwap7

Improve

Article Tags :

Bootstrap 5 Z-index

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?