CodePen Embed - Card Group

<div class="container">
  <h1>.card-group</h1>

<h2>Group of 6</h2>  
<div class="card-group">
 
    <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-topfff&text=.card-img-top" alt="Card image cap" width="400">
      
      
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
        <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
        <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
        <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
</div>
<!-- /.card-group -->
  
  
  <h2>Group of 5</h2>  
<div class="card-group">
 
    <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
        <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
        <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    

</div>
<!-- /.card-group -->
  
  
  
  <h2>Group of 4</h2>  
<div class="card-group">
 
    <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
        <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    

</div>
<!-- /.card-group -->
  
  
  
  <h2>Group of 3</h2>  
<div class="card-group">
 
    <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
  
      <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
</div>
<!-- /.card-group -->
  
  
  <h2>6 column grid with no gutters instead of .card-group</h2>
  <div class="row no-gutters">

    <div class="col-sm-3 col-md-2">
          <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
    </div>
    <!-- /.col-sm-2 -->
        <div class="col-sm-3 col-md-2">
          <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
    </div>
    <!-- /.col-sm-2 -->
        <div class="col-sm-3 col-md-2">
          <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
    </div>
    <!-- /.col-sm-2 -->
        <div class="col-sm-3 col-md-2">
          <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
    </div>
    <!-- /.col-sm-2 -->
        <div class="col-sm-3 col-md-2">
          <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
    </div>
    <!-- /.col-sm-2 -->
        <div class="col-sm-3 col-md-2">
          <div class="card">
<!-- set a width on the image otherwise it will expand to full width       -->
      <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-top" alt="Card image cap" width="400">
      <div class="card-body">
        <h4 class="card-title">.card-title</h4>
        <p class="card-text">.card-text</p>
      </div>
      <div class="card-footer">
        .card footer
      </div>
    </div>
    <!-- /.card -->
    
    </div>
    <!-- /.col-sm-2 -->
    
    
    
    
    
  </div>
  <!-- /.row -->
  
  
</div>
<!-- /.container -->

h2 {margin:2rem 0;}

This Pen is owned by Jacob Lett on CodePen.

See more by @JacobLett on CodePen

External CSS

https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External CSS

External JavaScript