CODEWITHSUNDEEP
ruby-on-railstwitter-bootstraptwitter-bootstrap-3
random_user_0891
random_user_0891

Reputation: 2061

bootstrap format rails output in columns

I'm trying to figure out how to align my rails output into 3 columns of equal length using bootstrap. Basically i need three columns, the issue is that if I have 12 "skills" i would like them to be divided up into 4 skills in each section, etc...

But I can't figure out how to output the data in anything but a one column list. I'm thinking I need something like this?

<div class="col-md-4">
    < ... output of skills >
</div>
<div class="col-md-4">
    < ... output of skills >
</div>
<div class="col-md-4">
    < ... output of skills >
</div>

This is my current output that makes a list, I would like to somehow make 3 columns out of the output.

<div class="col-md-12">
<table>
  <!-- one-to-many association to loop through a users skills -->
  <% @user.skills.each do |skill| %>        
<tr>
  <td>     
    <br />
    <h4><b><%= link_to skill.name, edit_user_skill_path(user_id: @user.id, id: skill.id) %></b></h4>
  </td>
</tr>
 <% end %>
</table>

</div>

update here's the solution I implemented based off of martin's suggestion.

<% @user.skills.in_groups_of(3, false).each do |group| %>
  <div class='row'>
    <% group.each do |skill| %>
      <div class='col-md-4'>
        <div><%= skill.name %></div><br /> 
      </div>
    <% end %>
  </div>
<% end %>

also because the text was being displayed within a panel i found that it was running off the edge so had to use this for the CSS

.panel-body{
    word-wrap: break-word;
}

Upvotes: 0

Views: 71

Answers (1)

Martin
Martin

Reputation: 71

You can try using in_groups_of method: https://apidock.com/rails/v4.2.7/Array/in_groups_of

Upvotes: 1

Related Questions