How To Set Responsive Divs In My Case?

I want to use col-md-2 for the large pc view and col-xs-12 for tablet view. My problem is that when I turn to larger width view, I see there are gaps between each div. This doesn'

Solution 1:

You're trying to nest the grid. If you nest the grid you need an additional <div class="row"> between the two column classes to offset the padding.

For example the <div> with the class col-xs-12 col-md-2 has a direct child <div> with class col-xs-3 col-md-12 box1.

Change this from

<div class="col-xs-12 col-md-2">
    <div class="col-xs-3 col-md-12 box1">

into

<div class="col-xs-12 col-md-2">
    <div class="row">
        <div class="col-xs-3 col-md-12 box1">

I've updated your example to add these <div class="row">'s

.box1 {
  background-color: grey;
}
.box2 {
  background-color: red;
}

<linkhref="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"rel="stylesheet" /><divclass="container"><divid="wrapper"><divclass="row"><divclass="col-md-1"></div><divclass="col-xs-12 col-md-2"><divclass="row"><divclass="col-xs-3 col-md-12 box1">
            test
          </div><divclass="col-xs-9 col-md-12 box2">
            test 2
          </div></div></div><divclass="col-xs-12 col-md-2"><divclass="row"><divclass="col-xs-3 col-md-12 box1">
            test
          </div><divclass="col-xs-9 col-md-12 box2">
            test 2
          </div></div></div><divclass="col-xs-12 col-md-2"><divclass="row"><divclass="col-xs-3 col-md-12 box1">
            test
          </div><divclass="col-xs-9 col-md-12 box2">
            test 2
          </div></div></div><divclass="col-xs-12 col-md-2"><divclass="row"><divclass="col-xs-3 col-md-12 box1">
            test
          </div><divclass="col-xs-9 col-md-12 box2">
            test 2
          </div></div></div><divclass="col-xs-12 col-md-2"><divclass="row"><divclass="col-xs-3 col-md-12">
            test
          </div><divclass="col-xs-9 col-md-12 test2">
            test 2
          </div></div></div></div></div></div>

Solution 2:

The gaps are defined in Bootstrap grid settings. Classes with xs-* are all 100% width blocks, so there are no gaps. If you want to have grid system without gaps on all screen sizes, you need to customize your Bootstrap build - http://getbootstrap.com/customize/