How to make containers with same height in Bootstrap?

Small tutuorial on how to make containers with same height in Bootstrap?
11 October 2017   1430

For example, you have this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p><p>long</p><p>long</p><p>long</p><p>long</p>
</div>
</body>

If you will run it, you will have this result:

Result of HTML code
Result of HTML code

As you can see, the left container and right container with different height. You can make them one size by y simply declaring display: flex on a wrapping parent will work. That means that you will have to wrap your columns in a new <div>, e.g.:

<div class="row row-equal-height">

  <div class="col-xs-3" id="left">
    <p>short</p>
  </div>
  <div class="col-xs-3" id="right">
    <p>long</p>
    <p>long</p>
    <p>long</p>
    <p>long</p>
    <p>long</p>
  </div>

</div>

For CSS, you can do this:

.row-equal-height {
    display: flex;
}

Note that you will have to rely on browser support for CSS3 flexbox specification. But it is very widely supported nowadays (>97%).

Frontend News Digest 7 - 13.03

Build a desktop GIF Searcher App with NodeGui, learn why height and width on image is important, Firefox 74 released and more
13 March 2020   266

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn about the performance benefits of variable fonts, 7 types of native errors in JS, Bootstrat tree view 4 update and more awaits for you in our newest digest.

Guides

  • Build a Native Desktop GIF Searcher App Using NodeGui

This tutorial will teach you how to install NodeGui (a Qt-driven desktop app library) and use it to build a “meme searcher.”

Articles

  • The performance benefits of Variable Fonts

This post will show you the performance gains you can get when using variable fonts

  • Setting Height And Width On Images Is Important Again

Did you knew that thanks to some recent changes in browsers, it’s now worth setting width and height attributes on your images to prevent layout issues

  • What's New in Mongoose 5.9: SchemaType Default Options and Better Populate Limit

Overview of new features of the newest version of MongoDB object modeling tool 

  • Firefox 74 Released

Learn what changes (and challenges) developers will meet when working with the new version of one of the most popular web browsers

  • 7 Types of Native Errors in JavaScript You Should Know

Great article for the newbies - check the most popular errors in JS programming and how to avoid them

Updates

  • OpenSilver

Open-source reimplementation of Silverlight that runs on current browsers via WebAssembly

  • Bootstrap 4 Tree View

Plugin to build a Treeview with boostrap 4

  • ls-lint

Developers claim it's an "extremely fast" file and directory name linter

  • Node 13.11.0

The newest version of JavaScript runtime environment