Open In App
Related Articles

BootStrap | Positioning an element with Examples

Improve Article
Improve
Save Article
Save
Like Article
Like

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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity
="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
            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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
              integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
              crossorigin="anonymous"></script>
      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
              integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
              crossorigin="anonymous"></script>
      <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
              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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          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=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        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

Similar Reads
Similar read thumbnail
Bootstrap | Sizing an element with Examples
Similar read thumbnail
Include Bootstrap in AngularJS using ng-bootstrap
Similar read thumbnail
Difference between bootstrap.css and bootstrap-theme.css
Similar read thumbnail
Difference Between Bootstrap 3 and Bootstrap 4
Similar read thumbnail
Difference between Bootstrap 4 and Bootstrap 5
Similar read thumbnail
Bootstrap Cheatsheet - A Basic Guide to Bootstrap
Similar read thumbnail
Responsive images in Bootstrap with Examples
Similar read thumbnail
Visibility of elements in bootstrap with Examples
Similar read thumbnail
Vertical alignment in Bootstrap with Examples
Similar read thumbnail
List group in bootstrap with examples
Related Tutorials
Similar read thumbnail
Spring MVC Tutorial
Similar read thumbnail
Spring Boot Tutorial
Similar read thumbnail
Java 8 Features - Complete Tutorial
Similar read thumbnail
Onsen UI
Similar read thumbnail
React Material UI
Previous
Displaying inline and multiline blocks of code using Bootstrap
Next

Bootstrap | Float utilities with Examples
Article Contributed By :
H
Husban
Husban
Vote for difficulty





Improved By :
Article Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox