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= "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: 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: 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: 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: 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: 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: 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: 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: Supported Browser: Google Chrome Internet Explorer Firefox Opera Safari Last Updated : 28 Apr, 2023 Like Article Save Article Previous Displaying inline and multiline blocks of code using Bootstrap Next Bootstrap | Float utilities with Examples Share your thoughts in the comments Add Your Comment Please Login to comment...