How to set div with left image and button at bottom using bootstrap?

We can set div with left image and button at the bottom by two methods as follows:

  • Method 1: Using bootstrap

    Float-left

    These utility classes float-left a component to the left or disable floating, based on the current viewport size utilizing the CSS float property. !important is included to dodge (avoid) specificity issues. These utilize the same viewport breakpoints as our grid system.

    Position-relative



    It is same as CSS property position: relative.

    Position-absolute

    It is same as CSS property position: absolute.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8" />
            <meta name="viewport" 
                  content="width=device-width,
                           initial-scale=1
                           shrink-to-fit=no" />
            <!-- Bootstrap CSS -->
            <link rel="stylesheet"
                  href=
                  integrity=
    "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
                  crossorigin="anonymous" />
            <script src=
                    crossorigin="anonymous">
          </script>
      
            <title>Set div with left image
          </title>
            <style type="text/css">
                .bottom-left {
                    left: 0;
                }
            </style>
        </head>
        <body>
            <h1 style="color: #006400;">
                <br />
                GeeksforGeeks
            </h1>
            <div class="float-left">
                <img src=
                     height="150" />
            </div>
            <div class="position-relative" style="color: green;">
                <h1>Hey There..!!</h1>
                <p><b>This is an Example..</b></p>
                <p>Here I have used class float-left of
                bootstrap to set div with left image.</p>
                <br />
            </div>
            <div class="position-relative">
                <div class="position-absolute bottom-left">
                    <button type="button" 
                            class="btn btn-success">
                      Click me!
                  </button>
                </div>
            </div>
        </body>
    </html>

    chevron_right

    
    

    Output:

    Note: If your content is less then kindly place <br> tag at end of content or else button will misplace as it is position-relative to content.

    Using bootstrap 3 we can set div with left image & button at the bottom and right image & button at the bottom by a bootstrap grid system too as follows:



    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8" />
            <meta name="viewport" 
                  content="width=device-width,
                           initial-scale=1,
                           shrink-to-fit=no" />
            <!-- Bootstrap CSS -->
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" 
                  href=
                  integrity=
    "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
                  crossorigin="anonymous" />
      
            <!-- Optional theme -->
            <link rel="stylesheet" 
                  href=
                  integrity=
    "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
                  crossorigin="anonymous" />
      
            <!-- Latest compiled and minified JavaScript -->
            <script src=
                    integrity=
    "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
                    crossorigin="anonymous">
          </script>
      
            <title>Set div with left image</title>
            <style type="text/css">
                .bottom-left {
                    left: 0;
                }
                .bottom-right {
                    right: 0;
                }
            </style>
        </head>
        <body>
            <div class="container-fluid">
                <div class="col-md-6">
                    <div class="pull-right">
                        <img src=
                             height="150" />
                    </div>
                    <div style="color: green; text-align: left;">
                        <h1>Hey There..!!</h1>
                        <p><b>This is an Example..</b></p>
                        <p>Here I have used class pull-right of 
                          bootstrap to set div with right image.
                      </p>
                        <br />
                        <br />
                    </div>
                    <div class="pull-right bottom-right">
                        <button type="button" 
                                class="btn btn-success">
                          Click me!
                      </button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="pull-left">
                        <img src=
                             height="150" />
                    </div>
                    <div style="color: green; 
                                text-align: right;">
                        <h1>Hey There..!!</h1>
                        <p><b>This is an Example..</b></p>
                        <p>Here I have used class pull-left of
                          bootstrap to set div with left image.
                      </p>
                        <br />
                        <br />
                    </div>
                    <div class="pull-left bottom-left">
                        <button type="button" 
                                class="btn btn-success">
                          Click me!
                      </button>
                    </div>
                </div>
            </div>
        </body>
    </html>

    chevron_right

    
    

    Output:

    Note: Due to the bootstrap grid system output will look different when code will be run on IDE hence run this code on your source.

  • Method 2: Using Flexbox

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8" />
            <meta name="viewport" 
                  content="width=device-width, 
                           initial-scale=1
                           shrink-to-fit=no" />
            <title>Set div with left image</title>
            <style type="text/css">
                .flex_row {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    align-content: stretch;
                    align-items: flex-start;
                }
                .article {
                    box-sizing: border-box;
                    flex: 1 1 50%;
                    align-self: stretch;
                    padding: 10px;
                }
                .content {
                    box-sizing: border-box;
                    flex: 1 1 auto;
                    align-self: stretch;
                    padding: 0 10px;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                }
                .innercontent {
                    flex: 1 1 auto;
                    align-self: stretch;
                    color: green;
                }
                .buttonBar {
                    flex: 0 0 auto;
                }
                .onRight {
                    text-align: left;
                }
            </style>
        </head>
        <body>
            <h1 style="color: #006400;">
                <br />
                GeeksforGeeks
            </h1>
            <div class="flex_row">
                <div class="article onRight flex_row">
                    <div class="image">
                        <img src=
                             height="150" />
                    </div>
                    <div class="content">
                        <div class="innercontent">
                            <h1>Hey There..!!</h1>
                            <p><b>This is an Example..
                              </b></p>
                            <p>Here I have used Flexbox model 
                              to set div with left image 
                              and button at bottom.</p>
                            <br />
                        </div>
                        <div class="buttonBar">
                            <button>Click me!</button>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

    chevron_right

    
    

    Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.