Reputation: 123
i'm working with bootstrap V3. i'm trying to use the grid property to make a responsive website
<div class="row">
<div class="col-xs-7 backgroundcolor">7</div>
<div class="col-xs-4 backgroundcolor">4</div>
<div class="col-xs-1 backgroundcolor">1</div>
</div>
but when i view this code on a smartphone the col-xs-1 does not show on the same line as the others.
if i change the lines to this:
<div class="row">
<div class="col-xs-1 backgroundcolor">1</div>
<div class="col-xs-4 backgroundcolor">4</div>
<div class="col-xs-7 backgroundcolor">7</div>
</div>
the col-xs-7 is not show on the same line as the col-xs-1 and col-xs-4. on a large screen there is no problem.
you find my code also on http://www.bootply.com/87060.
Upvotes: 2
Views: 508
Reputation: 1339
I am not sure, if this is connected to your problem, but try
<div class="container">
in line 2 instead of class="col-xs-12
This would be the right way to use the Bootstrap-grid.
Upvotes: 1