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
Zac Smith
1,213 PointsWhen to use CSS in Bootstrap
In the Prototyping With Bootstrap lesson it appears that you can just use classes on different elements to achieve floating, background color, etc. If I wanted to change the background color on the buttons to a different color than the Bootstrap CSS offers, then how do I achieve that? Do I just make a new CSS and use IDs a lot? Thank you very much.
1 Answer
Stone Preston
42,016 Pointsyou can create a new stylesheet and override the bootstrap styles for whatever classes you are applying. for example
if you applied the btn class to an html element and wanted all your buttons to have a color other than what bootstrap uses, you would just override the background-color attribute of the btn class:
/* in your custom css file */
btn {
background-color: pink;
}
that would make all elements with the btn class have a pink color, but still have all the other bootstrap styles.
when linking your stylesheets, make sure you link the bootstrap stylesheet first and your custom stylesheet after. that way the styles in your custom sheet can override the bootstrap styles
as Rui pointed out, usually you want to preserve the bootstrap styles. so you may want to just create a new class and apply that in addition to the bootstrap class
Zac Smith
1,213 PointsOkay that is what I was wondering. Thank you very much.
Jaime Rios
Courses Plus Student 21,100 PointsIs it a good practice to do so?
Rui Bi
29,853 PointsRui Bi
29,853 PointsThe best way would be to create your own stylesheet, but try to do things in a way that extends Bootstrap.
For example, if you wanted a really red button and are not satisfied with btn-danger, you can simply create a class called btn-red. Then you can style the btn-red class to have the colors you want, and replace btn-danger with btn-red in your markup. Also remember to not remove the btn class from your markup. That way your button both maintains the look of the button but can have custom colors. You always want ways to extend functionality with features, rather than redefine them.