Q:

100% width of col-xs-12 in mobile view using bootstrap

I have box in my HTML page. The box width responsive. on desktop it should take 540px width and in mobile the box should take 100% width. the is centre align in desktop. The problem I am facing is that on mobile view the box width is not touching the device width because of container class. This problem can be fixed for using .row class but when I use class it is also expending the width of box on desktop. Can this require be achieved without writing extra media query. fiddle
<div class="container">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>

A:

Using media queries is the fastest and most reliable way to attain what you need here I think but If you do not want to then for me my approach is this..
<div class="container hidden-xs visible-sm-block">
  <div class="col-xs-12 col-md-6 box">
     <div class="col-md-12" style="background:#022243">
       content....
     </div>
  </div>
</div>

<div class="row visible-xs-block hidden-sm">
  <div class="col-xs-12 col-md-6 box">
     <div class="col-md-12" style="background:#022243">
       content....
     </div>
  </div>
</div>

Not tried yet but I think this will satisfy your problem.
Hope it helps

