bootstrap button group styling with button_to

Question

I'm having trouble in styling the bootstrap button group using button_to.

As shown above, I would like to have something like in the bottom, but currently I'm having a problem with button with "4" when using "button_to" helper.

My code looks like this:

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>        
<button type="button" class="btn btn-default">3</button>
<%= button_to "4", {:action => "new", :id => 1}, :class => "btn btn-default" %>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>

please help me to fix it.

Answer 1

I ended up with following code. It works fine, now.

<%= link_to "4", {:action => "new", :id => 1}, class: "btn btn-default", role: "button" %>

Answer 2

The rails form helper button_to generates a form around the button element, and this form has css of display:block

I solved this by adding this css:

div.btn-group form{
  display: inline;
}

Answer 3

What about setting the div's styling to display: inline?