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
Michael Bates
13,344 PointsCustomization in Bootstrap 4?
I recently began the Bootstrap 4 course. My biggest question is...
Am I stuck using the predefined settings (such as colors) for items such as buttons from the Bootstrap library, or can I use those items and then define my own colors using CSS? Any feedback would be greatly appreciated!
3 Answers
Unsubscribed User
7,176 PointsHey Michael!
Yeah you can style every single bootstrap element however you want! If you want to do so, you should consider to place link which references to your own stylesheet below the links from bootstrap (Because your styles overwrite the bootstrap styling then)
I hope that was helpful, Patrick
Jason Anders
Treehouse Moderator 145,863 PointsHey Michael,
Everyone already gave excellent answers, so I'll just give you a little spoiler... :)
The very last video in this course, Guil spends about 6 minutes going over how it's actually a good thing to customize Bootstrap styles... otherwise your site may look like so many others. :)
Keep Coding Everyone! :)
Michael Bates
13,344 PointsAhhh... Looks like I haven't made it that far yet, but it is good to know! Lol
Michael Bates
13,344 PointsThank you all for the feedback! I was a little worried about the customization options there for a moment lol
Michael Bates
13,344 PointsMichael Bates
13,344 PointsExcellent! I was hoping that was the case! Since Bootstrap uses classes, would I have to use IDs to choose certain elements that I want to customize?
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsYou can grab onto the same class to override the styles, that's the beautiful part of about css being cascading.
The hardest thing with overriding bootstrap is that sometimes their selectors get very specific, so your selectors have to be even more specific. Id's are an okay way to accomplish this since id's are worth 10 points, and classes one, but Id's are not reusable. Instead I usually nest further back and will grab the body or html elements to get a high enough specificity that it overrides the bootstrap classes. It's an ugly selector, but it is what it is.
Michael Bates
13,344 PointsMichael Bates
13,344 PointsCool! Do you happen to have an example, Kevin?
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsNot really, or not a great one. Sometimes you might run across something like
.bd-example > .list-group, and so sometimes I might append an extra class to be just slighly more specific, so my override selector looks like.bd-example > .list-group.my-groupYou should read this: https://css-tricks.com/specifics-on-css-specificity/
It's an oldie but a goodie.
Also,
Check out these bootstrap kits for inspiration and technique: http://www.creative-tim.com/products.
They are just css files you add after your standard bootstrap files, and their selectors and styles override the default boostrap class.
Not saying you have to, or should use one of their kits, but you could certainly download the free version(s), and take a peak at their code, and see how they override componets of bootstrap.
Michael Bates
13,344 PointsMichael Bates
13,344 PointsGotcha! I thinking that was the case! And thanks for links! I will definitely bookmark them