Setting Up Bootstrap


Bootstrap?

Bootstrap by Twitter is a rather nifty platform to help define and use websites that have some nice features, look good, and are pretty consistent in appearance. They also tend to be "responsive", particularly if you use the grid system in Bootstrap. The term "responsive" refers to resizing the browser, and/or using the same site on different devices, such as a phone or tablet computer.

However, like a lot of things, getting started can be a little daunting. The goal of this page is to just help you get the right files in the right places.

Getting the Files

There are of course multiple ways to work with a lot of what is available on the web. Recently there was an example of a JSNODE application that had some serious issues. The developer of a plugin had named his plugin something that ended up becoming (after it was used by a lot of developers) a trademarked or copyrighted name. He was ordered by a judge to rename his software. He took it down. This crashed a TON of websites, because software like JSNODE references the original software and the developer does not have to store it "locally".

I hate having to depend on other websites, so I tend to not use what are called CDNs (Content Delivery Network) URLs to access something like Bootstrap, or other software. Instead, I prefer to download the files and store them on my work area, as well as upload them to the website I am using them on.

You can download the files needed for Bootstrap by going to their website: [Get Bootstrap] and click the link on the main page. You will be taken to another page. I suggest using the first button "Download Bootstrap". This will download a .zip file.

There are then several things you need to do. Open the .zip file you just downloaded and copy files out as noted below.

Placing the Files In The Appropriate Locations

I recommend setting up folders for your website, such as:

If you open the .zip file, you will see a "distribution" folder, if you open that you will see three folders: css, js, fonts. I recommend copying the following files out to the appropriate locations:

The reason for the first two is that you may want to actually look at the contents of the bootstrap.css file, but I recommend using the .min version, because it is "minimized" -- meaning that it loads a little faster for your pages.

Setting Up Your Page

In the "head" section of your web pages, you will need some specific tags set up to load the files needed, and toward the bottom you will need some other tags.

In the header of the page, you should start with these lines:

               <meta charset="utf-8">
               <meta http-equiv="X-UA-Compatible" content="IE=edge">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
            

Note: For these pages, everything is in PHP files, and I have placed the header and menu in a special file so I don't have to modify the menu each time. The footer is also in its own file. Both of these are inserted into the document using PHP include function calls.

From there, you might want to place your page title (the <title> tag, etc.) and whatever else you might want -- meta tags, etc.. Then for Bootstrap:

               <!-- Bootstrap style sheet -- handy if I choose to use a different theme
                     from the Bootswatch site -->
                <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
                <!-- Optional Bootstrap theme -->
                <link rel="stylesheet" href="bootstrap-theme.min.css" />
            

The theme file gives you some of the three-d effects and such. As noted above, the Bootswatch site can be used to get different themes from, some are free, some are not. [Bootswatch] Downloading and changing the theme file should allow the appearance changes across a whole site, which is rather cool.

You will need to set up both jquery (used by Bootstrap for many of the effects such as dropdown menus, and more), and the Javascript file for Bootstrap, toward the bottom of your page, before the end tags for the page. (See note above for the location of the footer for these files ...)

While I mentioned above that I don't like using CDNs, I tend to use one for jquery, because it is updated quite often. You could however download it and put in the shorter reference to it instead.

               <!-- Bootstrap core JavaScript
               ================================================== -->
               <!-- Placed at the end of the document so the pages load faster -->
               <script src="https://code.jquery.com/jquery-3.1.1.min.js"
                       integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                       crossorigin="anonymous">
               </script>
               <script src="jscode/bootstrap.js"></script>
            

Start Using Bootstrap

With that done, you are now ready to start working with Bootstrap. The files should be in place, and now it's time to learn ... there are many ways to learn, I find often just trying things. Find something on the main Bootstrap site and say "This looks cool!" and try using it. Note the appearance of the text and the headers for your page. Note the difference in the appearance of the horizontal rule below ... and so on.

Extra Symbols -- Font Awesome

While Bootstrap has their glyphicons, there is another resource (used often in my CMS and on some of the pages here) called Font Awesome that is designed to work with, among other things, Bootstrap. I recommend you consider getting it and using it. If you are following along here to get set up to use either the GSP CMS or GSP Grid, then you will need to use Font Awesome.

First step is to download the current version: [Font Awesome], and then unpack/unzip the file.

Copy the content of the fonts folder in the .zip file to the fonts folder for your working area.

Copy the file from the css folder "font-awesome.min.css" to your css folder.

Add the following to the head section of your page:

               <!-- font-awesome -- don't remove this -- various images on the site come from FA -->
               <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
            

To see the fonts available, on the main Font Awesome web page (see above), click the Icons menu item, and then you can scroll through, or search for something. When you find what you're looking for, click it, and you will be given a set of tags that need to be copied into your code. These might look like:

               <i class="fa fa-envelope-o" aria-hidden="true"></i>
            

Summary

Bootstrap is a rather amazing tool. I have built some cool looking websites with very little effort through the use of it. However, it is not the only framework out there. During one of my online courses we took a brief look at [Semantic UI] which has a lot of the capabilities of Bootstrap, with a slightly different look, and some of the options make more sense (instead of naming a button <button class="btn btn-success btn-lg"> to get a large green button, you would use: <button class="ui large green button">, and so on)