0

Talking about grid system of bootstrap 3. If we use col-xs-12 class in our code it will also works for big screen along with small screen, though not necessary to use col-sm-12 or col-md-12 or col-lg-12 class.

From the below image, it is clearly saying extra small size devices which is col-xs-12 are used for <768px. Then how can it works for large screen when we use col-xs-12 only ?

enter image description here

From coding, this below codes will also work for large screen also though I used only class="col-xs-12", did not use class="col-sm-12" or class="col-md-12" or class="col-lg-12"

<div class="container">        
    <div class="row">
        <div class="col-xs-12">ABC</div>            
    </div>
</div>
Priyank Dey
  • 1,104
  • 1
  • 19
  • 43

1 Answers1

0

I think the answer is located into the bootstrap.css file. If you try to search for col-xs-12 you will notice that the width is set to 100%, so this means that using only the class col-xs-12 the div will be rendered at 100% of the width, according of where it is content.

So if you know that a specific div will be full width on all responsive views, instead to write lot of code, you can only call out the col-xs-12, keeping your code clean and simple.

Matt
  • 492
  • 3
  • 15