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

How to convert URL to PDF?

Overview of a simple API that allows you to convert any webpage to a PDF document
11 October

PDFs can be generated in many ways, but one of them is to convert HTML+CSS content to a PDF. The URL to PDF Microservice just does that. This microservice allows you to render to PDF receipts, invoices, or any other content. 

Features

So, according to the developers, main advantages of this product are:

  • Rendered with Headless Chrome, using Puppeteer. The PDFs should match to the ones generated with a desktop Chrome.
  • Sensible defaults but everything is configurable.
  • Single-page app (SPA) support. Waits until all network requests are finished before rendering. A feature which even most of the paid services don't have.
  • Easy deployment to Heroku. We love Lambda but...Deploy to Heroku button.
  • Renders lazy loaded elements. (scrollPage option)
  • Supports optional x-api-key authentication. (API_TOKENS env var)

Here is an example of usage. 

Scheme of work
Scheme of work

Developers warn that you shouldn't serve this API publicly in the internet unless you are aware of the risks. It allows API users to run any JavaScript code inside a Chrome in the server. It's fairly easy to expose content of files in the server. You have been warned!

Learn more at GitHub.