CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Justin
Justin

Reputation: 1479

Make .card-title background extend to border (no padding)?

I have a simple bootstrap .card and am unsure how to make the .card-title background extend to the edges of the border. The code is below and an example can be seen here: https://jsfiddle.net/x6pmLk8c/

<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <style>
  .card{
    border: 1px solid black; /* set for visual purposes */
   }
  .card-title{
    background: blue;
  }
 </style>
</head>

<body>    
 <div class="card">
  <div class="card-body">
   <h3 class= 'card-title text-center mb-2'>Title</h3>
   <div class= 'card-text'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    veniam perspiciatis repellendus eligendi, dicta facere libero illum sed eum
    atque culpa facilis iure, hic maiores. Saepe cum illum, eaque!
   </div>
  </div>
 </div>
</body>

It appears there is some padding between .card's contents and its border. I have tried 

.card,
.card-title{
    padding: 0;
}

but this had no effect. Does anyone know how to correct this? Thanks.

Upvotes: 0

Views: 214

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 61

Please cut and paste <h3 class= 'card-title text-center mb-2'>Title</h3> outside of <div class="card-body"> the new code structure is:

<div class="card">
   <h3 class="card-title text-center mb-2">Title</h3>
   <div class="card-body">
       <div class="card-text">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo necessitatibus veniam perspiciatis repellendus eligendi, dicta facere libero illum sed eum atque culpa facilis iure, hic maiores. Saepe cum illum, eaque!
        </div>
   </div>
</div>

Upvotes: 1

Justin
Justin

Reputation: 1479

Turns out .card-body is set with some initial padding. 

.card-body{
  padding: 0;
}

Fixed this problem.

Upvotes: 0

Related Questions