Bootstrap 4.0.0-alpha.6 responsive tables
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<h5>
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
</h5>
<h4>
row inside card "body" with class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<h4>
row inside card "body" without class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="foo">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img...
CSS
.container {
max-width: 800px;
}
.card {
border: 1px solid red;
}
[class^="col-"] {
border: 1px solid blue;
}