CODEWITHSUNDEEP
csstwitter-bootstrap
EFC
EFC

Reputation: 110

Bootstrap 12 colums of size 1 on extra small screen dont fiit

Hello I am trying to do what the title says, but in a small screen (like my phone) the 12 columns don't fit on the row. I have also tried this on Foundation but the results are the same.

Example:

<div class="container">
<div class="row">
  <div class="col-xs-1">1</div>
  <div class="col-xs-1">2</div>
  <div class="col-xs-1">3</div>
  <div class="col-xs-1">4</div>
  <div class="col-xs-1">5</div>
  <div class="col-xs-1">6</div>
  <div class="col-xs-1">7</div>
  <div class="col-xs-1">8</div>
  <div class="col-xs-1">9</div>
  <div class="col-xs-1">10</div>
  <div class="col-xs-1">11</div>
  <div class="col-xs-1">12</div>
</div>
</div>

Or here on the file I am working on: Edit: no loger true since I fixed it.

Is this the expected behavior? Can this be fixed, and if so what would be the best way?

Upvotes: 0

Views: 68

Answers (1)

Dimas Pante
Dimas Pante

Reputation: 2521

That's because the space between divs. Add this CSS to your "row" div:

.no-gutter > [class*='col-xs-']{padding-right: 0; padding-left: 0}

In html:

<div class="row no-gutter">
...

Upvotes: 1

Related Questions