CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nere
Nere

Reputation: 4097

CSS DIV Inline at bottom

I have 3 divisions to put inline at the bottom. I've no idea on how to do that... anybody can help me?

The expected output: enter image description here

The codes I've 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>

Upvotes: 6

Views: 2761

Answers (5)

Max
Max

Reputation: 138

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

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

to make it look like a staircase you should 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>

Upvotes: 1

prashmi
prashmi

Reputation: 91

Here is the solution to put all div's 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 {...

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122135

You can use flexbox with media queries 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;
    }
}

Upvotes: 4

Alex
Alex

Reputation: 8695

You can use display:inline-block and don't forget remove the extra spaces which is occuered by display:inline-block 

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

Jsfiddle

Upvotes: 1

KCarnaille
KCarnaille

Reputation: 1057

Unfortunately, bootstrap use float for his grid system. So vertical-align is a bit rough to apply. You can chooose to use display: inline-block or display: table (with display: table-cell on childrens) to have your result. Then you just have to specify a vertical-align: bottom.

Upvotes: 1

Related Questions