Today’s goals:

• Learn how to set up a webpage with Bootstrap
• Begin self-paced Bootstrap tutorial

 Today’s featured sites:

• https://hackerthemes.com/bootstrap-cheatsheet/– A useful tool to help with Bootstrap! Let’s spend some time looking at some of these. Let’s also check out http://www.codeply.com/go and try building a page so we can immediately preview the page along with examining the code.

 Setting up a Bootstrap webpage

1. Let’s open our Bootstrap cheat sheet. Let’s click “highlight new in v4” so we don’t use those accidentally (we are using v3.3.7).
2. Open Notepad++ and create a new webpage
3. Add opening and closing html, head, and body tags. Save this page as bootstrap1.html
4. Let’s add the files we need for Bootstrap to work- the Bootstrap style sheet and JavaScript file and jQuery, a JavaScript library Bootstrap uses. We are going to use the CDN links for these rather than download Bootstrap’s files. Let’s get the files from here. We are going to copy and paste the Bootstrap style sheet into our head section and then add the JavaScript files to our webpage just above the closing body tag. Why are we doing that?
5. To begin our Bootstrap page, we’ll add div class=”container” as our first tag in our body section. Make sure you add a closing div tag and space that down to leave room for the rest of our code.
6. Now we are going to add rows and columns to create our page layout. Like Skeleton, columns go inside rows and add up to 12. Let’s begin by adding div class=”row” and again, make sure you add a closing div tag and space that down a few lines.
7. Let’s add one of Bootstrap’s column classes, md (or medium). Inside our row, let’s add div class=”col-md-4″ and then add a background color by typing style=”background-color: lightblue;”. Copy and paste this twice so we have 3 columns (3 x 4 = 12).
8. Let’s add one more row and use Bootstrap’s xs column class (extra small for small screens). Add div class=”row” and then inside the row div class=”col-xs-4″ style=”background-color: pink;”. Copy and paste this twice so we have another row with 3 columns.
9. Let’s launch our page in the web browser (Firefox or Chrome) to see what’s going on. What happens when we shrink the page? Why?
10. Let’s try to create a less symmetrical layout by adding offsetting columns. Let’s grab the code from Bootstrap’s sample and add it to our page.
11. Explore the Bootstrap cheat sheet. Try adding some code from there to your practice page.

 Use Bootstrap to Create a Webpage for a (fake) Band!

• Make sure to check your code against the full code (link below) or tutorial code (link also below) when you’re stuck
• Important links:
  • Demo of page you’re creating– Right click on page, and select “view page source” to see the code (this will be slightly different than ours but is still useful)
  • Tutorial steps
  • W3 Schools tutorial we’re following (we’re doing something different but this is still helpful)