CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3responsive
Raef Kandil
Raef Kandil

Reputation: 307

Bootstrap xs columns wrap

For the smallest xs size, even if I have the columns adding up to 12, they don't work as expected if screen width decreases beyond a certain limit. For instance:-

<div class="container">
    <div class="row">
           <div class="col-xs-2">
           </div>
           <div class="col-xs-1 col-xs-offset-8>
            </div>
            <div class="col-xs-1>
           </div>
     </div>

I would expect the if I decrease the size the last column will get stacked up to the end of the screen. However, this is not the case. As the screen decreases beyond a certain limit, the last column wraps up toward the beginning of the screen. I have thought about writing css code to give the container min-width. However, I thought that bootstrap might have a better way to handle this

Upvotes: 1

Views: 1503

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362390

This is a known issue: https://github.com/twbs/bootstrap/issues/13221

At screen widths <360px, the .col-xs-1 columns start to wrap because..

"while the column is set to width: 8.333333%;, the column is going to be at least 30px wide because of the 15px padding on either side. Therefore, there's a mismatch and the browser just stacks the columns" - @mdo

The problem can be avoided by not using col-xs-1 on very small screens. You should also consider if the screen will realistically be resized less than 360px. In most cases it is not.

Note: In Bootstrap 4, col-xs-1 is now col-1.

Related: Bootstrap grid breaks in smallest size

Upvotes: 2

kind user
kind user

Reputation: 41893

It works well for me. But your code lacks a closing div and few quotation marks.

<div class="container">
 <div class="row">
  <div class="col-xs-2">
  </div>
  <div class="col-xs-1 col-xs-offset-8">
  </div>
  <div class="col-xs-1">
  </div>
 </div>
</div>

Upvotes: 1

Related Questions