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

05 May, 2022
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:
HTML
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous"/>    <script src="https://kit.fontawesome.com/577845f6a5.js"        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="https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"        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>
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:
HTML
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"        crossorigin="anonymous"/>    <!-- Optional theme -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"        crossorigin="anonymous" />    <!-- Latest compiled and minified JavaScript -->    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"        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="https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"                    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="https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"                    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>
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:
HTML
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"                    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>
Output:
sahilintern
Bootstrap-Misc
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 ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?