How do I put space between my Bootstrap columns?

Question

I am trying to make a website using Bootstrap, and when I tried putting two columns beside each other (they together come out to the 12 allowed columns in bootstrap) they just get squished together. I tried adding a margin to one of the columns, but that just caused the smaller column to wrap and end up under the larger one.

<div class="container">
  <div class="row">
    <div class="col-sm-8s">
      <div class="featuredPost">
        <h2>Featured Post <hr></h2>
        <img src="Images/placeholderImg.jpg" alt="Featured Image">
        <p>
          Portland aesthetic cardigan cloud bread brooklyn food truck blog leggings quinoa street art franzen. Fixie swag artisan ennui vaporware cred. Church-key direct trade neutra try-hard tilde typewriter selfies butcher trust fund. Aesthetic iceland small batch ugh health goth you probably haven't heard of them glossier fixie before they sold out fingerstache knausgaard cloud bread slow-carb. Man bun gluten-free sartorial, thundercats blog man braid banjo. Skateboard poke hot chicken pickled, tote bag tacos 90's..<a href="#">Read More &raquo;</a>
        </p>
      </div>
    </div>

    <aside class="authorBio col-sm-4">

      <div class="widget">
        <div class="row">
          <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar">
          <h1 class="col-sm-6">Aimée LeVally</h1>
        </div>
        <hr>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div><!-- widget -->

    </aside>
  </div><!-- row -->
</div>


.authorBio {
background-color: #fff4e8;
padding: 15px 50px 30px 50px;
text-align: justify;
border: 5px solid #f7ddc0;
}

.authorBio h1 {
text-align: justify;
color: #ad4b34;
}

.authorBio img {
width: 50%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}

.featuredPost {
background-color: #fff4e8;
padding: 15px 50px 30px 50px;
text-align: justify;
border: 5px solid #f7ddc0;
}

.featuredPost img {
width: 100%;
padding: 0 0 0 0;
margin: 0;
}

.featuredPost p {
padding-top: 25px;
}

Answer 1

I advise you to only use the column classes inside of <div> tags.

<div class="widget">
    <div class="row">
      <div class="col-sm-6">
         <img src="Images/AimeeAvatar.jpg" alt="Avatar">
      </div>
      <div class="col-sm-6">
         <h1 class="col-sm-6">Aimée LeVally</h1>
      </div>

    </div>
    <hr>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur.
    </p>
  </div><!-- widget -->

Answer 2

You need to create div in columns, like:

<div class="col-sm-8">
  <div class='extra_div_1'>
      <div class="featuredPost">
        <h2>Featured Post <hr></h2>
        <img src="Images/placeholderImg.jpg" alt="Featured Image">
        <p>
          <a>Portland</a>
        </p>
      </div>
  </div>
</div>

<aside class="authorBio col-sm-4">
  <div class='extra_div_2'>
      <div class="widget">
        <div class="row">
          <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar">
          <h1 class="col-sm-6">Aimée LeVally</h1>
        </div>
        <hr>
        <p>
          Lorem
        </p>
      </div>
  </div>

</aside>

CSS:

.extra_div_1{
    padding:0px 15px 0px 15px; // or margin
}
.extra_div_2{
    padding:0px 15px 0px 15px; // or margin
}

Why ... because when You use margins for column - width became bigger then col-md-12 and Your column jump on bottom. So You need to create extra div in column and use padding/margin to make blank space between columns.

Answer 3

The problem is due to your applying a background-color directly to the Bootstrap Grid .col-*-* class. These classes use padding to create the spacing between each element, but a background would make it appear as though each grid element was immediately brushing up against the other.

Instead, place your background as a wrapper class - for example:

<div class="col-sm-8">
  <div class="my-well">
    <p>Hi I am some text</p>
  </div>
</div>

With CSS along the lines of:

.my-well {
  padding: 15px;
  background: #999;
}

Answer 4

Always follow this rule with the Bootstrap grid:...

.col-* must be wrapped in .row, and only .col-* should be the immediate child of row

https://www.codeply.com/go/uH5cQ5HB8X

Also, cols should be div, not other inline elements like img and h1. Since padding is used to create the "gutter" or spacing between columns, use a margin around the inner content of the column(s) to increase spacing. Therefore, your authorBio and featuredPost should be contained within the Bootstrap columns.

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="featuredPost">
                ..
            </div>
        </div>
        <aside class="col-sm-4">
            <div class="row">
                <div class="col-sm-12">
                    <div class="authorBio">
                        <div class="row">
                            <div class="col-lg-6">
                                <img>
                            </div>
                            <div class="col-lg-6">
                                ...
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </aside>
    </div>
    <!-- row -->
</div>

https://www.codeply.com/go/uH5cQ5HB8X