How to use only the grid system from Bootstrap

You don’t need to add the whole Bootstrap code and a zillion dependencies and plugins if you’re just using its grid system. You can use BS’s grid system as a standalone dependency:

Version 4.1.x

Here’s a review of all CSS files that come with Bootstrap:

CSS filesLayoutContentComponentsUtilities
bootstrap.cssbootstrap.min.cssIncludedIncludedIncludedIncluded
bootstrap-grid.cssbootstrap-grid.min.cssOnly grid systemNot includedNot includedOnly flex utilities
bootstrap-reboot.cssbootstrap-reboot.min.cssNot includedOnly RebootNot includedNot included
Bootstrap CSS Files (https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files)

You can either download the whole package and use bootstrap-grid.min.css or even link to that specific file using a CDN.

Version 3.4.x

Use the link below to download a customized version of Bootstrap. Need the Grid System? Perhaps the pretty Glyphycons or tooltips? This has you covered:

Customize & Download Bootstrap

How to iterate a list in batches using Twig (or plain PHP)

Recently I had to loop through a series of elements in a WordPress template (thanks Timber), which happened to be using Bootstrap.

If you ever used Bootstrap, you are familiar with the following markup:

<div class="row">
  <div class="element col-xs-4">
    Stuff
  </div>
  <div class="element col-xs-4">
    Stuff
  </div>
  <div class="element col-xs-4">
    Stuff
  </div>
</div>
<div class="row">
  ...
</div>

The problem here is very common. You have to:

  • Loop every 3/4/n items.
  • Insert a separator or whatever every 3/4/n items.
Continue reading →