bootstrap form-group rows not working - css

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">CLEAR INFORMATION</div>
<div class="col-sm-3"><button class="btn btn-default" type="submit">SUBMIT</button></div>
</div>

Answer 3

I had a similar problem and fixed it using Zanderi's suggestion (clearfix).
However, when I changed to bootstrap 4.0 I found out that it all worked fine by default, so my suggestion: leave default code, like:
<form class="dropdown-menu dropdown-menu-right" style="padding: 15px">
<div class="form-group">
<label>Nombre</label>
<input class="form-control" id="name" placeholder="Nombre">
</div>
<div class="form-group">
<label>Imagen</label>
<input class="form-control" type="file" id="image">
</div>
<button type="submit" class="btn btn-default pull-right">Guardar</button>
</form>
and use bootstrap 4.0.