CODEWITHSUNDEEP
csstwitter-bootstrapruby-on-rails-4
monodev
monodev

Reputation: 187

bootstrap button group styling with button_to

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

sample image

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.

Upvotes: 6

Views: 2151

Answers (3)

Meier
Meier

Reputation: 3890

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;
}

Upvotes: 3

monodev
monodev

Reputation: 187

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

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

Upvotes: 3

Joseph Sawyer
Joseph Sawyer

Reputation: 453

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

Upvotes: 1

Related Questions