DEV Community

Cover image for Recreating Bootstrap Grid with Tailwind CSS Grids
Praveen Juge
Praveen Juge

Posted on

Recreating Bootstrap Grid with Tailwind CSS Grids

Bootstrap grid is powered by flexbox, it has a twelve column system, five default responsive tiers, and a mobile-first system.

Tailwind CSS grids are powered by CSS Grids, which technically can have however many columns, five responsive tiers, lots of gutter gap utilities and are easily customizable.

Let’s take the following bootstrap grid:

<div class="container">
  <div class="row">
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

This will get us three columns like this,

We can recreate the same on tailwind by using this,

<div class="grid grid-cols-3">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

We are using the CSS grid there and splitting it into three columns by using Grid Template Columns tailwind utility.

CSS Grids doesn’t have any gutter space built in like bootstrap grid, but we can add that by using the gap utility like this,

<div class="grid grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Since these grid utilities are mobile-first by default, we have to add other cols utilities to make sure it looks good on mobile.

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Here, on the lowest device-width, everything would be on one column and after it hits the lg breakpoint it would be three columns.

We have utility classes for up to 12 columns so we can have a 12 column layout like bootstrap.

The same responsive classes could be used for gap utilities also. The gutter gap below would increase after it hits the lg breakpoint. Like this,

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

But, what if you want to change individual column sizes? You can do that with Grid Column utilities.


<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-2">Takes two columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

The above code uses grid column utility to make the first column take up two columns. And, this is also mobile first. So, if you want it to take up one column on mobile you can do the following,

<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-1 lg:col-span-2">Takes one column on mobile and two on desktop</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

And that’s the easiest way to create a bootstrap like the grid in the tailwind.

Here is the final tailwind playground:

https://play.tailwindcss.com/eAbd7eiQIY

You can learn more about CSS grids here or learn by playing this interactive tutorial.

Oldest comments (6)

Collapse
 
mattfreitas profile image
Matheus Freitas

Amazing! I was trying to find something to finally abandon bootstrap and this is it. Thanks!

Collapse
 
yifeikong profile image
Yifei Kong

This should be in the official tutorial. The docs only talks about each API but not how to use them combined. Thanks.

Collapse
 
sidrsingh profile image
sid-r-singh

This is awesome. I seriously feel this should be part of the official guide. I also learned a lot using the interactive tutorial. Thanks a lot.

Collapse
 
dwoodwardgb profile image
David Woodward

<3 needed this so badly

Collapse
 
kubeden profile image
Kuberdenis

Superb, straight to the point and great code examples!

Collapse
 
mbehzadbhz profile image
Majid Behzadnasab • Edited

its good, but you can easily use tw-bootstrap-grid-optimizer plugin,
all your problem will be fix with less coding and important thing is responsive of grid , to responsive your grid css always should to make some trick for that but with this package you can easily handle that