Bootstrap 4: space between columns

Question

I've struggling with a kinda easy thing on Bootstrap 4 but can't really figure out. I have a 4 columns layout that need space between them:

<div class="row quotes-row">
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-01.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Stephanie Bailey</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Pellentesque suscipit rutrum eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies mattis lectus, at tristique lectus pharetra nec. Quisque at justo tincidunt libero sagittis tincidunt.
        </cite>
      </blockquote>
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-02.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Stormie Hansford</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Mauris faucibus enim at felis consequat efficitur. Suspendisse ipsum lacus, elementum accumsan dapibus posuere, bibendum eu dui. Donec laoreet accumsan eros sed hendrerit. Suspendisse pulvinar placerat aliquam.
        </cite>
      </blockquote>
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-03.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Caspar Sawrey</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Morbi rhoncus ipsum at purus aliquet, sit amet condimentum nisl tempor. Sed vitae enim at felis dignissim tincidunt. Sed aliquet id orci sed porttitor. Donec vel velit id diam viverra ultrices finibus at eros.  Maecenas rutrum, enim a ultricies pellentesque.
        </cite>
      </blockquote>
      <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
        <div class="row quote-box">
          <div class="col-3 photo pr-0">
             <img src="img/quote-author-04.png" class="img-fluid" alt="Author name">
          </div>
          <address class="col-9 profile pl-0">
            <p class="name mb-0">Caspar Sawrey</p>
            <p class="charge mb-0">Charge</p>
          </address>
        </div>
        <cite>
          Morbi rhoncus ipsum at purus aliquet, sit amet condimentum nisl tempor. Sed vitae enim at felis dignissim tincidunt. Sed aliquet id orci sed porttitor. Donec vel velit id diam viverra ultrices finibus at eros.  Maecenas rutrum, enim a ultricies pellentesque.
        </cite>
      </blockquote>
    </div>

It's 4 columns distributed on a row, but I can't figure out how I can apply space between them.

The result is:

A pr-3 por example push the last one to a next line, and I need all at the same level. The styles in each blockquote has cosmetic implications, just background color and font-style. Any idea?

You could decrease the width of `blockquote` and `cite` element. See this [Demo](https://plnkr.co/edit/Ou15MjmCH2JR5zWR?open=lib%2Fscript.js) in full screen so that all 4 columns are on same line — Yousaf, Jul 13 '20 at 11:38

Fyrefly · Answer 1 · 2020-07-13T11:57:48.180

1

Have you tried giving them a margin? The bootstrap class mx-3 added to an element inside each blockquote should give them each some margin to the left and right. You have padding classes, however that effects the padding inside the element rather than outside, this image is pretty useful to understand how padding and margins work differently:

See more about margins and padding in bootstrap here: https://getbootstrap.com/docs/4.0/utilities/spacing/

edited Jul 13 '20 at 11:57

answered Jul 13 '20 at 11:29

Fyrefly

88
7

Hey, I already try with `mx-` classes, but this is what happens: https://imgur.com/a/xKnqcA3 I'm forgetting something on the parents elements? – Pablo Jul 13 '20 at 11:39
1

Try adding the mx class to the div inside the blockquotes rather than to the blockquotes, or alternatively put a div around them with the column info, adding margins and columns to the same elements can break the grid, ideally the margins should be added to an element inside the column element. – Fyrefly Jul 13 '20 at 11:46

Carol Skelly · Answer 2 · 2020-07-13T12:15:51.510

Basically this has been asked before here and here.

You want to adjust the padding or margins on the content of the columns. In your case this means using an inner div to wrap the content of the columns.

For example, look here at the bg-info div...

   <blockquote class="col-12 col-md-6 col-lg-3 back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
          <div class="bg-info">
                <div class="row quote-box">
                    <div class="col-3 photo pr-0">
                        <img src="img/quote-author-01.png" class="img-fluid" alt="Author name">
                    </div>
                    <address class="col-9 profile pl-0">
                        <p class="name mb-0">Stephanie Bailey</p>
                        <p class="charge mb-0">Charge</p>
                    </address>
                </div>
                <cite> Pellentesque suscipit rutrum eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies mattis lectus, at tristique lectus pharetra nec. Quisque at justo tincidunt libero sagittis tincidunt. </cite>
          </div>
   </blockquote>

You don't want to change the left/right margins on the columns because it will throw off the grid system a cause wrapping.

Demo

the same they told me in the answer, this one works, thanks! — Pablo, Jul 13 '20 at 12:10

score 0 · Answer 3 · answered Jul 13 '20 at 12:11

You should really separate your grid structure from your content blocks. Everything gets polluted and complex once you go down the way you try it.

So structure:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-3"></div>
        <div class="col-md-6 col-lg-3"></div>
        <div class="col-md-6 col-lg-3"></div>
        <div class="col-md-6 col-lg-3"></div>
    </div>
</div>

For content blocks:

<blockquote class="quote-box back-box-m back-box p-3" cite="https://www.worldwildlife.org/pages/ways-to-support-wwf">
    <div class="row">
      <div class="col-3 pr-0">
         <img src="img/quote-author-01.png" class="img-fluid" alt="Author name">
      </div>
      <div class="col-9 pl-0">
          <address class="profile">
              <p class="name mb-0">Stephanie Bailey</p>
              <p class="charge mb-0">Charge</p>
          </address>
      </div>
    </div>
    <div class="row">
        <div class="col">
            <cite>
                Pellentesque suscipit rutrum eleifend. Lorem ipsum dolor sit amet, 
                consectetur adipiscing elit. Quisque ultricies mattis lectus, at 
                tristique lectus pharetra nec. Quisque at justo tincidunt libero sagittis tincidunt.
            </cite>
        </div>
    </div>
</blockquote>

It's a bit unclear to me how quote-box and back-box relate to each other but I believe you can figure that out yourself.

Now if you need additional space, as said by other people already, use the utility spacing classes like mx-3 or mx-md-5 and so on, on your content.

Vertical margin typically can be put on the row. Horizontal margin can only be applied on columns when space of 12 cols is not filled => 2 * col-5 with mx-auto. Padding can be applied anywhere (grid rows, cols or content).

So once the structure is in place, you can insert content blocks to their resp. column as you please. Changes to your content blocks do not change the way the grid works.

Bootstrap 4: space between columns

3 Answers3