Lesson Thursday

You will often be using Bootstrap to style your pages. The Bootstrap website documents in detail how to use all of the styles it provides. Just take the time to read through the documentation (and make sure to refer back to it whenever necessary!).

Also, there are many, many themes available online for free, and many people have built on Bootstrap to create themes of their own (just search for bootstrap themes and you'll get a huge number of results).

Anyway, you'll often start with a theme like Bootstrap and also want to add some of your own custom styles on top of Bootstrap's. To do this, you could go into Bootstrap's CSS and change their styles, but this isn't a good idea. If a new version of Bootstrap is released you would have to go find all of the changes you made to your Bootstrap CSS file and port them over to the CSS file from the new version.

Instead, it's a better idea to leave the original file untouched, and create your own stylesheet to override some of Bootstrap's default styles with your own.

Here's an example of how we could override Bootstrap's styles to make the <h1> headings bold and blue:

bootstrap-playground.html
<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>A bit of Bootstrap</title>
  </head>
  <body>
    <h1>A bit of Bootstrap</h1>
  </body>
</html>
styles.css
h1 {
  font-weight: bold;
  color: blue;
}

The tricky part is to make sure you're always linking your custom stylesheet below Bootstrap's stylesheet in the <head> tags of your HTML. This is because anytime two stylesheets have rules about the same element (<h1> headings, in this case) the rules in the latter stylesheet will override the rules in the former.

This is because the stylesheet linked first is loaded first. This first stylesheet informs the <h1> element to appear a certain way. But then, the second stylesheet is loaded and it also instructs the <h1> headings to appear a certain way. This second stylesheet's <h1> rule will actually override the <h1> styles from the first stylesheet simply because it loads last.

If we temporarily switched the order of the way these stylesheets are linked:

bootstrap-playground.html
<!DOCTYPE html>
<html>
  <head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <title>A bit of Bootstrap</title>
  </head>
  <body>
    <h1>A bit of Bootstrap</h1>
  </body>
</html>

We could refresh the page and see that our blue text is gone. Even though the CSS for bold, blue text is still present in styles.css, our custom styles are now loading first, and Bootstrap's styles are loading second. Bootstrap styles are therefore overriding our custom styles, so we don't see our bold blue text.

This is why we always want to link our custom stylesheets after Bootstrap stylesheets.

Summary


After integrating Bootstrap, if you'd like to change some of the default styles it is better to write your own stylesheet that overrides those styles than to edit the Bootstrap's.

Because CSS is cascading, styles that appear later will override styles that appear sooner. Therefore, for our styles to take precedence, we must link our stylesheet after the Bootstrap stylesheet in our project, as seen in the <head> tags below:

Examples


Here's an example of how to override Bootstrap's styles to make the main headers bold:

bootstrap-playground.html
<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>A bit of Boostrap</title>
  </head>
  <body>
    <h1>A bit of Bootstrap</h1>
  </body>
</html>
styles.css
h1 {
  font-weight: bold;
}