<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-5ths col-sm-5ths red"> </div> <div class="col-md-5ths col-sm-5ths green"> </div> <div class="col-md-5ths col-sm-5ths blue"> </div> <div class="col-md-5ths col-sm-5ths green"> </div> <div class="col-md-5ths col-sm-5ths yellow"> </div> </div> </div>

.red{ background-color:red; } .blue{ background-color:blue; } .green{ background-color:green; } .yellow{ background-color:yellow; } .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } }