Open In App

Explain Bootstrap 4 Positions

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compatibility issue.

Positions: The bootstrap framework provides a series of classes that allows us to change the position of an element ie., it specifies the position type method used for the elements. It provides five classes that are common in function with the CSS position property.

Common Values:

  • position-static: It works the same as the position: static; property in the CSS.
  • position-relative: It works the same as the position: relative; property in the CSS.
  • position-absolute: It works the same as the position: absolute; property in the CSS.
  • position-fixed: It works the same as the position: fixed; property in the CSS.
  • position-sticky: It works the same as the position: sticky; property in the CSS.

We will understand all the common values for the position in detail using the examples.

  • position-static: The elements will be rendered in the order as they appear in the normal flow of the document. There will be no effects for the top, right, bottom, left, and z-index properties.

 

Syntax:

<section class="position-static"></section>

Example: This example describes the position-static in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
    <title>Positions</title>
    <style>
    h1 {
        color: rgb(8, 139, 8);
    }
      
    div.position {
        height: 100px;
        width: 400px;
        border: 1px solid rgb(78, 76, 76);
        margin: 0 auto;
    }
      
    span {
        top: 10px;
        left: 10px;
        padding: 2px;
        border: 1px solid rgb(203, 5, 243);
        display: inline-block;
        background: #92d2ff;
    }
    </style>
</head>
  
<body>
    <section class="container">
        <h1 class="text-center">GeeksforGeeks</h1>
        <h3 class="text-center">position-static</h3>
        <div class="position"
            <span class="position-static">
                A Computer Science Portal
            </span>
        </div>
    </section>
</body>
</html>


Output:

Position: Static

  • Relative: The position of an element will be in the normal flow of the document, and then offset will be relative to itself depending on the values of top, right, bottom, and left. It works the same as the CSS property “position: relative;”.

Syntax:

<section class="position-relative"></section>

Example: This example describes the position-relative in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
    <title>Positions</title>
    <style>
    h1 {
        color: rgb(8, 139, 8);
    }
      
    div.position {
        height: 100px;
        width: 400px;
        border: 1px solid rgb(78, 76, 76);
        margin: 0 auto;
    }
      
    span {
        top: 10px;
        left: 10px;
        padding: 2px;
        border: 1px solid rgb(203, 5, 243);
        display: inline-block;
        background: #92d2ff;
    }
    </style>
</head>
  
<body>
    <div class="container">
        <h1 class="text-center">GeeksforGeeks</h1>
        <h3 class="text-center">Position-relative</h3>
        <div class="position"
            <span class="position-relative">
                A Computer Science Portal
            </span
        </div>
    </div>
</body>
</html>


Output:

Position: Relative

  • Absolute: The position of an element will be relative to its first positioned (not static) ancestor element. It works the same as the CSS property “position absolute;“.

Syntax:

<section class="position-absolute"></section>

Example: This example describes the position-absolute in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
    <title>Positions</title>
    <style>
    h1 {
        color: rgb(8, 139, 8);
    }
      
    div.geeks {
        height: 100px;
        width: 400px;
        border: 1px solid rgb(78, 78, 76);
        margin: 0 auto;
    }
      
    span {
        top: 10px;
        right: 10px;
        padding: 2px;
        border: 1px solid rgb(203, 5, 243);
        display: inline-block;
        background: #92d2ff;
    }
    </style>
</head>
  
<body>
    <section class="container">
        <h1 class="text-center">GeeksforGeeks</h1>
        <h3 class="text-center">Position-absolute</h3>
        <div class="geeks position-relative"
            <span class="position-absolute">
                A Computer Science Portal
            </span
        </div>
    </section>
</body>
</html>


Output:

Position: Absolute

  • Fixed: The position of an element will be relative to the browser’s window. It works the same as the CSS property” position fixed”.

Syntax:

<section class="position-fixed"></section>

Example: This example describes the position-fixed in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
    <title>Positions</title>
    <style>
    h1 {
        color: rgb(8, 139, 8);
    }
      
    div.geeks {
        height: 100px;
        width: 400px;
        border: 1px solid rgb(78, 78, 76);
        margin: 0 auto;
    }
      
    span {
        top: 10px;
        right: 10px;
        padding: 2px;
        border: 1px solid rgb(203, 5, 243);
        display: inline-block;
        background: #92d2ff;
    }
    </style>
</head>
  
<body>
    <section class="container">
        <h1 class="text-center">GeeksforGeeks</h1>
        <h3 class="text-center">Position-absolute</h3>
        <div class="geeks position-relative"
            <span class="position-absolute">
                A Computer Science Portal
            </span
        </div>
    </section>
</body>
</html>


Output:

Position: Fixed

  • Fixed Top: It makes the element to fix at top of the viewport, from edge to edge.

Syntax:

<section class="fixed-top"></section>

Example: This example describes the fixed-top in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
    <script src=
            integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
            crossorigin="anonymous">
    </script>
    <title>Fixed Top</title>
    <style>
    p {
        font-size: 1.8em;
    }
      
    .lead {
        font-size: 1.8em;
    }
      
    .fixed-top {
        padding: 20px 700px;
        font-size: 2em;
    }
    </style>
</head>
  
<body>
    <section>
        <div class="fixed-top bg-success text-white">
            <nav>GeeksforGeeks</nav>
        </div>
        <div class="body"
            <img src=
                 alt="image">
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">A Computer Science Portal for Geeks</p>
  
                <hr class="my-4">
                  
<p>A Computer Science portal for geeks. 
                  It contains well written, well thought 
                  and well explained computer science 
                  and programming articles</p>
   
              <a class="btn btn-primary btn-lg" 
                 href="#" 
                 role="button">Learn more</a
           </div>
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">
                    A Computer Science Portal for Geeks
                </p>
  
                <hr class="my-4">
                  
