Adding Custom CSS to a Bootstrap 3 Mockup

As you probably remember from the initial template html we added three stylesheets to our document

The third one is where we’ll place a few styles to tweak the appearance and put the finishing touches on the site.

Open the  main.css file in your code editor.

You’ll need to create several selectors for the following elements…


(Set Font and separate Jumbotron Element from the Fixed Navbar)

footer a, footer a:link, footer a:visited

(Add color to the footer links)


(Pulls in main hero background image)

.jumbotron h1, .jumbotron p

(Set text in Hero unit to white and adds a drop shadow)

If you prefer add the entire block to your css file you can grab the whole block below…

At this point you should save your files and go check them out in the browser. Feel free to add / edit / hack away at the code used in this example. I hope you learned something and feel free to contact me if you have any questions. The finished product should look like this.