Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Brandon Harvey
Brandon Harvey
5,709 Points
Posted by Brandon Harvey
Brandon Harvey
5,709 Points

Bootstrap Buttons

I know this sounds simple, but I can't figure out how to get my bootstrap buttons to have the white text and no line under it like normal links. I want it to look like the standard buttons, and for the life of me I dont know what to do. Please help, it is really annoying me. I have these beautiful buttons looking horrible!!

https://github.com/Bbrandon/Treebook.git

Thats my github, let me know whats up!!

4 Answers

Brandon Harvey
Brandon Harvey
5,709 Points
Brandon Harvey
Brandon Harvey
5,709 Points

Yeah, I have it like that. But for some reason the text is blue, not white. It's like the traditional link properties are over-riding the code for the button and I dont know how to fix that.

Nima Shariatian
Nima Shariatian
1,760 Points

hmm make sure you scaffolds.css.scss is not overriding it. open that stylesheet and remove everything inside it, see if that helps.

Brandon Harvey
Brandon Harvey
5,709 Points
Brandon Harvey
Brandon Harvey
5,709 Points

I already removed everything in that folder.... This problem is driving me crazy!! It's such a basic problem, but I can't figure it out!! LOL

Nima Shariatian
Nima Shariatian
1,760 Points

so i looked at your code, in your views/statuses/index.html , you have a <button> markup which does not work with bootstrap ,

change: <button type="button" class="btn btn-success"> <%= link_to "Post a New Status", new_status_path %> </button>

to:

<%= link_to "Post a new status", new_status_path, :class => "btn btn-success" %>
Nima Shariatian
Nima Shariatian
1,760 Points

sorry my above comment got some code stripped out: change:

<button type="button" class="btn btn-success"> <%= link_to "Post a New Status", new_status_path %> </button>

to

<%= link_to "Post a new status", new_status_path, :class => "btn btn-success" %>

Nima Shariatian
Nima Shariatian
1,760 Points

glad i could help, make sure to remove the <button> tag you only need the link_to

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

In rails, the order at which your CSS files sit (alphabetically) determines the order at which they are applied (You can work around this too). So if you have a global style for links defined in a CSS file after bootstrap, it will override.

Brandon Harvey
Brandon Harvey
5,709 Points
Brandon Harvey
Brandon Harvey
5,709 Points

That's what I was thinking as well, the thing is that I don't know how to over-ride that. I was able to get it fixed though....

Nima Shariatian
Nima Shariatian
1,760 Points
Nima Shariatian
Nima Shariatian
1,760 Points

Hi Brandon, the bootstrap buttons are pretty simple to customize to make a bootstrap button you need to give it the "btn" class and then specify what kind you want eg btn-primary you can refer to this cheat sheet: https://dresssed.s3.amazonaws.com/bootstrap_cheatsheet.pdf

hope this helps.