BootStrap | Positioning an element with Examples - GeeksforGeeks

15 Jul, 2021
The bootstrap framework provides us a series of classes which allows us to change the position of an element. It provides us five classes which 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 same as the position: static; 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 enire 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:  
 
position-relative: It works same as the position: relative; 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 enire            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:  
 
position-absolute: It works same as the position: absolute; 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            enire 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:  
 
position-fixed: It works same as the position: fixed; 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            enire 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:  
 
position-sticky: It works same as the position: sticky; 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            enire 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:  
 
Fixed Top  
fixed-top: It makes the element to fix at 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            enire 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:  
 
Fixed Bottom  
fixed-bottom: It makes the element to fix at 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           enire 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: 
 
Sticky Top  
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. 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           enire 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:  
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari 
 
ysachin2314
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?