How to make containers with same height in Bootstrap?

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

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%).

What is HEML?

Small introduction to a new open source markup language for building responsive email
30 October

What is HEML?

HEML is an open source markup language for building responsive email. It gives you the native power of HTML without having to deal with all of the email quirks. HEML makes building emails as easy as building websites.

HEML is built on 3 core principles. Each decision about the architecture and element design is made with these in mind.

  • Native Feel
    If you know HTML and CSS, you will get started with this programming language fast
     
  • Forward Thinking
    HEML is designed to take advantage of all that email can do while still providing a solid experience for all clients
     
  • Extendable
    You can create your own powerful elements and style rules. Share them with the world, or keep 'em to yourself

Code example 

<heml>
  <head>
    <subject>Email Rox!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Hello world </h1></marquee>
    </container>
  </body>
</heml>

Links

If you are interested, visit:

  • GitHub
  • Website
  • Docs
  • Online editor