<p>A Computer Science portal for geeks. 
                  It contains well written, well thought 
                  and well-explained computer science 
                  and programming articles</p>
   
              <a class="btn btn-primary btn-lg" 
                 href="#" 
                 role="button">Learn more</a
           </div>
    </section>
</body>
</html>


Output:

Fixed Top 

  • Fixed Bottom: It makes the element to fix at bottom of the viewport, from edge to edge.

Syntax:

<section class="fixed-bottom"></section>

Example: This example describes the fixed-bottom in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
    <script src=
            integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
            crossorigin="anonymous">
    </script>
    <title>Fixed Bottom</title>
    <style>
    p {
        font-size: 1.8em;
    }
      
    .lead {
        font-size: 1.8em;
    }
      
    .fixed-bottom {
        padding: 20px 700px;
        font-size: 2em;
    }
    </style>
</head>
  
<body>
    <section>
        <div class="body">
            <div class="fixed-bottom bg-success text-white">
                <nav>GeeksforGeeks</nav>
            </div>
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">GeekForGeeks</p>
  
                <hr class="my-4">
                  
<p>A Computer Science portal for geeks. 
                It contains well written, well thought 
                and well explained computer science 
                and programming articles</p>
  
                    <a class="btn btn-primary btn-lg" 
                       href="#" 
                       role="button">Learn more</a> </div>
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">GeekForGeeks</p>
  
                <hr class="my-4">
                  
<p>A Computer Science portal for geeks. 
                It contains well written, well thought 
                and well explained computer science 
                and programming articles</p>
   
                    <a class="btn btn-primary btn-lg" 
                       href="#" 
                       role="button">Learn more</a> </div
                     <img src=
                          alt="image"
            </div>
    </section>
</body>
</html>


Output:

Fixed Bottom

Note: Fixed position won’t occupy any space within the body, therefore the next element(eg: an image) are going to be behind the fixed element.

  • Sticky: The element is treated as a relative value until the scroll position of the viewport reaches a specified threshold, at which point the element takes a fixed position where it’s told to stick. It works same as the CSS property” position sticky”.

Syntax:

<section class="position-sticky"></section>

Example: This example describes the position-sticky in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
    <title>Positions</title>
    <style>
    h1 {
        color: rgb(8, 139, 8);
    }
      
    div.geeks {
        height: 100px;
        width: 400px;
        border: 1px solid rgb(78, 78, 76);
        margin: 0 auto;
    }
      
    span {
        top: 10px;
        right: 10px;
        padding: 2px;
        border: 1px solid rgb(203, 5, 243);
        display: inline-block;
        background: #92d2ff;
    }
    </style>
</head>
  
<body>
    <section class="container">
        <h1 class="text-center">GeeksforGeeks</h1>
        <h3 class="text-center">Position-sticky</h3>
        <div class="geeks"
            <span class="position-sticky">
                A Computer Science Portal
            </span
        </div>
    </section>
</body>
</html>


Output

Position: Sticky

  • Sticky Top:  It makes the element to fix at top of the viewport, from edge to edge, after scrolling past the element. Otherwise, it is positioned as static. 

Syntax:

<section class="sticky-top"></section>

Example: This example describes the sticky-top in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous" />
    <script src=
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
      
    <style>
        p {
            font-size: 1.8em;
        }
  
        .lead {
            font-size: 1.8em;
        }
  
        .sticky-top {
            padding: 20px 700px;
            font-size: 2em;
        }
    </style>
</head>
  
<body>
    <section>
        <div class="sticky-top bg-success text-white">
            <nav>GeeksForGeeks</nav>
        </div>
        <div class="logo">
            <img src=
                alt="image" />
        </div>
        <div class="body">
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">GeekForGeeks</p>
  
                <hr class="my-4" />
  
                <p>
                    A Computer Science portal for geeks. 
                    It contains well written, well thought 
                    and well explained computer science 
                    and programming articles
                </p>
  
                <a class="btn btn-primary btn-lg" 
                    href="#" role="button">
                    Learn more
                </a>
            </div>
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">GeekForGeeks</p>
  
                <hr class="my-4" />
  
                <p>
                    A Computer Science portal for geeks. 
                    It contains well written, well thought 
                    and well explained computer science 
                    and programming articles
                </p>
  
                <a class="btn btn-primary btn-lg" 
                    href="#" role="button">Learn more</a>
            </div>
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">GeekForGeeks</p>
  
                <hr class="my-4" />
  
                <p>
                    A Computer Science portal for geeks. 
                    It contains well written, well
                    thought and well explained computer 
                    science and programming articles
                </p>
  
                <a class="btn btn-primary btn-lg"
                    href="#" role="button">Learn more</a>
            </div>
            <div class="jumbotron">
                <h1 class="display-4">Hello, Geeks!</h1>
                <p class="lead">GeekForGeeks</p>
  
                <hr class="my-4" />
  
                <p>
                    A Computer Science portal for geeks. 
                    It contains well written, well
                    thought and well explained computer 
                    science and programming articles
                </p>
  
                <a class="btn btn-primary btn-lg" 
                    href="#" role="button">Learn more</a>
            </div>
        </div>
    </section>
</body>
  
</html>


Output

Note: Sticky position occupies the space, therefore the next element (eg: an image),won’t be hidden behind it.

Supported Browsers:

  • Chrome 1.0
  • Firefox 1.0
  • Microsoft Edge 12.0
  • Safari 1.0
  • Opera 4.0
  • Internet Explorer 4.0

Note: IE11 and IE10 will render the position: sticky as position: relative

Reference: https://www.geeksforgeeks.org/bootstrap-positioning-an-element-with-examples/



Last Updated : 25 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads