Adjust Bootstrap 4 Card Deck Responsive Breakpoint

In this example below you will see how to do a Adjust Bootstrap 4 Card Deck Responsive Breakpoint with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JacobLett, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JacobLett ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Adjust Bootstrap 4 Card Deck Responsive Breakpoint</title>
  <script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=1"></script>
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">


  <div class="card-deck-wrapper">
    <div class="card-deck">

      <div class="card">
        <div class="card-block">
          <h4 class="card-title">Site Traffic</h4>
          <p class="card-text"><strong>2,000</strong> Today
            <br> 5,500 This Month
            <br> 12,500 Last Month</p>
          <a href="#" class="btn btn-primary">See Analytics</a>
        </div>
      </div>


      <div class="card">
        <div class="card-block">
          <h4 class="card-title">Drafts</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, doloremque accusantium at sint quos corrupti.</p>
          <a href="#" class="btn btn-primary">See All Drafts</a>
        </div>
      </div>

      <div class="card">
        <div class="card-block">
          <h4 class="card-title">Need help?</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, doloremque accusantium at sint quos corrupti.</p>
          <a href="#" class="btn btn-primary">Support</a>
        </div>
      </div>


    </div>
  </div>

</div>
<!-- /.container -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/JacobLett/adjust-bootstrap-4-card-deck-responsive-breakpoint-rWXJPV */
/* Set width to make card deck cards 100% width */
@media (max-width: 950px) { 
	
	.card-deck-wrapper {margin-right:0;margin-left:0;}
	.card-deck {
	    display: block;
	    width: 100%;
	    margin-bottom: .75rem;
	    table-layout: fixed;
	    border-spacing: 1.25rem 0;
	}
	.card-deck .card {
	    display: block;
	    margin-bottom: .75rem;
	    vertical-align: top;
	}
  
  .card-deck .card:not(:first-child) {
    margin-left: 0px;
}
  
}



Comments