Search code examples
csstwitter-bootstrapgridresponsivetabular

How to make a responsive html grid 6x4

I need to make a responsive grid which doesn't lose its grid count (should be 6x4 even) when using a small screen and should cover the full screen and looks something like the image below.

I didn't find anything similar to this online, I am not an UI expert, any help will be appreciated, how should one do this? bootstrap grid or table?

I will be using this grid as a overlay to our website to listen to swipe actions.

enter image description here

Solution

  • You can simply do it using bootstrap grid system.

    Example

    <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
           .col-xs-2 {
            border:3px solid grey;
            height: 50px;
           }
           </style>
           
           </head>
           <body>
           <div class="container-fluid">
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           </div>
           </body>
           </html>