Menu
How should one customize bootstrap elements? Should I use the exact same bootstrap classes in my custom.css or should I create new classes for every customization?
768
I would recommend making new classes and adding that class to the HTML element in addition to the bootstrap class. That way you can overwrite AND add info to the bootstrap class and modify the element exactly as you want it.
Why like this?
This is a cleaner way because if someone else who know bootstrap comes in and works in your project you want to be able to reach the default un-changed bootstrap classes.
160
1. Do not modify the bootstrap.css file
It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).
2. Create your own css file and overwrite whenever you want original bootstrap stuff
if they set a topbar with, let's say, color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.
Add a Custom Stylesheet
Create a new file in your Bootstrap CSS folder and call it custom.css.
Now in the portion of your website, load your new custom CSS file after the default bootstrap stylesheet. It should look like this.
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
Applying Custom Styles To modify or apply additional styling to your web page, simply add the proper code to your custom.css file. There is no need to edit any of the original Bootstrap styles directly.
For example, if you decided that you did not like the rounded corners on the buttons, you could apply the following style in your custom.css file.
.btn {
border-radius: 0px;
}
Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded. This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.
The upside to adding your own custom stylesheet after the default bootstrap stylesheet is that in the event that Bootstrap gets upgraded, you can simply replace the Bootstrap stylesheet with the new one and your custom styles will remain untouched. Note that for major upgrades, you may need to modify your custom styles. Nevertheless, even major upgrades will still be much easier using this approach.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
