code icon

CSCI 1720

Intermediate Web


Bootstrap II

  1. On your external drive, inside your userid.csci1720.net/labs folder, make a new folder named bs-2
  1. Download the bs-2.zip file and extract the files/folders (the easiest way to do this is to right-click on the bs-2.zip file, hover over 7-Zip, and left-click 'Extract Here') to the bs-2 folder

To save a little time and grief, I've provided the finished bootstrap.html file, the finished style.css file, a landing page (with its own CSS), the navbar code for the navbar I want you to use (it seemed like telling you to go to the examples page and copy the code for the sixth one carried with it the potential for a great deal of confusion – you'll still get to modify it), and an icon image

  1. Open the bs-2 folder in Brackets
  1. Open bootstrap.html

What we're going to do is convert bootstrap.html into a template file. The template will have all of the code that will be common to the pages we're going to create later

Create the Template

  1. Since bootstrap.html is done (well, not really, but we'll get to that), save it again as (File→Save As) template.html
  1. This will be our working file for creating the template. We can make changes without having to worry about messing our original file up
  1. In the <head> element, delete the content of the description and keywords meta elements, leaving the quotes. Obviously, since your name isn't going to change from file to file, you can leave it (remember, there's only one Jack Ramsey in this class…please use your own name!)
screen shot
Fig. 1- Prepping the meta information
  1. Delete the contents of the <title>...</title> element
  1. Save the file
  1. In your browser, navigate to Get Bootstrap
  1. Copy the JS, Popper, and jQuery links
screen shot
Fig. 2- Adding jQuery, Popper, and Bootstrap JavaScript files

At this point, we don't have to really understand the JavaScript to make use of it. As I mentioned in lecture, many of Boorstrap's components use JS; for example, the navbar we're going to add today

  1. Paste the links just above the </body> (that's the closing </body> tag) tag in the document (once again, in case I forgot to ask earlier, why do you think we're pasting the JavaScript links at the end of the page instead of inside the <head> element? Inside the <head> element would work, but there's a reason for putting it at the bottom of the <body>)
  1. In the <body> element of the document, delete rows 2 and 3
  1. Delete the last column in row 1
  1. Change col-md-4 in the remaining columns to col-md-6 and delete their content and the blockquote element, leaving the heading and paragraph elements empty
screen shot
Template for BS Files

This gives you a basic two column setup that can be easily modified to suit your future needs

Navbar

  1. Bootstrap has so many navbar variants, I decided to pick one and provide you the code for the one I want us to use today
  1. Open bs-nav.html in Brackets. Copy the code
  1. Paste the code inside your container <div>. It should be the first element. Make sure to correct the indentation, if necessary
screen shot
Fig. 3- Adding the navbar
  1. This is our starting point, what you would get if you copied a navbar template from getbootstrap.com. From here, we need to customize it. On the third line, delete navbar-light and change bg-light to bg-blue
  1. On the fourth line, change the 'Navbar' link's href from '#' to 'index.html' and the display text from 'Navbar' to 'Home'
  1. Change the href for the 'Features' link to 'bootstrap.html' and the text to Bootstrap

This second link is to the file you created in our last lab. I've found, over the years, that copy/pasting reusable code saves a lot of time, and a little sweat

One thing those of you pursuing a career in IT should ALWAYS keep in mind is AUTOMATION -- if I'm typing this over and over [and over!] again, how can I get away from that? One of the essential features of automation is idempotence. What the heck does THAT mean?? It means that you write code that will execute again, again, again, AND AGAIN, producing the exact same results. When you do everything by hand, it is not idempotent, not only does it mean more work for you, but it also means that you have more opportunities to screw up what you're trying to do by mis-typing something

  1. Change the third link ('Features') to 'carousel.html' and the text to 'Carousel.' Delete the fourth ('Disabled') link. Save the file and launch the page with Live Preview
screen shot
Fig. 4- Updated navbar
  1. That sort of works, but not too well with our color scheme. So open css/style.css in Brackets
  1. We're going to override some of Bootstrap's CSS. Create a rule for the .bg-blue class with the following rule
screen shot
Fig. 5- Modifying the CSS

Remember earlier, when we first pasted in the navbar and changed some of its classes? Here's the CSS to make it work

  1. Save, return to your browser, and reload the page
screen shot
Fig. 6- Getting there...
  1. That's a little better, but we want the text to be gold – easy enough -- so add
screen shot
Fig. 7- Gold text

What's really neat here is that we're using the 'Cascading' aspect of CSS to override classes that are actually defined in Bootstrap (as opposed to our own custom classes), to make them behave the way we want them to

Including the '.fa' class makes the 'hamburger' gold as well. If you look at the <head> element, you'll see a link to Font Awesome, which is an archive of free (and paid for, but we're using the free ones) icons, including fa-bars, which is the icon we want. Look in the navbar code and you'll see it included as a <span>

screen shot
Fig. 8- Gold text...
  1. Add three final classes to style.css
screen shot
Fig. 10- Finishing the custom CSS

This will make the navbar link to the page that's designated as active in the navbar display with a bottom-border, giving the user visual feedback regarding where he or she is on the site's navigational structure

  1. We now have a working template that we can use for future files
  1. Oops! I missed something. In your template.html page's navbar, highlight and copy the navbar code. Open bootstrap.html in Brackets. Paste that code inside the page's container <div>. Now bootstrap.html has a navbar, too
  1. Add the 'active' class to the Bootstrap link in bootstrap.html
screen shot
Fig. 10a- The 'active' class

Now the bootstrap.html page also has a navbar. Right now, the Home and Bootstrap links work, but not the other (Carousel). I think I sense an upcoming homework assignment…

  1. Finally, copy & paste the JS, Popper, and jQuery links from the bottom of template.html to the bottom of bootstrap.html
  1. Refresh your template.html page in the browser. It should look something like this
screen shot
Fig. 11- Finished template

Uploads and Such

  1. Save all of your work. Log in to your csci1720.net account (userid.csci1720.net) using FileZilla (host: csci1720.net; userid: etsuid; password: *********)
  1. Double-click on your labs folder
  1. Right-click in the whitespace in the lower-right pane and select 'Create new directory and enter it'
  1. Name your new directory bs-2
  1. From left to right, copy your files and folders to your /labs/bs-2 directory
  1. Right-click on template.html (on the right side). Click 'Copy URL(s) to clipboard'
  1. Return to your browser and open a new tab
  1. Paste the URL into the address bar
  1. Delete the ftp:// part and change the @ to a dot (.)
  1. Hit Enter. Admire your work. Fix any errors that appear

If you're interested in checking the page's responsiveness, check the developer tools' Responsive tool (F12 or Right-click→'Inspect'). Or just resize the browser window. If everything's working properly, when the display width gets to 991px, the navbar should collapse and be replaced by a 'hamburger'. Click the hamburger to ensure the navbar is functioning properly

  1. When all is well, copy the URL of your template.html file to a new text file in Brackets. Save the file as bs-2.txt and upload it to the D2L BS-2 folder.

Have a nice day 😊