Twitter bootstrap button problems with Rails (ERB)

Question

Why is there such a big difference in my twitter bootstrap button with the two following codes:

  <li><%= link_to 'Post A Ride', home_path, :class => "btn btn-success" %></li>

and

  <li> link_to '<button class="btn btn-success"> Post A Ride </button>'</li>

I would like the button to be the same as the second code button, the one with ERB is ugly.

It seems the li class and and Nav and Ul is messing with the btn class. How do I override it?

Here is the full code:

 <header class="navbar">
 <div class="navbar-inner">
 <div class="container"> 

  <%= link_to "ALift", '#', id: "logo" %>
  <nav>
    <ul class="nav pull-right">
      <li><%= link_to 'Post A Ride', home_path, :class => "btn btn-success" %></li>
      <li><%= link_to "Search",  '#' %></li>
      <li><%= link_to "Help",    '#' %></li>
      <li><%= link_to "Sign in", '#' %></li>
    </ul>
  </nav>
   </div>
  </div>
 </header>

Any advice.

Is your problem what is showed here? http://bootply.com/60811 — Pigueiras, May 06 '13 at 19:52
Yes, my button looks the same. It must be all the other classes, but how do I override it. — Erin Walker, May 06 '13 at 20:09

score 3 · Accepted Answer · answered May 06 '13 at 20:19

3

The problem is the navbar <a> tags has their own style. You have to override the style of the btn btn-success with a .navbar .nav > li > a.btn.btn-success selector. Something like this: http://bootply.com/60811 more and less should do the work (the bootply is not perfect, you can see that the hover event is not working as it should).

If you use something like bootstrap-sass, you can achieve the override with simply:

.navbar .nav > li > a.btn.btn-success {
    @extend .btn;
    @extend .btn-success;
}

answered May 06 '13 at 20:19

Pigueiras

18,778
10
64
87

SASS part not having any effect, installed SASS gem, used SCSS at the end of CSS file and nothing. – Erin Walker May 06 '13 at 20:59
Have you put `@import bootstrap;` at the beginning? – Pigueiras May 06 '13 at 21:00
Yes I created a custom.css.scss with import bootstrap etc. at beggining. Rails ignoring it. – Erin Walker May 06 '13 at 21:08
That is not going to work, you should import bootstrap in each `.scss` file that need bootstrap. Anyway, you didn't need to import `bootstrap` all the time, you can just import only what you need. If you are overriding buttons, just do an `import "bootstrap/buttons";` – Pigueiras May 06 '13 at 21:14
I have a bootstrap and a style css file which I converted to css.scss and pasted in the code in both and put in import "bootstrap"; in the style sheet, but still nothing. – Erin Walker May 07 '13 at 05:42
@ErinWalker I don't know really what it's happening, but I use this trick in my projects and it works. Even there are another answer with the same: http://stackoverflow.com/questions/11400219/how-to-reuse-a-class-in-sass-without-using-a-mixin. Could you post another question with the generated CSS, to see what it's really happening? – Pigueiras May 07 '13 at 06:14
Ok, one mistake was renaming the stylesheet.css.scss instead of stylesheet.scss. It now recognizes when I use inspect element on Chrome, but still the button doesn't change. – Erin Walker May 07 '13 at 06:56

Marklar · Answer 2 · 2014-01-15T01:23:19.360

For me working with Bootstrap 3, the answer provided by Przemek Mroczek did not work because the link_to still creates an <a> tag which has styling implemented by default from Bootstrap.

The answer by Pigueiras put me on the right track but caused other elements to have unintended effects (the focus mode of an input was also getting the styling I set for .navbar .nav > li > a.btn.btn-success

What worked for me was to find that the padding and line-height of <a> was causing the issue. I then created a custom class:

.custom-navbar-buttons
{
  @extend .btn;
  @extend .btn-default;
  @extend .navbar-btn;
  padding: 6px 12px !important;
  line-height: 1.428571429 !important;
}

and used this custom class for my link_to:

<%= link_to "Home", home_path, :class=> "custom-navbar-buttons" %>

It's working well so far.

score 0 · Answer 3 · answered May 06 '13 at 19:41

0

In second example you are not using <%= %>. Embedded ruby is needed if you want to use ruby on rails helpers.

You could do something like this:

<%= link_to "Some name", your_path do %>
  html-code-here
<% end %>

answered May 06 '13 at 19:41

Przemek Mroczek

357
1
11

Of course.. Why does the button look so much different with and without the ruby (ERB), its the same CSS - class on both occasions. I'm a coder not a designer. – Erin Walker May 06 '13 at 19:43
1

I'm also not a designer but maybe it's because in first example you add class to link and in second to button. – Przemek Mroczek May 06 '13 at 19:48

Twitter bootstrap button problems with Rails (ERB)

3 Answers3

Linked