CSS DIV Inline Bottom

Question

I have 3 sections to put inline at the bottom . I don’t know how to do this ... can anyone help me?

Expected Result:

Codes I tried:

 .feature-description { margin-top: 20px; padding-left:10%; padding-right:10%; } .start-up-phase { background-color: #a82327; color: #fff; padding: 13px 22px 100px; text-align: justify; width:86%; margin-left:auto; margin-right:auto; min-height:350px; } .growth-phase { background-color: #196b8c; color: #fff; padding: 13px 22px 110px; text-align: justify; width:86%; margin-left:auto; margin-right:auto; min-height:450px; } .expansion-phase { background-color: #53752f; color: #fff; padding: 13px 22px 200px; text-align: justify; width:86%; margin-left:auto; margin-right:auto; } .phase-title { border-bottom: 1px solid #fff; padding-bottom:10px; } .phase-content { padding-top:5px; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <div class="container"> <div class="row feature-description"> <div class="col-lg-4"> <div class="start-up-phase"> <h4 class="phase-title"> <strong>START UP PHASE</strong> </h4> <div class="phase-content"> Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. <?php load_helper('html'); echo br(4) ?> <p> High Margin Retail Opportunities, Personal Residual Income, Introducer Bonus and Group Placement Incentive dedicated for reseller in this phase. </p> </div> </div> </div> <div class="col-lg-4"> <div class="growth-phase"> <h4 class="phase-title"> <strong>START UP PHASE</strong> </h4> <div class="phase-content"> Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. </div> </div> </div> <div class="col-lg-4"> <div class="expansion-phase"> <h4 class="phase-title"> <strong>START UP PHASE</strong> </h4> <div class="phase-content"> Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. </div> </div> </div> </div> </div> 

Answer 1

You can use flexbox with the media to do this https://jsfiddle.net/2Lzo9vfc/227/

 @media(min-width: 1200px) { .row.feature-description { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; } } 

Answer 2

Unfortunately, bootstrap uses a float for its grid. So vertical alignment is a little rough. You can use the display: inline-block or display: table (with display: table-cell on childrens) command to get the result. Then you need to specify the vertical alignment: bottom.

Answer 3

You can use display:inline-block and remember to remove the extra spaces that are covered by display:inline-block

 .col-lg-4 { display: inline-block; vertical-align: bottom; float:none; } 

Jsfiddle

Answer 4

fix it to go to the bottom, even with bootstrap.

 .feature-description { align-items: flex-end; display: flex; } 

to make it look like a ladder you have to change the padding

 .start-up-phase { padding: 13px 22px; } .growth-phase { padding: 13px; } 

 .feature-description { margin-top: 20px; padding-left: 10%; padding-right: 10%; align-items: flex-end; display: flex; } .start-up-phase { background-color: #a82327; color: #fff; padding: 13px 22px; text-align: justify; width: 86%; margin-left: auto; margin-right: auto; min-height: 350px; } .growth-phase { background-color: #196b8c; color: #fff; padding: 13px; text-align: justify; width: 86%; margin-left: auto; margin-right: auto; min-height: 450px; } .expansion-phase { background-color: #53752f; color: #fff; padding: 13px 22px 200px; text-align: justify; width: 86%; margin-left: auto; margin-right: auto; } .phase-title { border-bottom: 1px solid #fff; padding-bottom: 10px; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <div class="container"> <div class="row feature-description"> <div class="col-lg-4"> <div class="start-up-phase"> <h4 class="phase-title"><strong>START UP PHASE</strong></h4> <div class="phase-content"> Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. <?php load_helper( 'html'); echo br(4) ?> <p> High Margin Retail Opportunities, Personal Residual Income, Introducer Bonus and Group Placement Incentive dedicated for reseller in this phase. </p> </div> </div> </div> <div class="col-lg-4"> <div class="growth-phase"> <h4 class="phase-title"> <strong>START UP PHASE</strong> </h4> <div class="phase-content"> Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. </div> </div> </div> <div class="col-lg-4"> <div class="expansion-phase"> <h4 class="phase-title"> <strong>START UP PHASE</strong> </h4> <div class="phase-content"> Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. </div> </div> </div> </div> 

Answer 5

Here is the solution to put all the divs at the bottom.

 .feature-description { margin-top: 20px; padding-left:10%; padding-right:10%; position: relative; } .start-up-phase, .growth-phase, .expansion-phase{ bottom: 0; } 

Continue your CSS:

.start-up-phase {...