Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-4

Remove extra space from a Bootstrap 4 Card

I'm using the Card class from Bootstrap 4, but there's an extra right space I can't get rid off:

enter image description here

(Ignore the 'porno' thing, heh).

As you can see, there's extra right space.

I'm trying to get rid of it with this code:

 .card{
     width: 80% !important;
     background-color: black;


 }


 .card-block{
    color: white !important;

 }

 #card-div{
     padding-bottom: 10px;
     padding-right: -10px !important;

 }

 #card-div > a{
     text-decoration: none;
 }

HTML code (using Jekyll too):

<div class="col-sm-8" id="main-content">

  <div class="row">

    {% for post in site.posts%}
    <div class="col-sm-4" id="card-div">
      <a target="_blank" href=" {{post.url}} ">
        <div class="card">
          <img class="card-img-top" src="../media/logo-prueba.jpg">
          <div class="card-block">
            <h5 class="card-title text-center">{{ post.title }}</h5>
            <p class="card-text">{{ post.category }}</p>
          </div>
        </div>
      </a>
    </div>
    {% endfor %}

  </div>

</div>

It doesn't works.

Any help?

Solution

  • The width of the column element is determined by the col-type in CSS. This one has a width of 33.33%. The amount of pixels varies per breakpoint. Currently your column holds a card div. This card div is 80% of the column div. As it defaults to the left side, the remaining 20% appears on the right side. Adding margin: 0 auto; to the card CSS centers the div in its parent. Another solution would be to use a width of 100% (add width: 100% and remove width: 80%!important) on the card div, making it fill up the entire column.