Assuming you are using the basic Bootstrap navbar, something like below:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
Then change it to the below (navbar-light and bg-light) are just a couple of a number of alternative default colors/background you can deploy using the bootstrap helper classes but if you want to set your own then you don't need them;
<nav class="navbar navbar-expand-lg">
<style>
/*This will change the navbar background-color*/
.navbar {
background-color: tomato;
}
/*This will change the navbar links color*/
.navbar a {
color: #fff!important;
}
/*This will change the navbar links hover color*/
.navbar a:hover {
color: #000!important;
}
</style>
Obviously DONT make the changes in the bootstrap.css file. You make your changes in an additional stylesheet you link to the page AFTER the link to the bootstrap.css file or you can add them in a <style></style> tag block in the <head></head> section of your page, again as long as the block is inserted AFTER the link to the bootstrap.css file.
Personally I would advise against using Bootstrap until you are proficient in writing css at which point Bootstrap becomes pointless. Its a framework, hugely full of redundant bloat, not only css but html mark-up when you use the default method of deploying it and far too complex to spin up a bespoke version for the beginner. Its quite outdated as the new way forward is to use css grid for layout which Bootstrap is not likely to get for a couple of years despite v5 coming out later this year, its behind the curve in terms of what more advanced developers are now integrating into their constructions.
If you must use it then I would suggest getting familar with your browser development tools. They will show you what css is being deployed if you click on a component, it should then be easier for you to amend the css.
6
Replies
AdChoices