Teach Yourself Bootstrap Part 2 Code Listings

Part 2: Building and Managing Web Pages with Bootstrap

Sams Teach Yourself Bootstrap in 24 Hours

Hour 5: Grids and How to Use Them

Listing 5.1

<div class="container">
<!-- rows go here -->
</div>

Listing 5.2

<div class="container-fluid">
<!-- rows go here -->
</div>

Listing 5.3

<div class="container">
  <div class="row">
  <!-- row contents goes here -->
  </div>
</div>

Listing 5.4

<!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>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
      aside { background-color: #E8E8E7; }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
    <div class="container">
      <!-- first row - 3 equal columns -->
      <section class="row">
        <aside class="col-md-4"><h2>Column 1</h2></aside>
        <article class="col-md-4"><h2>Column 2</h2></article>
        <aside class="col-md-4"><h2>Column 3</h2></aside>
      </section>
      <section class="row">
        <aside class="col-md-2"><h2>Column 1</h2></aside>
        <article class="col-md-6"><h2>Column 2</h2></article>
        <aside class="col-md-4"><h2>Column 3</h2></aside>
      </section>
    </div>
  </body>
</html>

Listing 5.5

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3">This is a super long column that might not load correctly in all browsers</div>
    <div class="col-xs-6 col-sm-3">short column</div>
    <div class="col-xs-6 col-sm-3">short column</div>
    <div class="col-xs-6 col-sm-3">short column</div>
  </div>
</div>

Listing 5.6

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3">This is a super long column that might not load correctly in all browsers</div>
    <div class="col-xs-6 col-sm-3">short column</div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-3">short column</div>
    <div class="col-xs-6 col-sm-3">short column</div>
  </div>
</div>

Listing 5.7

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-push-4">The first column is eight wide, pushed over four.</div>
    <div class="col-md-4 col-md-pull-8">The second column is four wide, pulled back eight.</div>
  </div>
</div>

Listing 5.8

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 col-lg-offset-1">Column one</div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-lg-offset-1">Column two</div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-lg-offset-1">Column three</div>
  </div>
</div>

Hour 6: Labels, Badges, Panels, Wells, and the Jumbotron

Listing 6.1

<p>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</p>

Listing 6.2

.label {
  -webkit-box-shadow: 2px 2px 2px #dfdfdf;
  box-shadow: 2px 2px 2px #dfdfdf;
  border: medium dotted #fff;
}

Listing 6.3

.label-default {
  background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
  color: #000000;
}

Listing 6.4

<!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>Sample Styled Labels</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
      .label {
        -webkit-box-shadow: 2px 2px 2px #DFDFDF;
        box-shadow: 2px 2px 2px #DFDFDF;
        border: medium dotted #fff;
      }
      .label-default {
        background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
        background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
        color: #000000;
      }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
  <h4>&nbsp;</h4>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
<p>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</p>
      </div>
    </div>
  </div>
  </body>
</html>

Listing 6.5

<p>This is standard content.</p>
<p class="well">This content is inside a well</p>
<p class="well well-lg">This content is in a large well</p>
<p class="well well-sm">This content is in a small well</p>
<blockquote>This content is inside a blockquote</blockquote>
<div class="well"><blockquote>This content is inside a blockquote inside a well</blockquote></div>

Listing 6.6

<div class="panel panel-default">
  <div class="panel-body">
    This is a panel
  </div>
</div>

Listing 6.7

<div class="panel panel-default">
  <div class="panel-heading">
    This is a panel heading without a title.
  </div>
  <div class="panel-body">
    This content is in a panel.
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">This is a Panel Title</h3>
  </div>
  <div class="panel-body">
    This content is in a panel.
  </div>
</div>

Listing 6.8

<div class="panel panel-default">
  <div class="panel-body">
    This content is in a panel.
  </div>
  <div class="panel-footer">
    This is content in a panel footer.
  </div>
</div>

Listing 6.9

<div class="jumbotron">
  <h1>This is a Jumbotron</h1>
  <p>This is content inside the Jumbotron</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Listing 6.10

@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}

