Adding Bootstrap to a web site is a very simple process, and brings immediate benefits.
To add Bootstrap to a web site you download the Bootstrap CSS file and link it into your site's pages just as you would link in your own CSS file.
Although you can download the Bootstrap CSS file from getbootstrap.com, I recommend going to bootswatch.com instead. There you will find several alternative themes so you can find a variant of Bootstrap that more closely fits your needs. Just click the download button for the theme you would like to use. This will show the bootstrap.min.css file in your browser. Save a local copy of that file to use as your Bootstrap CSS file.
For the lecture notes on Bootstrap for this site I used the Journal theme from bootswatch.com.
In addition to usual <link> element you use to link in the style sheet, Bootstrap
also recommends that you put an additional meta element in your pages' header:
<meta name="viewport" content="width=device-width, initial-scale=1">
One of the first useful features of the Bootstrap library is well-developed, consistent styling for all of the HTML elements you are used to working with, including headings, links, and typography.
This page contains a couple of nice examples. In the section above this I made use of the HTML
<code> and <pre> elements. Bootstrap styles those elements for me
automatically with no additional effort on my part.
If you would like to go beyond the basic appearance of elements that Bootstrap provides, Bootstrap
offers a large collection of modifier classes that can be used to customize the appearance of HTML
elements. For example, you can change the text color used for text elements such as <p>
and header elements by adding classes such as text-primary,
text-warning and text-success.
I have used the text-info class to modify the appearance of
<h3> elements on this page.
Bootstrap is also highly customizable. One consequence is that you will find a large collection of Bootstrap themes available online. Each theme modifies the basic design of Bootstrap to deliver a distinctive look and feel.
To use a Bootstrap theme you just have to download the CSS file for that theme you want and drop it into your site in place of the standard Bootstrap CSS file.
A number of free alternative themes are available on the Boot Swatch web site.