bootstrap form-group rows not working

Question

I'm not sure what I'm doing wrong here. The form-group class should act like a row in the form-horizontal form, correct? Here's the code. It's an add/drop page for fantasy football.

<h2>Add/Drop Player</h2>
<div class="container">
  <%= form_tag(slot_do_add_drop_path(@slot), method: 'post', :html => {:class => 'form-horizontal', :role => 'form'}) do %>

    <div class="form-group">
      <div class="col-sm-2">Player to Drop</div>
    </div>
    <div class="form-group">
      <div class="col-sm-2"><%= @slot.player.display_name %> - <%= @slot.player.position %></div>
    </div>

    <div class="form-group">
      <div class="col-sm-2">Add Player</div>
    </div>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_qbs, p_id: 'qb_id', prompt: 'Select QB'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_wrs, p_id: 'wr_id', prompt: 'Select WR'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_rbs, p_id: 'rb_id', prompt: 'Select RB'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_tes, p_id: 'te_id', prompt: 'Select TE'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_ks, p_id: 'k_id', prompt: 'Select K'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_defs, p_id: 'def_id', prompt: 'Select DEF'}%>
    <div class="form-group">
      <div class="col-sm-2">
        <%= submit_tag 'Submit', name: 'add_drop_player', class: 'form-control'%>
      </div>
    </div>
  <% end %>
</div>

The partial free_agent_select

<div class="form-group">
  <div class="col-md-2">
    <%= collection_select :player, p_id, free_agents, :id, :display_name, {:prompt => prompt}, {:class => 'form-control'} %>
  </div>
</div>

Answer 1

You should use a row class for each new "row" to solve overlap problem like this.

<div class="form-group row">
  <div class="col-sm-2">Player to Drop</div>
</div>

Answer 2

It should be noted that form-group won't wrap floated elements. In this instance all elements with .col-xx-xx add a float to it's container. Adding the class name of .row simply adds the clear-fix of having a ::before and ::after element added to the element (in this case a div) and then applying the css property of clear:both to those elements. You do not need to have the class name of .row added to the parent element you can simply add .clearfix as a class. As it is purely semantics the decision is up to you.

<div class="form-group">
  <label for="firstName">First Name</label>
  <input id="firstName" name="firstName" class="form-control" />
</div>
<div class="form-group clearfix">
  <div class="col-sm-3"><a href="javascript:void(0);" class="btn btn-primary">CLEAR INFORMATION</a></div>
  <div class="col-sm-3"><button class="btn btn-default" type="submit">SUBMIT</button></div>      
</div>