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

CSS

Posted by Samuel Ryan
Samuel Ryan
1,701 Points

Am I being stupid, and the answer is really simple?

I'm using Bootstrap v 3.0.3 to build my first responsive website. Straight away, i'm finding it very difficult to style using CSS. Either i'm being really dull or it's more complicated than first thought.

I've created a jumbotron with a h1 and p tag in it. All I want to do is to select the h1 in the jumbotron and change it to another colour. I'm pulling my hair out, because I cannot get it to work. Should I be using .less?

henrikh
henrikh
3,666 Points

Can you please show us your html and css code? this should not be any problem, if you're doing it right..

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Should be .jumbotron h1 { } in css and ensure your custom stylesheet is linked after the bootstrap one.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Another tip is to load your site in browser highlight the h1 then use chrome inspector to see what styles are being added and by what selectors.

2 Answers

Chris Scott
Chris Scott
7,673 Points
Chris Scott
Chris Scott
7,673 Points

Here's a JSBin setup with BS3 and JQuery, should almost be able to just copy paste.whatever your working on.

http://jsbin.com/UMUzolA/1/edit

Let us know when your done and add the link to your question.

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

My favorite way to work with Bootstrap is in combination with Less. I create an extra .less file called app.less and @import 'bootstrap.less' in this file.

This way any css you add to the app.less file will override the bootstrap css.

Make sure to use a preprocessor like prepros to compile the .less file to .css.