CODEWITHSUNDEEP
htmlcssbootstrap-4
Ganesha
Ganesha

Reputation: 83

How to add gap between cards

I need space between the cards as shown in the picture, how do I add spacing so that structure remains the same

<div class="container" style="padding: 16px;">
                  
  <div class="row">
    <div class="center">
      <div class="card text-white bg-primary mb-r"  style="width:100px;height:100px;margin: auto;">
         <div class="card-body">
           <h4 class="card-title">DEL</h4>
           <h7 class="card-text" style="align-content:flex-end">916</h7>   
          </div>
        </div>
      </div>
      <div class="center">
        <div class="card text-white bg-primary mb-r"  style="width:100px;height:100px;margin: auto;">
           <div class="card-body">
            <h4 class="card-title">DEL</h4>
            <h7 class="card-text" style="align-content:flex-end">916</h7>   
            </div>
         </div>
       </div>
       <div class="center">
          <div class="card text-white bg-primary"  style="width:100px;height:100px;margin: auto;">
            <div class="card-body">
              <h4 class="card-title">DEL</h4>
              <h7 class="card-text" style="align-content:flex-end">916</h7>   
             </div>
           </div>
        </div>
        <div class="center">
          <div class="card text-white bg-primary"  style="width:100px;height:100px;margin: auto;">
             <div class="card-body">
                <h4 class="card-title">DEL</h4>
                <h7 class="card-text" style="align-content:flex-end">916</h7>   
              </div>
           </div>
        </div>
       </div>
     </div>

The picture below is the code I have written, I need spacing between them.

Cards

Upvotes: 1

Views: 3611

Answers (2)

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

I know you asked that the structure didn't change however I believe some edits needed to be made, here is a jsFiddle with some suggestions: https://jsfiddle.net/kcozqd9L/2/

CSS

.container{
  padding: 16px;
 }

.card{
  position: relative;
  display: inline-block;

  width:100px;
  height:100px;
  margin: auto;
 }

/*.card-body{
}

.card-title{
}*/

.card-text{
 align-content:flex-end
}

HTML

 <!-- 
  Bootstrap docs: https://getbootstrap.com/docs
 -->

<div class="container">   
  <div class="row">
   <div class="center">

   <div class="card text-white bg-primary mb-r">
     <div class="card-body">
      <h4 class="card-title">DEL</h4>
      <h6 class="card-text">916</h6>   
     </div>
   </div>

    <div class="card text-white bg-primary mb-r">
     <div class="card-body">
      <h4 class="card-title">DEL</h4>
      <h6 class="card-text">916</h6>   
     </div>
    </div>

     <div class="card text-white bg-primary">
      <div class="card-body">
       <h4 class="card-title">DEL</h4>
       <h6 class="card-text">916</h6>   
      </div>
     </div>

      <div class="card text-white bg-primary">
       <div class="card-body">
        <h4 class="card-title">DEL</h4>
        <h6 class="card-text">916</h6>   
       </div>
     </div>

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

Upvotes: 1

Jakub Muda
Jakub Muda

Reputation: 6744

To have spacing between cards just use standard Bootstrap layout, that is using row and columns. Columns have gutters by default. Read more: https://getbootstrap.com/docs/4.3/layout/overview/

There were many errors like <h7> tags, using incorrect css properties etc. Just go through my code and see the changes I made.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">    
  <div class="row">
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions