Related Articles

Related Articles

BootStrap | Positioning an element with Examples
  • Last Updated : 15 Jan, 2019

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
Recommended Articles
Page :