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

Question

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 1

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.