how to stop length of text changing div heights at different viewport sizes

Question

For this project I am learning and practicing Bootstrap. I'm trying to set up 3 tiles to go across the screen at medium viewports and up and stack at anything smaller. I have an icon, a header and paragraph in these tiles. The paragraphs for each tile are differing lengths. When I resize the browser some containers don't touch the bottom and there is empty space at the bottom because that containers paragraph may only be 2 lines instead of 3.

How can I make it so that they all touch the bottom without setting a fixed height on the container or using any kind of ellipsis?

codepen example: http://codepen.io/MrAdam/pen/QKbJAR?editors=1100

HTML:

    <div class="tile tile1 col-md-4 text-xs-center">
        <i class="fa fa-book" aria-hidden="true"></i>
        <h2>Learn</h2>
        <p>Our smaller class sizes ensure you get quality personal time with instructors</p>
    </div>

    <div class="tile tile2 col-md-4 text-xs-center">
        <i class="fa fa-code" aria-hidden="true"></i>
        <h2>Code</h2>
      <p>Learn technologies such as HTML5, CSS3, JavaScript, Angular.js and Node.js.</p>
    </div>

    <div class="tile tile3 col-md-4 text-xs-center">
          <i class="fa fa-wrench" aria-hidden="true"></i>
          <h2>Create</h2>
          <p>Create projects that give you real world experience and you can put in your portfolio</p>
    </div>

  </div>
</div>


.tile {
  padding: 3rem;
  color: #F5EFED;
  text-align: justify;
}

CSS:

.tile i {
  font-size: 2.6rem;
  padding: 1rem;
  border-radius: 50%;
  border: 3px solid #F5EFED;
  margin: 1rem 0;
}

.tile1 {
  background: url(../img/tile1.jpg)
  center / cover 
  no-repeat;
}

.tile2 {
  background: url(../img/code.jpg)
  center / cover 
  no-repeat;
}

.tile3 {
  background: url(../img/create2.jpg)
  center bottom / cover
  no-repeat;
}

This has been [asked before](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height). Voting to close. — hungerstar, Sep 08 '16 at 16:23

score 0 · Answer 1 · answered Sep 08 '16 at 16:42

Solution #1: text-overflow: ellipsis; (additional style rules: 1)

.tile p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile {
  color: white;
  padding: 3rem;
  text-align: justify;
  height: 100%;
}

.tile i {
  font-size: 2.6rem;
  padding: 1rem;
  border-radius: 50%;
  border: 3px solid white;
  margin: 1rem 0;
}

.tile1 {
  background: #372549;
}

.tile2 {
  background: #774C60;
}

.tile3 {
  background: #B75D69;
}

<div class="program-steps container-fluid">
  <div class="program-steps-content row">

    <div class="tile tile1 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-book" aria-hidden="true"></i>
        <h2>Learn</h2>
        <p>Our smaller class sizes ensure you get quality personal time with instructors</p>
      </div>
    </div>

    <div class="tile tile2 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-code" aria-hidden="true"></i>
        <h2>Code</h2>
        <p>Learn technologies such as HTML5, CSS3, JavaScript, Angular.js and Node.js.</p>
      </div>
    </div>

    <div class="tile tile3 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-wrench" aria-hidden="true"></i>
        <h2>Create</h2>
        <p>Create projects that give you real world experience and you can put in your portfolio</p>
       </div>
    </div>
    
  </div>
</div>



<script src="https://use.fontawesome.com/c1b0f372e8.js"></script>

Solution #2: display: flex; (additional style rules: 2)

.program-steps-content.row {
    display: flex;
}

.program-steps-content.row .tile {
    flex: 1 1;
    height: auto;
}

.tile {
  color: white;
  padding: 3rem;
  text-align: justify;
  height: 100%;
}

.tile i {
  font-size: 2.6rem;
  padding: 1rem;
  border-radius: 50%;
  border: 3px solid white;
  margin: 1rem 0;
}

.tile1 {
  background: #372549;
}

.tile2 {
  background: #774C60;
}

.tile3 {
  background: #B75D69;
}

<div class="program-steps container-fluid">
  <div class="program-steps-content row">

    <div class="tile tile1 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-book" aria-hidden="true"></i>
        <h2>Learn</h2>
        <p>Our smaller class sizes ensure you get quality personal time with instructors</p>
      </div>
    </div>

    <div class="tile tile2 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-code" aria-hidden="true"></i>
        <h2>Code</h2>
        <p>Learn technologies such as HTML5, CSS3, JavaScript, Angular.js and Node.js.</p>
      </div>
    </div>

    <div class="tile tile3 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-wrench" aria-hidden="true"></i>
        <h2>Create</h2>
        <p>Create projects that give you real world experience and you can put in your portfolio</p>
       </div>
    </div>
    
  </div>
</div>



<script src="https://use.fontawesome.com/c1b0f372e8.js"></script>

Note:

For mobile resolutions you'll need to add a new flex rule to the parent element with the rule display: flex declared in order to collapse elements, e.g: flex-direction: column;
Before using flex in production check up on browser compatibility, and make sure you understand the limitations. Legacy browsers don't support it, or may only support former variations of the syntax before it was standardized, so you'll need to do some thorough cross-browser testing and a bit of research

https://css-tricks.com/using-flexbox/ "Using Flexbox: Mixing Old and New for the Best Browser Support"

how to stop length of text changing div heights at different viewport sizes

1 Answers1