Hour 7: Bootstrap Typography

Listing 7.1

<h1>&lt;h1&gt; Bootstrap heading</h1>
<p>This is a paragraph with an <span class="h1">inline &lt;h1&gt; heading</span></p>
<h2>&lt;h2&gt; Bootstrap heading</h2>
<p>This is a paragraph with an <span class="h2">inline &lt;h2&gt; heading</span></p>
<h3>&lt;h3&gt; Bootstrap heading</h3>
<p>This is a paragraph with an <span class="h3">inline &lt;h3&gt; heading</span></p>
<h4>&lt;h4&gt; Bootstrap heading</h4>
<p>This is a paragraph with an <span class="h4">inline &lt;h4&gt; heading</span></p>
<h5>&lt;h5&gt; Bootstrap heading</h5>
<p>This is a paragraph with an <span class="h5">inline &lt;h5&gt; heading</span></p>
<h6>&lt;h6&gt; Bootstrap heading</h6>
<p>This is a paragraph with an <span class="h6">inline &lt;h6&gt; heading</span></p>

Listing 7.2

<h1>&lt;h1&gt; Headline <small>With Secondary Text</small></h1>
<h2>&lt;h2&gt; Headline <small>With Secondary Text</small></h2>
<h3>&lt;h3&gt; Headline <small>With Secondary Text</small></h3>
<h4>&lt;h4&gt; Headline <small>With Secondary Text</small></h4>
<h5>&lt;h5&gt; Headline <small>With Secondary Text</small></h5>
<h6>&lt;h6&gt; Headline <small>With Secondary Text</small></h6>

Listing 7.3

<p>This is a paragraph with a <span class="h1">inline &lt;h1&gt; heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h2">inline &lt;h2&gt; heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h3">inline &lt;h3&gt; heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h4">inline &lt;h4&gt; heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h5">inline &lt;h5&gt; heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h6">inline &lt;h6&gt; heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

Listing 7.4

<!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 Image Replacement</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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]-->
    <style>
      #mainhead {
  background-image: url(images/headline.png);
  background-repeat: no-repeat;
  width:458px;
  height:76px;
      }
    </style>
  </head>
  <body>
  <div class="container">
    <h1 class="text-hide" id="mainhead">Headline</h1>
    <p>And here is the page content.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed erat facilisis, sollicitudin diam sed, condimentum est. Sed lobortis pellentesque odio, eu tristique est commodo non. Duis lacinia rhoncus elit, ut molestie mauris pulvinar ac. Suspendisse ac quam sem. Vestibulum vestibulum porttitor accumsan. Curabitur nunc nibh, fringilla vel sollicitudin sit amet, tristique vel velit. Etiam mattis ante id tempor convallis.</p>
    <p>Morbi semper enim vitae metus viverra pretium. Aenean felis orci, aliquet eu felis elementum, finibus iaculis arcu. Nullam hendrerit laoreet aliquam. Fusce molestie consequat commodo. Integer quis malesuada mi. Cras in libero erat. Sed elementum metus nibh, sit amet tempor dolor dictum quis. Donec nec lectus in justo porta lacinia sollicitudin ac orci. Donec interdum, mauris ac tincidunt imperdiet, ex turpis lobortis nisi, ac dictum sem nisi non augue. Maecenas scelerisque iaculis tincidunt. Praesent eget augue interdum, imperdiet ex a, pellentesque libero. Sed ante tortor, auctor id facilisis sit amet, tristique id tellus.</p>
  </div>
  </body>
</html>

Listing 7.5

<div class="page-header">
  <h1>Page Headline <small>For This Awesome Page</small></h1>
</div>

Listing 7.6

