File Linking using CDNs (Content Delivery Networks)

Now we're going to include Bootstrap's stylesheets (and JavaScript files)! While we can download them from Bootstrap's website and manually place them in our directories, there's a faster way to include them. CDNs let you pull CSS and JS files using the *Internet*, rather than from your local directory.

Add this code to the head of your HTML:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
                

Add this to the bottom of the body of your HTML:

<!-- JavaScript's jQuery library is also necessary for Bootstrap-->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!-- Latest compiled and minified JavaScript for Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                

The Navbar

The Navbar! This code will supply your page with a navigation bar. Add it to the top of your body.

<!--Navbar begins-->
<div class="navbar navbar-default navbar-static-top ">
  <div class="container">
    <div class="navbar-header">
    <a href="#" class="navbar-brand">Website Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button></div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Menu<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Drop 1</a></li>
            <li><a href="">Drop 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<!--Navbar ends-->

You can change the color of the navbar by changing 'navbar-default' to 'navbar-inverse'. The navbar can be customized even more, but that is beyond the scope of this tutorial.
Watch what happens to the navbar when you shrink the window

Jumbotron

Jumbotrons are useful for landing/home pages.

<div class="jumbotron">
  <h1>Welcome!</h1>
  <p>How's it going?</p>
</div>

Can you figure out how to fix the text alignment?

Buttons

This is the code necessary to add buttons.

<a class="btn btn-primary btn-lg" href="tutorial/part1.html" role="button">View Portfolio</a>