How to make containers with same height in Bootstrap?

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

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 24 - 30.08

New and experimental CSS Firefox tools, Node.js' new current version update, deep dive to its internals and many other interest things awaits you
29 August 2019   851

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

In this digest, you will learn how to release custom react component, hook or an effect as an npm Package, learn about the powers of HTML5 storage that allos you to create shopping card and about new experimental CSS tools in Firefox. Also, Node.js v12.9.1 is out.

Guides

  • Creating A Shopping Cart With HTML5 Web Storage

This guide will teach you how to use the HTML Web Storage powers to create a shopping card step-by-step

  • How to Release a Custom React Component, Hook or Effect as an npm Package

Author believes he find a way how to release hook, custom component of React of an Effect as an npm Package in a more easier way than always

Article

  • Faster Image Loading With Embedded Image Previews 

EIP technology described in this post allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests with no additional data transered.

  • Node v12.9.1 (Current)

Small release fixes 2 regressions in the http module

Video

  • New & Experimental CSS Tools in Firefox
     

UX designer at Mozilla Firefox Developer Tools team talks about cool new and even experimental CSS Tools in popular browser

  • A Journey into Node.js Internals

Tamar Twena-Stern spoke about the internals of the one of the most popular JavaScript's runtime environments

Updates

  • monolith

Solution allows to sale any web page into as a single HTML file with enbedded CSS, image, and JavaScript assets all at  a single HTML5 doc

  • radialMenu

Easy to set up (according to the developers) and customizable JS menu

  • Data Table Component

Includes a lot of features, and, according to the developers, is simple, sortable and flexible

  • React Webcam

A component to work with webcams for React