Open In App

Bootstrap 5 Z-index

Last Updated : 07 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:

ClassDescription
z-index-n2Represents z-index: -2
z-index-n1Represents z-index: -1
z-index-0Represents z-index: 0
z-index-1Represents z-index: 1
z-index-2Represents z-index: 2
z-index-3Represents 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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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



Previous Article
Next Article

Similar Reads

How to merge the first index of an array with the first index of second array?
The task is to merge the first index of an array with the first index of another array. Suppose, an array is array1 = {a, b, c} and another array is array2 = {c, d, e} if we perform the task on these arrays then the output will be result array { [0]=&gt; array(2) { [0]=&gt; string(1) "a" [1]=&gt; string(1) "c" } [1]=&gt; array(2) { [0]=&gt; string(
2 min read
Difference between index.ejs and index.html
What is HTML? HTML (Hypertext Markup Language) is used to design the structure of a web page and its content. HTML is actually not technically programming languages like C++, JAVA, or python. It is a markup language, and it ultimately gives declarative instructions to the browser. When a web page is loaded, the browser first reads the HTML and cons
4 min read
Bootstrap 5 Approach z-index Scales
Bootstrap Z-index scales provide a new axis to arrange the content on the screen. It plays a very important role in how components interact with one another. A component with a higher z-index value is always in front of the component with a lower z-index value. Z-index in Bootstrap is of two types Component Elements and Overlay Elements. Component
2 min read
Bootstrap 5 Approach z-index Scales Component Elements
Bootstrap z-index allows providing different axis to the components on the screen. It helps in defining the order of the overlapping elements. It sets the position or order of the elements along the z-axis. An element with a greater z-index will appear before the others. Component elementsPre-built elements like button groups, input groups, and pag
2 min read
Include Bootstrap in AngularJS using ng-bootstrap
AngularJS can be integrated with Bootstrap CSS and Javascript and can be used to create creative forms, tables, navigation bars, etc. Steps: Make sure the Angular CLI present in your system if not then run the command in the terminal to do so. npm install -g @angular/cli Create a new project on visual studio code by running the code ng new project-
2 min read
Difference between bootstrap.css and bootstrap-theme.css
Bootstrap is an HTML, CSS and JS front-end-framework used for developing responsive and mobile-first projects on the web. It is the framework that comes up with predefined terms, thus giving you the ability to use these codes instead of having to create the codes from scratch. It is a collection of HTML, CSS and JS code that is designed to help bui
5 min read
Difference Between Bootstrap 3 and Bootstrap 4
Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used to design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript. It can create web applications with any server-side Technology like Java, PHP,
2 min read
Difference between Bootstrap 4 and Bootstrap 5
What is Bootstrap? It is an open-source framework from late 2011 that is used for designing responsive websites with a mobile-first approach faster and easier. Bootstrap is available for HTML, CSS, and JS. According to server-side languages like PHP, Node, etc. bootstrap helps to design the frontend. Bootstrap has made the work for developers easie
3 min read
Bootstrap Cheat Sheet - A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens. What is Bootstrap Cheat Sheet?A
27 min read
jQuery | index() with examples
The index() is an inbuilt method in jQuery which is used to return the index of the a specified elements with respect to selector. Syntax: $(selector).index(element) Parameter: It accepts an optional parameter "element" which is used to get the position of the element. Return value: It returns an integer denoting the index of the specified element.
2 min read