"Grid layout box responsive"
Bootstrap 4.1.1 Snippet by prakash27dec

<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 ----------> <div class="container"> <ul> <li><div class="title">header</div></li> <li><div class="title">header</div></li> <li><div class="title">header</div></li> <li><div class="title">header</div></li> <li><div class="title">header</div></li> <li><div class="title">header</div></li> <li><div class="title">header</div></li> <li><div class="title">header</div></li> </ul> </div>
.container { max-width: 90%; overflow: hidden; background: skyblue; margin: 20px auto; padding: 20px 0px; } .container ul { padding: 0px; margin: 0px; } .container ul li:hover { opacity: 0.9; } .container ul li .title:hover { background: blue; color: white; } .container ul li { list-style: none; float: left; width: 20%; height: 300px; background: red; margin: 40px 30px 0px 40px; box-sizing:border-box; border: 2px solid white; } .container ul li .title { width: 100%; height: 50px; line-height: 50px; background-color: white; text-align: center; } @media screen and (max-width: 1250px){ .container ul li { width: 40%; margin-left: 50px; } } @media screen and (max-width: 750px){ .container { width: 100%; padding: 0px; } .container ul li { float: none; width: 90%; margin: 40px auto; } }

Related: See More


Questions / Comments: