"5 column Flex Responsive "
Bootstrap 4.1.1 Snippet by lancevercetti

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html> <head> <title>5 column Flex Responsive </title> </head> <body> <div class="container pt"> <div class="row"> <div class="f-wrapper"> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> </div> <div class="f-wrapper"> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> </div> <div class="f-wrapper"> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> </div> <div class="f-wrapper"> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> </div> <div class="f-wrapper"> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> <div class="items"><p>Items</p></div> </div> </div> </div> </body> </html>
body{ margin: 0 auto; padding: 0; min-width: 320px; } .f-wrapper{ margin: 0 auto; width: 90%; margin: 0 auto; display: flex; background-color: #585858; justify-content: space-evenly; border-radius:100px; border-bottom: 1px solid #fff; } .f-wrapper:last-child{ border-bottom: 0 solid #fff; } .items{ color: #fff; left: 0; } .items p{ margin: 15px; } .pt{ padding-top: 50px; } /*uncomment for odd even*/ /* .f-wrapper:nth-child(odd){ background-color: #585858; } .f-wrapper:nth-child(even){ background-color: #a4a4a4; }*/

Related: See More

Bootstrap Wizard
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Responsive Event Html template bootstrap 4

Questions / Comments: