title: Bootstrap 3 form-horizontal not working with bootstrapWizard
body: <p>Pardon me, this might be silly question.</p>
  
  <p>I'm trying to mix bootstrap 3 with twitter bootstrap wizard in Meteor:</p>
  
  <pre><code>&lt;template name="bootstrapWizard"&gt;
      &lt;div id="rootwizard" class="tabbable tabs-left col-sm-6"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#tab1" data-toggle="tab"&gt;First&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Second&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab3" data-toggle="tab"&gt;Third&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
              &lt;div class="tab-pane" id="tab1"&gt;
                  &lt;form class="form-horizontal" role="form"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-2" for="email"&gt;Email:&lt;/label&gt;
                          &lt;div class="col-sm-4"&gt;
                              &lt;input type="email" class="form-control" id="email" placeholder="Enter email"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-2" for="pwd"&gt;Password:&lt;/label&gt;
                          &lt;div class="col-sm-4"&gt;
                              &lt;input type="password" class="form-control" id="pwd" placeholder="Enter password"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;                  
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                              &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane" id="tab2"&gt;
                  2
              &lt;/div&gt;
              &lt;div class="tab-pane" id="tab3"&gt;
                  3
              &lt;/div&gt;
              &lt;ul class="pager wizard"&gt;
                  &lt;li class="previous first" style="display:none;"&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="previous"&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="next last" style="display:none;"&gt;&lt;a href="#"&gt;Last&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="next"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The column (or grid (?)) doesn't work well. If I take <code>class="form-horizontal"</code> out, the rows does get closer, but not how it should be.</p>
  
  <p>I'm really new to this CSS and bootstrap stuffs, but I've wandered on stackoverflow for a couple of minutes and couldn't find similar cases.</p>
  
  <p>Wondering if there's any bootstrap CSS class i should've used...</p>
  
  <p>*Reference: <a href="https://github.com/VinceG/twitter-bootstrap-wizard" rel="nofollow noreferrer">bootstrap wizard</a> and <a href="https://atmospherejs.com/twbs/bootstrap" rel="nofollow noreferrer">twbs:bootstrap 3.3.5</a></p>
  
  <p>Edit: Current looks: <a href="https://i.stack.imgur.com/99SQ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/99SQ0.png" alt="enter image description here"></a></p>
  
  <p>Expected: <a href="https://i.stack.imgur.com/n1CSc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n1CSc.png" alt="enter image description here"></a></p>