Jake Xia Jake Xia - 5 months ago 11
CSS Question

col-sm-4 not fitting three columns

When I use col-sm-4, only two columns fit. This happens even when I view the webpage at the most zoomed out. There are two columns showing instead of three. I tried to edit the margins, but that didn't help. Here is how it looks. This seems very amateur, but I am in fact an amateur. Thanks.

HTML

<section class="container">
<div class="eventDisplay">
<h2>Available Events</h2>
<div class="eventDisplay row">

<div class="eventDisplay col-sm-4">
<div class="thumb">
<span>Event Name</span>
</div>

<h2 style="font-weight: bold;">September 20 | 9:00am - 4:00pm <br/><br/> @Rouge Valley Park</h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim nisi mauris, quis semper ex vehicula ut. Etiam cursus convallis ullamcorper. Donec a sagittis ipsum. Sed ut arcu non augue aliquam finibus nec quis massa.
</p>

<div class="centerButton">
<a class="btn btn-secondary" href="mailto:tempEmail?Subject=Event Title &body=Name:">get planting</a>
</div>
</div>

(this time 3)

</div>
</div>
</section>


CSS

.eventdisplay.row {
margin: 30px;
}

.eventDisplay.col-sm-4 {
margin: 50px;
border-radius: 12px;
box-shadow: 5px 5px 25px #B8B8B8;
padding: 0 !important;
}

.thumb {
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
display: block;
background-image: url("img/trees.jpg");
background-size: cover;
height: 300px;
width: 100%;
position: relative;
}

Answer

This is how I look at least: you're nesting this class, .eventDisplay 3 levels deep for some reason and trying to use it in conjunction with either a .row or a .col-*-* which is upsetting the properties of those classes and causing the grid to break. As a very general rule, place your content inside the grid

.container
  .row
    .col-*-*
      .content

Here are two examples: one that cleans up your current code and one using a modified Card Component.

Example 1: Sort of what you have.

.eventDisplay {
  border-radius: 12px;
  box-shadow: 5px 5px 25px #B8B8B8;
}
.thumb {
  -webkit-border-top-right-radius: 12px;
  -webkit-border-top-left-radius: 12px;
  background-image: url("http://placehold.it/350x150");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <div class="row">

    <div class="col-sm-4">

      <div class="eventDisplay">
        <div class="thumb">
          <span>Event Name</span>
        </div>
        <h2>Available Events</h2>
        <h2>September 20 | 9:00am - 4:00pm <br/><br/> @Rouge Valley Park</h2>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim nisi mauris, quis semper ex vehicula ut. Etiam cursus convallis ullamcorper. Donec a sagittis ipsum. Sed ut arcu non augue aliquam finibus nec quis massa.</p>
        <div class="centerButton">
          <a class="btn btn-secondary" href="mailto:tempEmail?Subject=Event Title &body=Name:">get planting</a>
        </div>
      </div>

    </div>

    <div class="col-sm-4">

      <div class="eventDisplay">
        <div class="thumb">
          <span>Event Name</span>
        </div>
        <h2>Available Events</h2>
        <h2>September 20 | 9:00am - 4:00pm <br/><br/> @Rouge Valley Park</h2>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim nisi mauris, quis semper ex vehicula ut. Etiam cursus convallis ullamcorper. Donec a sagittis ipsum. Sed ut arcu non augue aliquam finibus nec quis massa.</p>
        <div class="centerButton">
          <a class="btn btn-secondary" href="mailto:tempEmail?Subject=Event Title &body=Name:">get planting</a>
        </div>
      </div>

    </div>

    <div class="col-sm-4">

      <div class="eventDisplay">
        <div class="thumb">
          <span>Event Name</span>
        </div>
        <h2>Available Events</h2>
        <h2>September 20 | 9:00am - 4:00pm <br/><br/> @Rouge Valley Park</h2>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim nisi mauris, quis semper ex vehicula ut. Etiam cursus convallis ullamcorper. Donec a sagittis ipsum. Sed ut arcu non augue aliquam finibus nec quis massa.</p>
        <div class="centerButton">
          <a class="btn btn-secondary" href="mailto:tempEmail?Subject=Event Title &body=Name:">get planting</a>
        </div>
      </div>

    </div>

  </div>
</section>

Example 2: Using Bootstrap v4 Cards.

body {
  padding-top: 50px;
}
.card.eventDisplay {
  box-shadow: .25rem .25rem 1.75rem #B8B8B8;
  border: none;
}
.btn.btn-black {
  background: #000;
  color: white;
  border-radius: 2.5rem;
}
.card-img.card-img-bottom {
  border-radius: .25rem .25rem 0 0;
}
@media (min-width: 48em) and (max-width: 61em) {
  .event:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 62em) {
  .event:nth-child(3n+1) {
    clear: left;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <div class="row">

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 1</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 2</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 3</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title
            and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 4</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 5</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title
            and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 6</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 7</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 8</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title
            and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 9</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-6 event">

      <div class="card eventDisplay">
        <img class="card-img card-img-bottom img-fluid" src="http://placehold.it/750x500" alt="alt">
        <div class="card-img-overlay">
          <h4 class="card-title">Event 10</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">September 20 | 9:00am - 4:00pm</li>
          <li class="list-group-item">@Rouge Valley Park</li>
        </ul>
        <div class="card-block text-xs-center">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title
            and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-secondary btn-black">Get Planning</a>
        </div>
      </div>

    </div>

  </div>
</section>

Comments