Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Styling Content

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,845 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

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,008 Points

https://bootswatch.com/

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

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,845 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,008 Points

You can modify it with less or scss

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.