Bootstrap style rows/columns

1

This should be so straightforward, but I couldn’t find an answer anywhere.
Say I’m building using bootstrap a row of 12 with columns of 6.

<%= turbo_frame_tag "milestones" do %>
  <div class="row">
    <%= render @initiative.milestones %>
  </div>
<% end %>

And then:

<%= turbo_frame_tag dom_id(milestone) do %>
  <div class="col-sm-6 px-2">
    <div class="card-primary shadow">
      <div class="card-header">
        <%=  milestone.name %>
      </div>
      <div class="card-body">
      </div>
    </div>
  </div>
<% end  %>

The row size is incorrect; instead of half, it’s more like 1/12. Works well without the tag. How to work around that?

3

Try adding classes directly to the turbo-frame tag:

<%= turbo_frame_tag "milestones", class: "row" do %>
  <%= render @initiative.milestones %>
<% end %>

<%= turbo_frame_tag dom_id(milestone), class: "col-sm-6 px-2" do %>
  <div class="card-primary shadow">
    <div class="card-header">
      <%= milestone.name %>
    </div>
    <div class="card-body">
    </div>
  </div>
<% end %>