CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
randbrown
randbrown

Reputation: 569

Bootstrap 3 row too wide giving horizontal scrollbar

How do I make a simple row with a form-control without getting a horizontal scrollbar?

It seems that whatever I do with bootstrap 3, any "fluid" row that should be 100% is actually going beyond its container which introduces a horizontal scrollbar. How do I stop this and make it fit into its container?

Example:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <input type="text" required="" class="form-control" placeholder="Enter something" id="foo" name="foo">
        </div>
    </div>
</div>

jsfiddle: http://jsfiddle.net/qnb3q40g

Upvotes: 2

Views: 7409

Answers (3)

Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

.container-fluid .row {
    margin-left: 0;
    margin-right: 0;
}

For some reason when using container-fluid bootstrap doesn't take into account that it is using a negative margin on rows. So by adding the css above it will fix your issue.

Upvotes: 2

Suganth G
Suganth G

Reputation: 5156

Your code is working fine with bootstrap 3.2.0

DEMO

Upvotes: 5

Rohil_PHPBeginner
Rohil_PHPBeginner

Reputation: 6080

Demo -http://jsfiddle.net/MeycD/537/

You can do it in this way also if you want.

<div class="container">
  <div class="row">
     <div class="col-xs-5 col-lg-1">
      <input type="text" class="form-control input-normal" />
     </div>
  </div>
</div>

Upvotes: 0

Related Questions