Ahmed Zougari
Ahmed Zougari Blog

Follow

Ahmed Zougari Blog

Follow
How to center div tailwind CSS vs Bootstrap

How to center div tailwind CSS vs Bootstrap

Ahmed Zougari's photo
Ahmed Zougari
·Jun 6, 2022·

1 min read

Table of contents

  • Absolute
  • Flex
  • Flex with margin
  • Grid
  • Grid with margin

All know how much we suffer while centering a div😜. so I decided to share this tutorial. How to center a div using utility classes tailwind and bootstrap.

NB: this is not a comparison between tailwind and bootstrap.

Absolute

  • tailwind
    <div class="relative">
    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"></div>
    </div>
    
  • bootstrap
    <div class="position-relative">
    <div class="position-absolute top-50 start-50 translate-middle"></div>
    </div>
    

Flex

  • tailwind
    <div class="flex justify-center items-center">
    <div class=""></div>
    </div>
    
  • bootstrap
    <div class="d-flex justify-content-center align-items-center">
    <div class=""></div>
    </div>
    

Flex with margin

  • tailwind
    <div class="flex">
    <div class="m-auto"></div>
    </div>
    
  • bootstrap
    <div class="d-flex">
    <div class="m-auto"></div>
    </div>
    

Grid

  • tailwind
    <div class="grid place-items-center">
    <div class=""></div>
    </div>
    
  • bootstrap
    <div class="d-grid justify-content-center align-items-center">
    <div class=""></div>
    </div>
    

Grid with margin

  • tailwind
    <div class="grid">
    <div class="m-auto"></div>
    </div>
    
  • bootstrap
    <div class="d-grid">
    <div class="m-auto"></div>
    </div>
    
    Which one is your favorite🤔. let us know in comments💬.
 
Share this