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)
• W3 Schools tutorial we’re following  (we’re doing something different but this is still helpful)

Tutorial steps

• We are going to make a page that looks like this – YES, YOU CAN! (this tutorial is from W3Schools )
• Move ahead at your own pace by completing the steps below. You can talk to each other for help. All of the code and steps are also here  (we’re not doing everything exactly that’s here but you can still use it as a guide)
1. Let’s begin by setting up a basic page and adding the CDN links for Bootstrap’s CSS and JavaScript files and for jQuery. Grab the code from here , copy into Notepad++, and save as bootstrap_band.html.
2. Let’s set up a container and add a headline and two paragraphs

   <div class="container">
   <h3>THE BAND</h3>
   <p>We love music!</p>
   <p>We have created a fictional band website. Lorem ipsum..</p>
   </div>

3. Add the .text-center class to center the text inside the container and let’s make the “We love music” text italic

   <div class="container text-center">
   <h3>THE BAND</h3>
   <p><em>We love music!</em></p>
   <p>We have created a fictional band website. Lorem ipsum..</p>
   </div>

4. Let’s set up an internal style sheet in the head section so we can have custom CSS. Add .container inside the style tags and add padding to the container with values of 80px and 120px (for top/bottom and left/right).
5. Create three columns of equal width (.col-sm-4). Let’s begin by adding div class=”row” and then div class=”col-sm-4″

   <div class="row">
   <div class="col-sm-4">
   </div>
   Repeat this code 2 more times
   

6. Now add paragraph tags below div=”col-sm-4″ and add the word name in bold tags. Do this in each of the 3 sections. Make sure to add a line break after each paragraph.
7. Now add image code below each paragraph like this

   <img src="http://www.w3schools.com/bootstrap/bandmember.jpg" />

8. We’re now going to make the picture more interesting with Bootstrap’s image circle class and some custom CSS. First, add .person and .person:hover to your style sheet in your head section.
9. For the .person class, add a border declaration of 10 px solid transparent; margin-bottom: 25px; width: 80%; height: 80%; opacity: 0.7; (this all should go inside your style tags in your head section)
10. For person:hover, add border-color: #f1f1f1;
11. Now, add class=”img-circle person” to each image like this

    <img src="http://www.w3schools.com/bootstrap/bandmember.jpg" class="img-circle person" />

12. Now we’re going to make the images collapsible and show or hide content when click on. Let’s begin by adding a link around each image with a source of #demo. Then let’s add data-toggle=”collapse” after the source like this

    <a href="#demo" data-toggle="collapse">IMAGE CODE HERE</a>

13. Now we have to add a div id with demo and a class of collapse below each image like this

    <a href="#demo" data-toggle="collapse">IMAGE CODE HERE</a>
    <div id="demo" class="collapse">
    <p>Guitarist and Lead Vocalist</p>
    <p>Loves long walks on the beach</p>
    <p>Member since 1988</p>
    </div>
    

14. Ideally, we’d do something different for each image but to keep it simple we’ll just repeat that twice. The only thing we will change is numbering the following demos 2 and 3.
15. First major code check– see here if you need help 
16. Now we are going to take advantage of one of Bootstrap’s JavaScript features by adding a carousel of images. To make this as simple as possible, we are just going to copy and paste the code completely. Before we do that, let’s check out the carousel feature on the Bootstrap website . Now, grab this code  and paste it above your container tag. Notice the use of glyphicons  for control buttons in the carousel.
17. Now we are going to style the carousel with some custom CSS. Copy and paste this code  into your internal style sheet.
18. We’re now going to add the tour dates section. First, let’s add some things to our style sheet. Add .bg-1 with background: #2d2d30; and color: #bdbdbd;. Add .bg-1 h3 with color: #ffffff; and .bg-1 p with font-style: italic;. Add .fan with margin: 0px auto; and padding: 5px;
19. Now let’s add these into our HTML. We’re going to add this chunk of code  at the bottom of the page above the JavaScript files.
20. Another code check here 
21. Now we will use Bootstrap’s label and badges  to highlight concerts that are sold out. Next to September, add this for Sold Out

    <span class="label label-danger">Sold Out!</span>

