CODEWITHSUNDEEP
bootstrap-4
Pablo
Pablo

Reputation: 485

Bootstrap 4: space between columns

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: enter image description here

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?

Upvotes: 0

Views: 916

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362350

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

Upvotes: 1

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

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.

Upvotes: 0

Fyrefly
Fyrefly

Reputation: 88

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:

enter image description here

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

Upvotes: 1

Related Questions