Center a bootstrap grid

Question

How can I center the bootstrap grid ?

Here is the code

<div id="what-we-do" class="text-center jumbotron">
<p class="text-center">What We Do</p>

<p>
  We specialize with some of the most popular coffee in the market such as:
</p>
<div class="container">
  <div class="row">
      <div class="col-md-3"> <img src="Images/Caffè Americano.png" alt="Caffè Americano"/><p> Caffè Americano </p></div>
      <div class="col-md-3"> <img src="Images/Café Latte.jpg" alt="Cafe Latte"/><p> Cafè Latte </p></div>
      <div class="col-md-3"> <img src="Images/Cappuccino.jpg" alt="Cappuccino"/> <p> Cappuccino </p></div>
  </div>
  <div class="row">
      <div class="col-md-3"> <img src="Images/Espresso.jpg" alt="Espresso"/> <p>Espresso</p> </div>
      <div class="col-md-3"> <img src="Images/Flat White.jpg" alt="Flat White Coffee"/> <p> Flat White</p> </div>
      <div class="col-md-3"> <img src="Images/Long Black.jpeg" alt="Long Black Coffee"/> <p> Long Black</p> </div>
  </div>
</div>

</div>

Here is the image: Bootstrap Grid Not in Center Image

Here is some css I use to make the image the same sizes

#what-we-do img {
    display: block;
    max-width: 100%;
    width: 500px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
  }

I used the class="text-center" in the container but it doesn't work. If possible, is there some BS class I can use to make it centered? I am minimizing my css because I am practicing bootstrap. Thank you.

Which bootstrap version are you using? – Nandita Sharma Aug 18 '18 at 16:59 — Nandita Sharma, Aug 18 '18 at 16:59

score 1 · Accepted Answer · answered Aug 18 '18 at 17:02

Use justify-content-center class on the row div, in case using bootstrap version 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="what-we-do" class="text-center jumbotron">
  <p class="text-center">What We Do</p>

  <p>
    We specialize with some of the most popular coffee in the market such as:
  </p>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-3"> <img src="Images/Caffè Americano.png" alt="Caffè Americano" />
        <p> Caffè Americano </p>
      </div>
      <div class="col-md-3"> <img src="Images/Café Latte.jpg" alt="Cafe Latte" />
        <p> Cafè Latte </p>
      </div>
      <div class="col-md-3"> <img src="Images/Cappuccino.jpg" alt="Cappuccino" />
        <p> Cappuccino </p>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-3"> <img src="Images/Espresso.jpg" alt="Espresso" />
        <p>Espresso</p>
      </div>
      <div class="col-md-3"> <img src="Images/Flat White.jpg" alt="Flat White Coffee" />
        <p> Flat White</p>
      </div>
      <div class="col-md-3"> <img src="Images/Long Black.jpeg" alt="Long Black Coffee" />
        <p> Long Black</p>
      </div>
    </div>
  </div>

</div>

Thank you!! a clean way to center the rows. thanks. again – bradrar Aug 19 '18 at 06:39 — bradrar, Aug 19 '18 at 06:39
please upvote also if you found it helpful :) – Nandita Sharma Aug 19 '18 at 06:42 — Nandita Sharma, Aug 19 '18 at 06:42

Center a bootstrap grid

1 Answers1