SergioKastro SergioKastro - 3 months ago 16
HTML Question

Bootstrap + form group inside a form horizontal giving a horizontal scrollbar

I am using the latest bootstrap.

I have a form (

class="form-horizontal"
) and inside I am adding a div with the class "form-group", and the result gives a horizontal scroll bar.

I have created an example in JSfiddle using the same code from Bootstrap website.
You can see it here better:
http://jsfiddle.net/SergioKastro/q4pq08rc/

How do I stop showing the horizontal scroll bar?



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>




Answer

Put your code inside a <div class="container"> or <div class="container-fluid">.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
  </form>
</div>

Everything inside your body should be enclosed inside a <div class="container"> or <div class="container-fluid">.

"container" has a fixed width depending on your screen size while "container-fluid" scales directly with the width of the browser.

Comments