CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
DVillano
DVillano

Reputation: 47

How to add space between columns in Bootstrap 4

I have the following container with 3 columns using Bootstrap 4 

  <section id="features">

    <div class="container-fluid">
      <div class="row justify-content-around">
        <div class="col-lg-4 col-md-12 ">
          <i class="fas fa-check-circle"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>

        <div class="col-lg-4 col-md-12" >
          <i class="fas fa-bullseye"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>

        <div class="col-lg-4 col-md-12">
          <i class="fas fa-heart"></i>
          <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
  </section>

Three columns

I want to add space between them so they are more separated, however when i try to add padding or margin it breaks the row. How can i add the space maitaining the three items in the same row.

Upvotes: 1

Views: 4227

Answers (2)

focus.style
focus.style

Reputation: 6760

Paddings inside cols works fine. Use class px-5. You can use number form 0 to 5 in it. px means "padding x" (both left and right). Although you can use size breakpoints in it, like px-sm-3. More about padding in Bootstrap 4 here https://getbootstrap.com/docs/4.4/utilities/spacing/ 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
 <section id="features">

    <div class="container-fluid">
      <div class="row justify-content-around">
        <div class="col-lg-4 col-sm-12 px-5">
          <i class="fas fa-check-circle"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>

        <div class="col-lg-4 col-sm-12 px-5" >
          <i class="fas fa-bullseye"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>

        <div class="col-lg-4 col-sm-12 px-5">
          <i class="fas fa-heart"></i>
          <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
  </section>

Upvotes: 1

Marco Ottina
Marco Ottina

Reputation: 589

I advice to use Flex to manage rows (and columns) of stuffs: it also provides methods to define inner and outer space of elements.

Upvotes: 0

Related Questions