How can I get Bootstrap grid to have the same spacing on all sides?

Question

I'm trying to evenly space out the photos. example. I can't seem to change the space vertically in between the grid.

 <section class="Sculptures">
        <h2 class="Sculptures-heading">Sculptures</h2>
    
        <div class="container p-0">
          <div class="row">
            <div class="col-lg-4">
              <img class="pigeons" src="img\Pigeons-Together-02.png" alt="Pigeons_Together_Sculpture">
            </div>
            <div class="col-lg-4">
              <img class="fox-Sculpture" src="img\fox.png" alt="Fox-02">
            </div>
            <div class="col-lg-4">
              <img class="flying-bird" src="img\flying-bird.png" alt="flying-bird-Sculpture">
            </div>
          </div>
    
      
    
        <div class="row">
            <div class="col-lg-4">
              <img class="tree-Sculpture-2" src="img\tree (2).png" alt="tree-Sculpture">
            </div>
            <div class="col-lg-4">
              <img class="tree-Sculpture-3" src="img\tree (3).png" alt="tree-Sculpture">
            </div>
            <div class="col-lg-4">
              <img class="tree-Sculpture-1" src="img\tree (1).png" alt="tree-Sculpture" </div>
            </div>

Jairo Nava Magaña · Accepted Answer · 2020-08-18 18:10:23Z

First you should look at the image classes Bootstrap already has.

<div class="row">
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
    <div class="col-lg-4 py-2">
        <img class="mx-auto d-block" src="https://via.placeholder.com/150" alt="...">
    </div>
</div>

If that doesn´t work for you and assuming all your images are the same size, you can use flex classes to adjust all elements on a row.

<div class="d-flex align-content-between py-2">
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="img-fluid" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="img-fluid" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="img-fluid" src="https://via.placeholder.com/350x150" alt="...">
    </div>
</div>
<div class="d-flex align-content-between py-2">
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="" src="https://via.placeholder.com/350x150" alt="...">
    </div>
    <div class="d-flex justify-content-center flex-lg-grow-1">
        <img class="" src="https://via.placeholder.com/350x150" alt="...">
    </div>
</div>

If you still feel the need to adjust the spaces you can use the spacing utility classes. I recommend that you use the padding classes to space the elements, since the margin classes can cause other kinds of adjustments on your page. Here I used the class py-2.

Good luck!

Some links to docs

Collectives™ on Stack Overflow

How can I get Bootstrap grid to have the same spacing on all sides?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related