Tab helper will generate a tabs or a pills component in bootstrap way.

Default Tab

<%= tabs do |t| %> <% t.tab('tab1') do %> I'm tab #1. <% end %> <% t.tab('tab2') do %> I'm tab #2. <% end %> <% t.tab('tab3') do %> I'm tab #3. <% end %> <% end %>
<%= tabs do |t| %>
  <% t.tab('tab1') do %>
    I'm tab #1.
  <% end %>
  <% t.tab('tab2') do %>
    I'm tab #2.
  <% end %>
  <% t.tab('tab3') do %>
    I'm tab #3.
  <% end %>
<% end %>

Tab with options

<%= tabs(id: 'tabs_10', position: 'below') do |t| %> <% t.tab('tab1', disabled: true, clickable: false) do %> I'm tab #1. <% end %> <% t.tab('tab2') do %> I'm tab #2. <% end %> <% t.tab('tab3') do %> I'm tab #3. <% end %> <% end %>
<%= tabs(id: 'tabs_10', position: 'below') do |t| %>
  <% t.tab('tab1', disabled: true, clickable: false) do %>
    I'm tab #1.
  <% end %>
  <% t.tab('tab2') do %>
    I'm tab #2.
  <% end %>
  <% t.tab('tab3') do %>
    I'm tab #3.
  <% end %>
<% end %>

Stacked Tab

<%= tabs(id: 'tabs_20', stacked: true, class: 'span3', content_options: {class: 'span5'}) do |t| %> <% t.tab('tab1', disabled: true, clickable: false) do %> I'm tab #1. <% end %> <% t.tab('tab2') do %> I'm tab #2. <% end %> <% t.tab('tab3') do %> I'm tab #3. <% end %> <% end %>
<%= tabs(id: 'tabs_20', stacked: true, class: 'span3', content_options: {class: 'span5'}) do |t| %>
  <% t.tab('tab1', disabled: true, clickable: false) do %>
    I'm tab #1.
  <% end %>
  <% t.tab('tab2') do %>
    I'm tab #2.
  <% end %>
  <% t.tab('tab3') do %>
    I'm tab #3.
  <% end %>
<% end %>

Default Pill

<%= tabs(style: 'pill', id: 'tab_30') do |t| %> <% t.tab('tab1') do %> I'm tab #1. <% end %> <% t.tab('tab2') do %> I'm tab #2. <% end %> <% t.tab('tab3') do %> I'm tab #3. <% end %> <% end %>
<%= tabs(style: 'pill', id: 'tab_30') do |t| %>
  <% t.tab('tab1') do %>
    I'm tab #1.
  <% end %>
  <% t.tab('tab2') do %>
    I'm tab #2.
  <% end %>
  <% t.tab('tab3') do %>
    I'm tab #3.
  <% end %>
<% end %>