CODEWITHSUNDEEP
djangobootstrap-5bootstrap-cards
Heikki
Heikki

Reputation: 351

Why is my Boostrap-Card header not filling entire width of the card?

I am new to Bootstrap and Django. I am trying to style a card, but card header (background) does not fill entire width of the card. Here is an example: enter image description here

Here is the code:

<div class="container">
  <div class="grid">
    <div class="row">
      {% for list, content in content.items %}

  <div class="card col-md-6 shadow-lg">
    <a href="{{user_name}}/{{list}}">
      <div class="card-header bg-secondary text-white">{{list}}</div>
      <div class="card-body">
        <ul>
          {% for row in content %}
          <li>{{row}}</li>
              {% endfor %}
            </ul>
          </div>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

Upvotes: 1

Views: 2481

Answers (2)

Fred McClurg
Fred McClurg

Reputation: 21

Cristián is right. Here is an code example that may help:

<div class="card px-0">
  <h4 class="card-header">
    Card Header
  </h4>  <!-- card-header -->
  <div class="card-body">
    Card Body
  </div>  <!-- card-body -->
</div>  <!-- card -->

Upvotes: 0

Cristi&#225;n Ormaz&#225;bal
Cristi&#225;n Ormaz&#225;bal

Reputation: 1532

You need to get rid of horizontal padding for the card. Add the px-0 class to the card div or p-0.

Regards.

Upvotes: 5

Related Questions