BootStrap | Positioning an element with Examples

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    bootstrap-position-static

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    bootstrap-position-relative

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

       
    <!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>

    chevron_right

    
    

    Output:
    bootstrap-position-absolute

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    bootstrap-position-fixed

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    bootstrap-position-sticky

Fixed Top

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    bootstrap-fixed-top

Fixed Bottom

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

    bootstrap-fixed-bottom

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    bootstrap-sticky-top



My Personal Notes arrow_drop_up

Student, BCA

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.