<blockquote>
<p>`Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe:<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
<footer>by Lewis Carroll from <cite title="The Jabberwocky">"The Jabberwocky"</cite></footer>
</blockquote>

Listing 7.7

<p>I wrote a book on <abbr title="HyperText Markup Language 5"
class="initialism">HTML5</abbr> and another on <abbr
title="Responsive Web Design" class="initialism">RWD</abbr>.</p>

Hour 8: Styling Tables

Listing 8.1

<table class="table">
  <caption>Contact Information</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>URL</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jennifer Kyrnin</td>
      <td>Chief Dandylion Officer</td>
      <td>http://htmljenn.com/</td>
      <td>htmljenn@gmail.com</td>
    </tr>
    <tr>
      <td>McKinley</td>
      <td>Dandelion Observation Officer</td>
      <td>http://responsivewebdesignin24hours.com/mckinley</td>
      <td>mckinley@rwdin24hours.com</td>
    </tr>
    <tr>
      <td>Rambler</td>
      <td>Chief Taste Tester</td>
      <td>http://responsivewebdesignin24hours.com/rambler</td>
      <td>rambler@rwdin24hours.com</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"><p>McKinley and Rambler are a dog and a horse, respectively.</p></td>
    </tr>
  </tfoot>
</table>

Listing 8.2

<table class="table table-bordered table-striped table-hover table-condensed">

Listing 8.3

<!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 Table Classes</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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]-->
    <style>
      .table-striped>tbody>tr:nth-of-type(odd) {
        background-color: #d6adfa;
      }
    </style>
  </head>
  <body>
  <div class="container">
    <p>
    <table class="table table-striped">
      <caption>Contact Information</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Title</th>
          <th>URL</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jennifer Kyrnin</td>
          <td>Chief Dandylion Officer</td>
          <td>http://htmljenn.com/</td>
          <td>htmljenn@gmail.com</td>
        </tr>
        <tr>
          <td>McKinley</td>
          <td>Dandelion Observation Officer</td>
          <td>http://responsivewebdesignin24hours.com/mckinley</td>
          <td>mckinley@rwdin24hours.com</td>
        </tr>
        <tr>
          <td>Rambler</td>
          <td>Chief Taste Tester</td>
          <td>http://responsivewebdesignin24hours.com/rambler</td>
          <td>rambler@rwdin24hours.com</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4"><p>McKinley and Rambler are a dog and a horse, respectively.</p></td>
        </tr>
      </tfoot>
    </table>
    </p>
  </div>
  </body>
</html>

Listing 8.4

<div class="panel panel-default">
<div class="panel-heading">
  Learn More About Our Company
</div>
<div class="panel-body">
  Dandelions are more than our business, they are our passion!
</div>
<table class="table">
<caption>Contacts</caption>
<thead>
  <tr>
    <th>Name</th>
    <th>Title</th>
    <th>URL</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Jennifer Kyrnin</td>
    <td>Chief Dandylion Officer</td>
    <td>http://htmljenn.com/</td>
    <td>htmljenn@gmail.com</td>
  </tr>
  <tr>
    <td>McKinley</td>
    <td>Dandelion Observation Officer</td>
    <td>http://responsivewebdesignin24hours.com/mckinley</td>
    <td>mckinley@rwdin24hours.com</td>
  </tr>
  <tr>
    <td>Rambler</td>
    <td>Chief Taste Tester</td>
    <td>http://responsivewebdesignin24hours.com/rambler</td>
    <td>rambler@rwdin24hours.com</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td colspan="4"><p>McKinley and Rambler are a dog and a horse, respectively.</p></td>
  </tr>
</tfoot>
</table>
</div>

Listing 8.5

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Hour 9: Styling Forms

Listing 9.1

<form action="#">
  <label for="firstName">First Name:</label>
  <input type="text" autofocus required id="firstName" placeholder="First Name"><br>
  <label for="lastName">Last Name:</label>
  <input type="text" required id="lastName" placeholder="Last Name"><br>
  <label for="email">Email:</label>
  <input type="email" required id="email" placeholder="Email Address"><br>
  <label for="homePhone">Home Phone:</label>
  <input type="tel" id="homePhone" placeholder="Home Phone" pattern="\([0-9]{3}\) [0-9]{3}-[0-9]{4}"><br>
  <label for="workPhone">Work Phone:</label>
  <input type="tel" id="workPhone" placeholder="Work Phone" pattern="\([0-9]{3}\) [0-9]{3}-[0-9]{4}"><br>
  <label for-"url">URL:</label>
  <input type="url" id="url" placeholder="URL"><br>
  <label for="address1">Address</label>
  <input type="text" id="address1" placeholder="Address (line 1)"><br>
  <label for="address2">Address</label>
  <input type="text" id="address2" placeholder="Address (line 2)"><br>
  <label for="city">City</label>
  <input type="text" id="city" placeholder="City"><br>
  <label for="state">State</label>
  <select id="state">
    <option>State</option>
    <option>Alabama</option>
    <option>...</option>
    <option>Washington</option>
  </select><br>
  <label for="zip">Zip Code</label>
  <input type="number" id="zip" placeholder="Zip Code"><br>
  <label for="country">Country</label>
  <select id="country">
    <option>United States</option>
    <option>...</option>
  </select><br>
  <input type="submit" value="Contact">
</form>

Listing 9.2

<div class="form-group">
  <label for="firstName">First Name:</label>
  <input type="text" autofocus required id="firstName" 
    placeholder="First Name" class="form-control">
</div>

Listing 9.3

<form action="#" class="form-horizontal">
  <div class="form-group">
    <label for="firstName" class="col-sm-3 control-label">First Name:</label>
    <div class="col-sm-9">
      <input type="text" autofocus required id="firstName" placeholder="First Name" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="lastName" class="col-sm-3 control-label">Last Name:</label>
    <div class="col-sm-9">
      <input type="text" required id="lastName" placeholder="Last Name" class="form-control">
    </div>
  </div>

Listing 9.4

<form action="#" class="form-inline">
  <div class="form-group">
    <label for="email">Email Address</label>
    <div>
      <input type="email" required id="email" placeholder="Email Address" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" required id="password" placeholder="Password" class="form-control">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>

Listing 9.5

<form action="#" class="form-inline">
  <div class="form-group">
    <label for="email" class="sr-only">Email Address</label>
    <div>
    <input type="email" required id="email" placeholder="Email Address" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="sr-only">Password</label>
    <div>
    <input type="password" required id="password" placeholder="Password" class="form-control">
    </div>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>

Listing 9.6

<div class="checkbox">
  <label>
    <input type="checkbox" value="one">
    Option one
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="two">
    Option two
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="three" disabled>
    Option three - disabled
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" value="r-one">
    First radio button
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" value="r-two">
    Second radio
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" value="r-three" disabled>
    Third radio - disabled
  </label>
</div>

Listing 9.7

<select id="dropdown" class="form-control">
  <option>pick one</option>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

Listing 9.8

<form action="#" class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <label for="cost" class="sr-only">Amount</label>
      <div class="input-group-addon">$</div>
      <div><input type="number" required id="cost"
      placeholder="Amount" class="form-control"></div>
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-default">Send Funds</button>
</form>

Listing 9.9

<p>    
<div class="input-group input-group-lg">
  <label for="username" class="sr-only">Username</label>
  <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
  <input type="text" required id="email" placeholder="Username" class="form-control">
</div>
</p>
<p>
<div class="input-group">
  <label for="username" class="sr-only">Username</label>
  <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
  <input type="text" required id="email" placeholder="Username" class="form-control">
</div>
</p>
<p>
<div class="input-group input-group-sm">
  <label for="username" class="sr-only">Username</label>
  <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
  <input type="text" required id="email" placeholder="Username" class="form-control">
</div>
</p>

Listing 9.10

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" id="other" aria-label="Other"
        value="other">
      </span>
      <input type="text" id="otherText" class="form-control"
      aria-label="Other Text">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" id="other2" aria-label="Other 2"
        value="other2">
      </span>
      <input type="text" id="otherText2" class="form-control"
      aria-label="Other Text 2">
    </div>
  </div>
</div>

Listing 9.11

#formField:focus {
  border-color: #7B66E9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(170,158,232,0.5);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(170,158,232,0.75);
}

Listing 9.12

<form>
  <div class="form-group has-success">
    <label for="textSuccess">Success</label>
    <input type="text" class="form-control" id="textSuccess" placeholder="Success">
  </div>
  <div class="form-group has-warning">
    <label for="textWarning">Warning</label>
    <input type="text" class="form-control" id="textWarning" placeholder="Warning">
  </div>
  <div class="form-group has-error">
    <label for="textError">Error</label>
    <input type="text" class="form-control" id="textError" placeholder="Error">
  </div>
</form>

Listing 9.13

<div class="form-group has-success has-feedback">
  <label for="textSuccess">Success</label>
  <input type="text" class="form-control" id="textSuccess" placeholder="Success">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>

Hour 10: Images and Glyphicons

Listing 10.1

<img src="images/dandy-header-bg.png" alt="Dandylions" class="img-rounded">
<img src="images/dandy-header-bg.png" alt="Dandylions" class="img-circle">
<img src="images/dandy-header-bg.png" alt="Dandylions" class="img-thumbnail">

Listing 10.2

<div class="media">
  <div class="media-left">
    <img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
  </div>
  <div class="media-body">
    <h4 class="media-heading">My Media Headline</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac mattis mauris. Donec blandit, augue in convallis hendrerit, arcu orci scelerisque neque, luctus gravida magna odio at massa. Sed lacinia fermentum velit vel pretium. In sit amet metus vitae libero iaculis maximus. In felis eros, rutrum sed rhoncus eu, tristique vitae diam. Phasellus condimentum ex ac erat imperdiet pretium.</p>
  </div>
  <div class="media-right">
    <img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
  </div>
</div>

Listing 10.3

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
    </div>
    <div class="media-body">
      <h4 class="media-heading">My Media List Headline</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac mattis mauris. Donec blandit, augue in convallis hendrerit, arcu orci scelerisque neque, luctus gravida magna odio at massa. Sed lacinia fermentum velit vel pretium. In sit amet metus vitae libero iaculis maximus. In felis eros, rutrum sed rhoncus eu, tristique vitae diam. Phasellus condimentum ex ac erat imperdiet pretium.</p>
    </div>
  </li>
  <li class="media">
    <div class="media-left">
      <img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
    </div>
    <div class="media-body">
      <h4 class="media-heading">My Media List Headline</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac mattis mauris. Donec blandit, augue in convallis hendrerit, arcu orci scelerisque neque, luctus gravida magna odio at massa. Sed lacinia fermentum velit vel pretium. In sit amet metus vitae libero iaculis maximus. In felis eros, rutrum sed rhoncus eu, tristique vitae diam. Phasellus condimentum ex ac erat imperdiet pretium.</p>
    </div>
  </li>
</ul>

Listing 10.4

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-2 thumbnail">
      <img src="images/thumb1.png" alt="Pets">
    </div>
    <div class="col-xs-6 col-md-2 thumbnail">
      <img src="images/thumb2.png" alt="Pets">
    </div>
    <div class="col-xs-6 col-md-2 thumbnail">
      <img src="images/thumb3.png" alt="Pets">
    </div>
    <div class="col-xs-6 col-md-2 thumbnail">
      <img src="images/thumb4.png" alt="Pets">
    </div>
    <div class="col-xs-6 col-md-2 thumbnail">
      <img src="images/thumb1.png" alt="Pets">
    </div>
    <div class="col-xs-6 col-md-2 thumbnail">
      <img src="images/thumb2.png" alt="Pets">
    </div>
  </div>
</div>

Listing 10.5

<div class="col-xs-6 col-md-2">
  <div class="thumbnail">
    <img src="images/thumb1.png" alt="Pets">
    <div class="caption">
    My Dogs Shasta &amp; McKinley
    </div>
  </div>
</div>

Listing 10.6

<h1>I <span class="glyphicon glyphicon-heart-empty" style="color: red;"></span> you!</h1>

Listing 10.7

<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>

Listing 10.8

<h1>I <span class="glyphicon glyphicon-heart-empty" style="color: red;" aria-hidden="true"></span> <span class="sr-only">love</span> you!</h1>
<p class="small">
Icon courtesy <a href="http://glyphicons.com/">Glyphicons</a>.
</p>

Hour 11: Styling and Using Buttons and Button Groups

Listing 11.1

<a class="btn btn-default">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input type="button" class="btn btn-default" value="Input">
<input type="submit" class="btn btn-default" value="Submit">

Listing 11.2

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>

Listing 11.3

<div class="container">
  <button class="btn btn-default btn-lg">Large Button</button>
  <button class="btn btn-primary">Medium Button</button>
  <button class="btn btn-success btn-sm">Small Button</button>
  <button class="btn btn-warning btn-xs">Extra Small Button</button>
  <button class="btn btn-danger btn-block">Full Width Button</button>
  <div class="row">
    <div class="col-md-6">
        <button class="btn btn-info btn-block">Half Width Button</button>
    </div>
  </div>
</div>

Listing 11.4

<div class="btn-group" role="group" aria-label="Button Group">
  <button type="button" class="btn btn-default">Fast</button>
  <button type="button" class="btn btn-default">Slow</button>
  <button type="button" class="btn btn-default">Stop</button>
</div>

Listing 11.5

<div class="btn-group btn-group-justified" role="group" aria-label="Button Group">
  <a href="#" class="btn btn-default">Fast</a>
  <a href="#" class="btn btn-default">Slow</a>
  <a type="button" class="btn btn-default">Stop</a>
</div>

Listing 11.6

<div class="btn-group btn-group-justified" role="group" aria-label="Button Group">
  <div class="btn-group"><button type="button" class="btn btn-default">Fast</button></div>
  <div class="btn-group"><button type="button" class="btn btn-default">Slow</button></div>
  <div class="btn-group"><button type="button" class="btn btn-default">Stop</button></div>
</div>

Listing 11.7

<div class="btn-toolbar">
  <div class="btn-group" role="group" aria-label="Button Group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Button Group">
    <button type="button" class="btn btn-default">4</button>
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
    <button type="button" class="btn btn-default">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Button Group">
    <button type="button" class="btn btn-default">8</button>
    <button type="button" class="btn btn-default">9</button>
    <button type="button" class="btn btn-danger">10</button>
  </div>
</div>

Hour 12: Creating Navigation Systems with Bootstrap

Listing 12.1

<nav role="navigation">
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">About</a></li>
    <li role="presentation"><a href="#">Articles</a></li>
    <li role="presentation"><a href="#">Support</a></li>
  </ul>
</nav>

Listing 12.2

<!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 Stacked Navigation</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
  <div class="container">
    <div class="row">
    <nav role="navigation" class="col-sm-3">
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">About</a></li>
        <li role="presentation"><a href="#">Articles</a></li>
        <li role="presentation"><a href="#">Support</a></li>
      </ul>
    </nav>
    <article class="col-sm-9">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam dolor sit amet erat porta auctor. Etiam eu ultrices orci, at tincidunt metus. Nunc at mauris rutrum, consectetur tellus ut, porttitor justo. Aenean vitae bibendum risus. Proin eros elit, lobortis et metus at, imperdiet tristique velit.</p>
    </article>
    </div>
  </div>
  </body>
</html>

Listing 12.3

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle">
    Choose One... 
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</div>

Listing 12.4

<div class="btn-group">
  <button class="btn btn-primary">Choose One...</button>
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Trigger Dropdown Menu</span>
  </button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Section 1</li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li class="disabled"><a href="#">Item 3</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Section 2</li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
</div>

Listing 12.5

<div class="btn-group dropup">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Choose One... 
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">Section 1</li>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="disabled"><a href="#">Item 3</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Section 2</li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
  </ul>
</div>

Listing 12.6

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsedNav">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">
      <img src="images/dandylion-logo.png" style="height:100%; width: auto;" alt="Dandylions"/>
      </a>
      <p class="navbar-text"><strong>Dandylions</strong></p>
    </div>
    
    <div class="collapse navbar-collapse" id="collapsedNav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Support</a></li>
      </ul>  
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right"> 
        <li><a href="">Contact Us</a></li>
      </ul>   
    </div>
  </div>
</nav>

Listing 12.7

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">Dandylions</a>
    </div>
  </div>
</nav>

Listing 12.8

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsedNav">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Listing 12.9

<div class="collapse navbar-collapse" id="collapsedNav">
  <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>
  </ul>
</div>

Listing 12.10

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="collapsedNav">
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
      </form>
      <button type="button" class="btn btn-default navbar-btn navbar-right">Contact Us</button>
    </div>
  </div>
</nav>

Listing 12.11

<!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 Navigation</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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]-->
    <style>
    img#dandylionLogo { height:100%; width: auto; display: inline; margin-top: -10px; }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsedNav">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand"><img src="images/dandylion-logo.png" alt="Dandylion" id="dandylionLogo" />Dandylions</a>
        </div>
        
        <div class="collapse navbar-collapse" id="collapsedNav">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Support</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Articles</a></li>
            <li><a href="#">Related Sites</a></li>
          </ul>
          </li>
          </ul>
          <p class="navbar-text">We love <a href="" class="navbar-link">Weeds</a>!</p>
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
          </form>
          <button type="button" class="btn btn-default navbar-btn navbar-right">Contact Us</button>
        </div>
      </div>
    </nav>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

  </body>
</html>

Listing 12.12

<ol class="breadcrumb">
  <li><a href="">Dandelions</a></li>
  <li><a href="">Recipes</a></li>
  <li><a href="">Drinks</a></li>
  <li class="active">Dandelion Wine</li>
</ol>

Listing 12.13

<ul class="pagination">
  <li><a href="" aria-label="Previous"><span class="glyphicon glyphicon-arrow-left"></span></a></li>
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li><a href="">5</a></li>
  <li><a href="" aria-label="Next"><span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>

Listing 12.14

<ul class="pager">
  <li class="previous"><a href=""><span class="glyphicon glyphicon-arrow-left"></span> Previous</a></li>
  <li class="next"><a href="">Next <span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>

Listing 12.15

<ul class="list-group">
  <li class="list-group-item"><em>Taraxacum albidum</em> <span class="badge">14</span></li>
  <li class="list-group-item"><em>Taraxacum aphrogenes</em> <span class="badge">3</span></li>
  <li class="list-group-item"><em>Taraxacum brevicorniculatum</em> <span class="badge">5</span></li>
  <li class="list-group-item"><em>Taraxacum californicum</em> <span class="badge">27</span></li>
  <li class="list-group-item"><em>Taraxacum centrasiaticum</em> <span class="badge">0</span></li>
</ul>

Listing 12.16

<div class="list-group">
  <a href="" class="list-group-item"><em>Taraxacum albidum</em></a>
  <a href="" class="list-group-item active"><em>Taraxacum aphrogenes</em></a>
  <a href="" class="list-group-item"><em>Taraxacum brevicorniculatum</em></a>
  <a href="" class="list-group-item"><em>Taraxacum californicum</em></a>
  <a href="" class="list-group-item"><em>Taraxacum centrasiaticum</em></a>
</div>

Listing 12.17

<div class="container">
  <div class="row">
  <div class="list-group col-md-4">
    <a href="" class="list-group-item active">
      <h4 class="list-group-item-heading"><em>Taraxacum albidum</em></h4>
      <p class="list-group-item-text">This is a white flowering dandelion.</p>
    </a>
    <a href="" class="list-group-item">
      <h4 class="list-group-item-heading"><em>Taraxacum aphrogenes</em></h4>
      <p class="list-group-item-text">A Paphos dandelion</p>
    </a>
    <a href="" class="list-group-item list-group-item-warning">
      <h4 class="list-group-item-heading"><em>Taraxacum brevicorniculatum</em></h4>
      <p class="list-group-item-text">This is often incorrectly identified as the <em>Taraxacum kok-saghyz</em> dandelion</p>
    </a>
    <a href="" class="list-group-item">
      <h4 class="list-group-item-heading"><em>Taraxacum californicum</em></h4>
      <p class="list-group-item-text">This is the endangered California Dandelion</p>
    </a>
    <a href="" class="list-group-item">
      <h4 class="list-group-item-heading"><em>Taraxacum centrasiaticum</em></h4>
      <p class="list-group-item-text">The Xinjiang dandelion</p>
    </a>
  </div>
  <img src="images/T_albidum01.jpg" alt="T. albidum" class="col-md-4">
  <p class="col-md-12">Content courtesy <a href="http://en.wikipedia.org/wiki/Taraxacum">Wikipedia</a>
  </div>
</div>

Hour 13: Bootstrap Utilities

Listing 13.1

<p>This paragraph is plain text, with no contextual class.</p>
<p class="text-muted">This paragraph is muted, class: <code>text-muted</code>.</p>
<p class="text-primary">This paragraph is primary, class: <code>text-primary</code>.</p>
<p class="text-success">This paragraph is success, class: <code>text-success</code>.</p>
<p class="text-info">This paragraph is information, class: <code>text-info</code>.</p>
<p class="text-warning">This paragraph is warning, class: <code>text-warning</code>.</p>
<p class="text-danger">This paragraph is danger, class: <code>text-danger</code>.</p>

Listing 13.2

<p class="bg-danger"><span class="sr-only">Danger!</span> Tigers will eat people if you annoy them.</p>

Listing 13.3

<span class="caret"></span>

Listing 13.4

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Listing 13.5

<!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>Pull Quote Paragraph</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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]-->
    <style>
    p.pull-right { 
      border: solid green 3px; 
      color: #F0E433;
      background-color: #025301;
      padding: 1em;
      margin-left: 1em;
      font-size: 1.5em;
    }
    </style>
  </head>
  <body>
    <p>&nbsp;</p>
    <div class="container">
      <p class="col-sm-3 pull-right">&#8220;If dandelions were hard to grow, they would be most welcome on any lawn.&#8221;<br>
      <span class="small">~Andrew V. Mason</span></p>
      <p>Taraxacum /təˈræksəkʉm/ is a large genus of flowering plants in the family Asteraceae. They are native to Eurasia and North and South America, and two species, T. officinale and T. erythrospermum, are found as weeds worldwide. Both species are edible in their entirety. The common name dandelion (/ˈdændɨlaɪ.ən/ dan-di-ly-ən, from French dent-de-lion, meaning "lion's tooth") is given to members of the genus and, like other members of the Asteraceae family, they have very small flowers collected together into a composite flower head. Each single flower in a head is called a floret. Many Taraxacum species produce seeds asexually by apomixis, where the seeds are produced without pollination, resulting in offspring that are genetically identical to the parent plant.</p>
      <p>The species of Taraxacum are tap-rooted biennial or perennial herbaceous plants, native to temperate areas of the globe.</p>
      <p>The leaves are 5–25 cm long or longer, simple and basal, entire or lobed, forming a rosette above the central taproot. The flower heads are yellow to orange coloured, and are open in the daytime but closed at night. The heads are borne singly on a hollow stem (scape) that rises 1–10 cm or more above the leaves and exudes a milky latex when broken. A rosette may produce several flowering stems at a time. The flower heads are 2–5 cm in diameter and consist entirely of ray florets. The flower heads mature into spherical seed heads called "blowballs" or "clocks" (in both British and American English) containing many single-seeded fruits called achenes. Each achene is attached to a pappus of fine hairs, which enable wind-aided dispersal over long distances.</p>
      <p>Text courtesy <a href="http://en.wikipedia.org/wiki/Taraxacum">Wikipedia</a>.</p>
    </div>
</body>
</html>

Listing 13.6

<p class="center-block" style="width:300px;">
  &#8220;If dandelions were hard to grow, they would be most welcome on any lawn.&#8221;<br>
  <span class="small">~Andrew V. Mason</span>
</p>

Listing 13.7

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- ... navigation to be skipped ... -->
<a name="content"></a>

Listing 13.8

<div class="embed-responsive embed-responsive-16by9">
  <video class="embed-responsive-item">
    <source src="...">
  </video>
</div>