Open In App

BootStrap | Positioning an element with Examples

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The Bootstrap framework provides us with a series of classes that allows us to change the position of an element. It provides us with five classes that are common in function with the CSS position property. In addition, it provides three additional classes for controlling the position of an element.

Common Classes:

  • position-static: It works the same as the position: static; the property of the CSS.

Example: 

html




<!DOCTYPE html>
<html>
<head>
    <!-- Custom CSS -->
    <style>
        h1.text-center {
            color: green;
        }
 
        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
 
        p {
            top: 10px;
            left: 10px;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    </style>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
 
    <title>Bootstrap Text Utilities</title>
</head>
 
<body>
    <!-- Bootstrap class for making the entire div responsive -->
    <div class="container">
        <h1 class="text-center">
            GeeksForGeeks
        </h1>
        <div class="parent">
            <p class="position-static">
                position-static
            </p>
 
        </div>
    </div>
 
    <!-- Link JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src=
        integrity
="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>


Output: 
 

bootstrap-position-static

  • position-relative: It works the same as the position: relative; the property of the CSS.

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Custom CSS -->
    <style>
        h1.text-center {
            color: green;
        }
 
        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
 
        p {
            top: 10px;
            left: 10px;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    </style>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
 
    <title>Bootstrap Text Utilities</title>
</head>
 
<body>
 
    <!-- Bootstrap class for making the entire
            div responsive -->
    <div class="container">
        <h1 class="text-center">
            GeeksForGeeks
        </h1>
        <div class="parent">
            <p class="position-relative">
                position-relative
            </p>
 
        </div>
    </div>
 
    <!-- Link JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>


Output: 
 bootstrap-position-relative

  • position-absolute: It works the same as the position: absolute; the property of the CSS.

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Custom CSS -->
    <style>
        h1.text-center {
            color: green;
        }
 
        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
 
        p {
            top: 10px;
            right: 10px;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    </style>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
 
    <title>Bootstrap Text Utilities</title>
</head>
 
<body>
    <!-- Bootstrap class for making the
            entire div responsive -->
    <div class="container">
        <h1 class="text-center">GeeksForGeeks</h1>
        <div class="parent position-relative">
            <p class="position-absolute">
                position-absolute
            </p>
 
        </div>
    </div>
 
    <!-- Link JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>


Output: 

bootstrap-position-absolute

  • position-fixed: It works the same as the position: fixed; the property of the CSS.

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Custom CSS -->
    <style>
        h1.text-center {
            color: green;
        }
 
        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
 
        p {
            top: 10px;
            right: 10px;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    </style>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
 
    <title>Bootstrap Text Utilities</title>
</head>
 
<body>
    <!-- Bootstrap class for making the
            entire div responsive -->
    <div class="container">
        <h1 class="text-center">GeeksForGeeks</h1>
        <div class="parent">
            <p class="position-fixed">position-fixed</p>
 
        </div>
    </div>
 
    <!-- Link JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>


Output: 

bootstrap-position-fixed

  • position-sticky: It works the same as the position: sticky; the property of the CSS.

Example:  

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Custom CSS -->
    <style>
        h1.text-center {
            color: green;
        }
 
        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
 
        p {
            top: 10px;
            right: 10px;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    </style>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
 
    <title>Bootstrap Text Utilities</title>
</head>
 
<body>
    <!-- Bootstrap class for making the
            entire div responsive -->
    <div class="container">
        <h1 class="text-center">GeeksForGeeks</h1>
        <div class="parent">
            <p class="position-sticky">
                position-sticky
            </p>
 
        </div>
    </div>
 
    <!-- Link JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>


Output:  

bootstrap-position-sticky

Fixed Top 

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

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <!-- Custom CSS -->
    <style>
        h1.text-center {
            color: green;
            margin-top: 30px;
        }
 
        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
 
        p {
            text-align: center;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    </style>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
 
    <title>Bootstrap Text Utilities</title>
</head>
 
<body>
    <!-- Bootstrap class for making the
            entire div responsive -->
    <div class="container">
        <h1 class="text-center">GeeksForGeeks</h1>
        <div class="parent">
            <p class="fixed-top">fixed-top</p>
 
        </div>
    </div>
 
    <!-- Link JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>


Output: 

bootstrap-fixed-top

 

Fixed Bottom 

  • fixed-bottom: It makes the element fixed at the bottom of the viewport, from edge to edge.

Example:

html




<!DOCTYPE html>
<html>
   <head>
      <!-- Custom CSS -->
      <style>
         h1.text-center{
         color: green;
         margin-top: 30px;
         }
          
         div.parent{
         height: 100px;
         width: 400px;
         border: 1px solid black;
         margin: 0 auto;
         }
          
         p{
         text-align: center;
         padding: 2px;
         border: 1px solid blue;
         display: inline-block;
         background: #E3F2FD;
          
         /* Overriding default margin-bottom
            property of bootstrap, to make it
            stick perfectly to the bottom */
         margin-bottom: 1px !important;
         }
      </style>
       
      <!-- Bootstrap CSS -->
      <link rel="stylesheet"
            href=
            integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
            crossorigin="anonymous">
       
      <title>Bootstrap Text Utilities</title>
   </head>
    
   <body>
      <!-- Bootstrap class for making the
           entire div responsive -->
      <div class="container">
         <h1 class="text-center">GeeksForGeeks</h1>
         <div class="parent">
            <p class="fixed-bottom">fixed-bottom</p>
 
         </div>
      </div>
       
      <!-- Link JavaScript -->
      <!-- jQuery, Popper.js, Bootstrap JS -->
      <script src=
              integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
              crossorigin="anonymous"></script>
      <script src=
              integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
              crossorigin="anonymous"></script>
      <script src=
              integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
              crossorigin="anonymous"></script>
   </body>
</html>


Output: 

bootstrap-fixed-bottom

Sticky Top 

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

Example:  

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1.text-center {
            color: green;
            margin-top: 30px;
        }
 
        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
 
        p {
            top: 10px;
            left: 10px;
            text-align: center;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    </style>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href=
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
          crossorigin="anonymous">
 
    <title>Bootstrap Text Utilities</title>
</head>
 
<body>
    <!-- Bootstrap class for making the
           entire div responsive -->
    <div class="container">
        <h1 class="text-center">GeeksForGeeks</h1>
        <div class="parent">
            <p class="sticky-top">sticky-top</p>
 
        </div>
    </div>
 
    <!-- Link JavaScript -->
    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>


Output: 

bootstrap-sticky-top

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 28 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads