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 Bootstrap 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Styling Content

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Custom colours in Bootstrap

This is probably going to sound like a daft question. But I was looking for some ways that I could apply colour to my version of Front Dev Conf in the new Bootstrap course.

Of course, I found them in the utilities classes. But it's not exactly the widest choice of colour. So naturally we just use our own custom CSS to get the colours we want.

Is it in some way detrimental to do it this way with Bootstrap, i.e. to mix in our own custom classes with the ones Bootstrap give us?

4 Answers

Kyle Johnson
Kyle Johnson
33,528 Points
Kyle Johnson
Kyle Johnson
33,528 Points

You can customize bootstrap before you download it. This link goes directly to the #colors section of the customize page.

http://getbootstrap.com/customize/#colors

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

https://bootswatch.com/

This is for bootstrap 3 though. You can apply the same concepts.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Good link, that's an excellent resource, but I'm talking about writing our own custom styles on the fly. :-)

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

You can modify it with less or scss

Jake Ford
Jake Ford
9,230 Points
Jake Ford
Jake Ford
9,230 Points

You can still use your own style sheet and classes, or inline css. I was wondering this too. You just have to make sure you load your custom stylesheet after bootstrap's. I tried this:

<h1 class="text-xs-center display-4 m-y-3" style="color: red;">Speakers</h1>

and it worked.

But I think you are right, if you really want to customize bootstrap itself, you need SASS, SCSS, or LESS.