22. Do the same thing for October. Then, for November, put the span around the number 3 and change the class to badge.
23. Now we’re going to use Bootstrap’s thumbnails below the tour dates section.
24. Like you did earlier, create three columns of equal width (.col-sm-4). Let’s begin by adding div class=”row” and then div class=”col-sm-4″

    <div class="row">
    <div class="col-sm-4">
    </div>
    Repeat this code 2 more times
    

25. Now add image code in each one, two paragraphs, and a button. We’re also going to add a thumbnail class right below col-sm-4, like this

    <div class="row">
    <div class="col-sm-4">
    <div class="thumbnail">
    <img src="http://www.w3schools.com/bootstrap/paris.jpg" />
    <p>Paris</p>
    <p>Fri. 27 November 2015</p>
    <button class="btn">Buy tickets</button>
    </div>
    

26. Repeat that code twice and change paris in the image name to newyork and sanfran. We’ll leave the dates the same just to make it easier.
27. Now it’s time to create a pop-up window to buy tickets. You’re using Bootstrap’s modal component . First, add data-toggle=”modal” data-target=”#myModal” after class=”btn” for your ticket button. This will make the buy tickets pop-up window come up when the button is clicked on.
28. Now we need to add the code for the pop-up window. Copy this code  and paste it at the end of your page.
29. Check code here 
30. We’re going to add a Contact section below the tickets section. We’re going to create a container (div class=”fan”) with a row that has two columns (col-md-4 and col-md-8). The row has a class of test. Before we add the columns, there is an h3 with a class of text-center that says “Contact” and a paragraph with a class of text-center that says “We love our fans!”
31. Add this code to col-md-4  and this code to col-md-8 
32. Check code here 
33. Now we’re going to add tabs below the contact section with quotes from the fake band members. Add .nav-tabs li a to your style sheet and add color: #777777;
34. Now let’s add an h3 with a class of text-center and say “From the Blog.” We’re going to add bullets below this that will serve as our tabs. Begin by adding a ul with a class of nav nav-tabs. Then add three li’s for the bullets, which we have styled to appear as tabs, with Mike, Chandler, and Peter.
35. Each li is going to have a link. Let’s add them now around each name. After the a add data-toggle=”tab” for each link. The href will be “#home”, “#menu1”, and “#menu2″. Finally, let’s add class=”active” to the first li. Example

    <a data-toggle="tab" href="#home" class="active">Mike</a>
    

36. Now let’s add our tab content by copying and pasting this code  below.
37. It’s time to add a nav bar at the top of the page to serve as a menu. Copy and paste this code  at the very top right below your opening body tag.
38. Add this code  to your style sheet to make the nav bar look better.
39. We can add code to our HTML to highlight the sections people have scrolled through in the menu automatically (Bootstrap’s Scrollspy  does this). For example, if they scroll down to the tour section, the word tour in our menu will be highlighted. To do this, replace your body tag with

    <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">

    Then, for each different section (band, tour, and contact), find where it says div class=”container” and add id=”band”, id=”tour”, and id=”contact” right after div and before class.

    <div id="band" class="container text-center">

40. Check code here 
41. Finally, let’s add a footer! Create a footer tag (the word footer in brackets) and add your name in there. Now let’s style it by adding this code  to our style sheet.
42. Give the footer a class of text-center to center the text. Now we’re going to put an arrow in there that can be clicked to go back to the top of the page. You are going to add some code before your name to provide the clickable arrow and some JavaScript after your name to make it work. Copy and paste this code  around your name in the footer.
43. You’re basically done! Congratulations! If you want, you can do the final two steps in the tutorial to add smooth scrolling with jQuery and to add a different font (scroll down to smooth scrolling in this tutorial ).
44. Final code check  (without scrolling and font additions)