Building a Boot Strap Website

Thu, Apr 06, 2017
Assignment
Turn in mid-term after spring break.

Including Bootstrap in your web page

To include Bootstrap CSS in your web page, you need first download the Bootstrap library from their website.

Next, let’s use the boilerplate template from their website, which has many other meta tags that are useful to enabling responsive design on mobile devices, as well as fallbacks for older browsers.

We’ve listed the HTML template from the Bootstrap site here:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Copy the above text, then paste it into a blank TextMate or Sublime document. Save it as index.html in the Bootstrap folder you downloaded.

A good folder structure is to also create an assets folder for all of your images and videos media.

Bootstrap folder structure

Adding a navigational bar

The first step for most student projects is adding a navigational bar. The Bootstrap navbar is a great option because it comes with a lot of responsive features built-in, including a hamburger button for mobile view. Remember, you can style the look of this navbar to fit the style of your website. The full documentation for the navbar can also be found on the Bootstrap website.

Bootstrap navbar

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <!-- Mobile Hamburger button -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">YOUR LOGO</a>
    </div>

    <!-- The desktop version of the nav bar -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      
      <!-- left aligned links. Remove if you only want right-aligned -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      
      <!-- right aligned links. Remove if you only want left -->
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>

  </div><!-- close .container-fluid -->
</nav>

Optional Nav Bar Classes

Fixed to the top is an option lots of students use. This will keep the navbar visible even when the user scrolls down. Just add the navbar-fixed-top to the class names of the <nav> element.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    ...
  </div>
</nav>

Inverted color navbar is another option students use often. This is for darker themed projects. Just add navbar-inverse class to the <nav> element.

Bootstrap navbar

<nav class="navbar navbar-inverse">
  ...
</nav>

Making a “sticky” Navbar that attaches when scrolled.

If you want the navbar to appear a little further down the page and then stick to the top of the browser as the user scrolls down, include the jQuery snippet at the bottom of your page. Make sure this goes inside a <script></script> tag, after jQuery is loaded.

jQuery(document).ready(function ($) {

  var navContainer = $("<div />")
    .height($("nav.navbar").eq(0).height())
    .insertBefore($("nav.navbar").eq(0));

  $("nav.navbar").eq(0).appendTo(navContainer);
  
  var hdr = $("nav.navbar").offset().top;

  $(window).scroll(function () {
    if ($(this).scrollTop() > hdr) {
      $("nav.navbar")
        .eq(0)
        .css({"position":"fixed", "top":0, "left":0, "width":"100%"});
    } else {
      $("nav.navbar")
        .eq(0)
        .css({"position":"relative"});
    }
  });
});

Background Video

A popular style with students is creating a background video for their website. These are videos that autoplay continuously in the background. The idea is to use the <video> tag and link to your mp4 file. Then use CSS to position it absolutely on the page so that it’s underneath the title.

First, the HTML:

<header>
  <div class="hgroup">
    <h1>Project Title</h1>
    <h2>A subhead for your project here</h2>
  </div>
  <video class="background-video" autoplay muted loop>
    <source src="/assets/videos/your-video.mp4" type="video/mp4">
  </video>
</header>

Then style the video and title with CSS. The @media query will ensure that the video fills the entire div.

You should position the title and subhead (h1, h2) in the exact position you wish using top and left properties (left off of the code below). If you have a fixed navbar, you will need to account for this. The Bootstrap navbar is 50px tall. You could add 50px of margin-top to the header.

header{
    position: relative;
    height:0;
    padding-top: 56.25%;
    overflow:hidden;
}

header .hgroup{
    position: absolute;
    text-align: center;
    z-index: 10;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

video.background-video{
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
  height: 100%;

}

@media (min-aspect-ratio: 16/10) { 
    video.background-video{
        height:auto;
        width:100%;
    }
}

Design Patterns for Text-Driven Stories

Below is an example of several design patterns of a long text story integrating photos in different ways. This assumes Bootstrap is included.

<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <figure>
                <img src="http://placehold.it/600x400" class="img-responsive" alt="photo description">
                <figcaption>Caption for above photo</figcaption>
            </figure>
        </div>
        <div class="col-xs-6">
            <figure>
                <img src="http://placehold.it/600x400" class="img-responsive" alt="photo description">
                <figcaption>Caption for above photo</figcaption>
            </figure>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <figure>
                <img src="http://placehold.it/1600x1000" class="img-responsive" alt="photo description">
                <figcaption>Caption for above photo</figcaption>
            </figure>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>