CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvue.jsbootstrap-4
reactRookie
reactRookie

Reputation: 189

card padding issue in vue bootstrap

I've been trying to create a card component using vue bootstrap and while doing so I encountered a weird problem is that the card header and body have a huge padding around them. If I remove b-card and just leave it with b-card-header and b-card-body then it looks like normal bootstrap card but now there's no margin around the header and body. what to do if I want the header and body to have no padding around them?

<b-card>
  <b-card-header v-b-modal.modalBox class="border-1">
    <div>
      <span>Header</span>
    </div>
  </b-card-header>
  <b-card-body>
    <div>
      Body text lorem ipsum
    </div>
  </b-card-body>
</b-card>

Upvotes: 2

Views: 2458

Answers (1)

Hiws
Hiws

Reputation: 10404

If you want to use the sub-components inside <b-card> like <b-card-header> and <b-card-img> which relies on no padding being applied around them, you should apply the no-body property to <b-card> which will remove the default padding on the card, and let the sub-components control it instead.

https://bootstrap-vue.org/docs/components/card#card-body

<b-card no-body>
  <b-card-header v-b-modal.modalBox class="border-1">
    <div>
      <span>Header</span>
    </div>
  </b-card-header>
  <b-card-body>
    <div>
      Body text lorem ipsum
    </div>
  </b-card-body>
</b-card>

Upvotes: 4

Related Questions