CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
WouterV
WouterV

Reputation: 123

bootstrap grid does not show right on smartphone

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

Answers (1)

kabr
kabr

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

Related Questions