Responsive positioning of 6 boxes side by side

Question

I am trying to position responsively 6 boxes side by side. For lg I need 6 boxes next to eachother, then 4, then 3, then 2 for smaller devices. I need all boxes to be same width and fit always for the full 100% inside the container.

No clue why my below code does not work as I want. How to fix?

 .box2 { margin: 5px 5px 5px 0; text-align: center; float: left; background-color: #FFF; color: #000; border: 2px solid #A10000; height: auto; width: 150px; font-size: 12px; } .row { margin-right: -15px; margin-left: -15px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } 

 <div class="container overview-sm"> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> <a href="#" class="box2 dfs-2-sm" title="2"><h1>2</h1></a> <a href="#" class="box2 dfs-3-sm" title="3"><h1>3</h1></a> <a href="#" class="box2 dfs-4-sm" title="4"><h1>4</h1></a> <a href="#" class="box2 dfs-5-sm" title="5"><h1>5</h1></a> <a href="#" class="box2 dfs-6-sm" title="6"><h1>6</h1></a> </div> </div> </div> 

Answer 1

Try this. Is this the same that you want?

 <div class="container overview-sm"> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> </div> </div> </div> </div> 

Answer 2

First of, a typo, where you missed the dot in the CSS rule, should be .box2

Second, those boxes can't be 100% wide at all times. Below I used @media query to set their size based on available screen width

 .box2 { margin: 5px 5px 5px 0; text-align: center; float: left; background-color: #FFF; color: #000; border: 2px solid #A10000; height: auto; width: calc((100% / 2) - 5px); box-sizing: border-box; font-size: 12px; } .row { margin-right: -15px; margin-left: -15px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media screen and (min-width: 768px) { .box2 { width: calc((100% / 3) - 5px); } } @media screen and (min-width: 992px) { .box2 { width: calc((100% / 6) - 5px); } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> <a href="#" class="box2 dfs-2-sm" title="2"><h1>2</h1></a> <a href="#" class="box2 dfs-3-sm" title="3"><h1>3</h1></a> <a href="#" class="box2 dfs-4-sm" title="4"><h1>4</h1></a> <a href="#" class="box2 dfs-5-sm" title="5"><h1>5</h1></a> <a href="#" class="box2 dfs-6-sm" title="6"><h1>6</h1></a> </div> </div> </div>