Teach Yourself Bootstrap Part 3 Code Listings

Part 3: Bootstrap JavaScript Plugins

Sams Teach Yourself Bootstrap in 24 Hours

Hour 14: Using Bootstrap JavaScript Plugins

Listing 14.1

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Listing 14.2

$('#example').tooltip({
  html:true,
  delay: 200,
  trigger:'click'
});

Listing 14.3

<button type="button" class="btn btn-default" data-toggle="tooltip" data-html="true" data-delay="200" data-trigger="click" title="You did it!">Click to toggle Tooltip</button>

Listing 14.4

...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
  $(document).off('.data-api')
</script>
</body>
</html>

Listing 14.5

$('#myToolTip').tooltip('toggle');

Listing 14.6

$.fn.tooltip.Constructor.DEFAULTS.html = true;

Listing 14.7

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal showing
})

Listing 14.8

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict();
// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton;

Hour 15: Modal Windows

Listing 15.1

$('#myModal').modal(options);

Listing 15.2

<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">
  Click to Open a Modal
</button>

Listing 15.3

<a class="bg-warning" data-toggle="modal" href="#myModal">Click to Open a Modal</a>

Listing 15.4

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <p>My modal content</p>
    </div>
  </div>
</div>

Listing 15.5

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Do You Love Dandylions?</h4>
      </div>
      <div class="modal-body">
        <img src="images/seeded.jpg" alt="" class="col-sm-3 img-circle pull-left"/>
        <p>So do I!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Listing 15.6

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Do You Love Dandylions?</h4>
      </div>
      <div class="modal-body">
        <img src="images/seeded.jpg" alt=""
             class="col-sm-3 img-circle pull-left"/>
        <p>So do I!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
                data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  function show_modal() {
    $('#myModal').modal('show');
  }
  window.setTimeout(show_modal, 2000); 
});
</script>

Listing 15.7

<!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 Modal Windows</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>
    <p>&nbsp;</p>
    <div class="container">

      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#noFade">
        No Fade Modal
      </button>
      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#fade">
        Fade Modal
      </button>


<!-- Modal -->
<div class="modal" id="noFade" tabindex="-1" role="dialog" aria-labelledby="noFadeLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="noFadeLabel">This Modal Did Not Fade In</h4>
      </div>
      <div class="modal-body">
        <p>It just blinked into existance. Poof!</p>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="fade" tabindex="-1" role="dialog" aria-labelledby="fadeLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="noFadeLabel">This Modal Did Fade In</h4>
      </div>
      <div class="modal-body">
        <p>It appeared to slide onto the page. Whee!</p>
      </div>
    </div>
  </div>
</div>
    </div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Listing 15.8

<!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 Modal Windows</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>
    <p>&nbsp;</p>
    <div class="container">

      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
        Click Here
      </button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">My Modal</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <p class="col-md-3">This is a four-column modal</p>
            <p class="col-md-3">Each of these paragraphs is in a different column.</p>
            <p class="col-md-3">This is column three.</p>
            <p class="col-md-3">And this is the final column, column four.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Listing 15.9

<!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 Modal Windows</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>
    <p>&nbsp;</p>
    <div class="container">

      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
        Click Here
      </button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Image Title</h4>
      </div>
      <div class="modal-body">
       <img src="">
      </div>
    </div>
  </div>
</div>
    </div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Hour 16: Affix, Tab, and Scrollspy

Listing 16.1

<!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 Modal Windows</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">
    <nav class="col-md-4">
      <ul class="list-group" data-spy="affix">
        <li class="list-group-item"><a href="#section1">Section One</a></li>
        <li class="list-group-item"><a href="#section2">Section Two</a></li>
        <li class="list-group-item"><a href="#section3">Section Three</a></li>
      </ul>
    </nav>
    <div class="col-md-8">
      <h2 id="section1">Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in orci elit. Donec eu mauris aliquet, efficitur quam eu, ullamcorper tellus. Sed odio libero, bibendum et eleifend quis, consectetur sed massa. In neque tortor, pulvinar sit amet varius in, facilisis vitae ligula. In est nulla, bibendum eu scelerisque eget, ultricies ut nulla. Aenean accumsan, ante eget malesuada rhoncus, ligula nibh blandit leo, sollicitudin aliquam sapien ante vitae elit. Fusce pulvinar vehicula lectus, ut accumsan metus. Sed porta tincidunt fermentum. Pellentesque sollicitudin augue justo, eget imperdiet arcu vestibulum et. Duis elementum facilisis posuere.</p>
    <p>Duis id ex lobortis, semper orci ac, mattis sapien. Praesent sed rutrum elit. Suspendisse vel lacinia diam. Nullam id condimentum dolor, auctor eleifend erat. Nulla nec facilisis nibh. Morbi in condimentum ipsum. Aenean sit amet suscipit libero. Nam ultricies erat pretium velit efficitur condimentum. Cras condimentum, urna vel ultricies feugiat, orci ex varius nibh, id luctus mi est id sem. Donec porttitor dui sit amet egestas convallis. Maecenas dignissim efficitur tincidunt. Sed ac nunc porta, mollis velit imperdiet, volutpat tellus. Sed sagittis id nisi eu congue. Praesent accumsan sed nunc non venenatis.</p>
    <h2 id="section2">Section Two</h2>
    <p>Suspendisse ornare ipsum nec velit euismod egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla id ipsum eget tincidunt. Vivamus tempor, odio non ullamcorper finibus, urna nulla tincidunt ipsum, ut lacinia nulla massa sagittis justo. Proin et urna tristique, aliquam ligula non, tempus lectus. Curabitur facilisis sodales sem quis cursus. Praesent lacinia pulvinar ultricies. Vestibulum rutrum ligula scelerisque, consequat tortor a, aliquet nisi. Mauris elementum accumsan urna id pharetra. Aliquam ut congue turpis. Nam iaculis imperdiet malesuada. Donec eu odio elementum, blandit purus at, vehicula eros. Nullam porta, nibh quis placerat aliquam, magna ex efficitur diam, sit amet ultricies nunc metus vitae dolor. Maecenas risus mi, tincidunt et urna at, posuere dapibus massa. Pellentesque rutrum elementum fermentum. Curabitur sodales elit vel dignissim placerat.</p>
    <p>Aliquam lobortis metus sapien, in efficitur ante posuere id. Mauris non tortor ligula. Integer commodo magna ut ultricies mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec iaculis arcu ut metus dictum, id interdum est interdum. Nam ac consectetur ex, sed ornare nisi. Morbi scelerisque ac tellus varius convallis. Cras fringilla metus metus, a laoreet leo congue sit amet. Duis fringilla luctus mi. Integer iaculis diam vel ipsum sagittis, quis interdum urna posuere. Nulla sed pellentesque ante, eget faucibus dui. Curabitur ullamcorper lacus quam, nec facilisis ipsum rhoncus a. Maecenas egestas purus lorem, eget elementum sem convallis eu. Nullam congue pellentesque eros et lobortis.</p>
    <h2 id="section3">Section Three</h2>
    <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec condimentum, odio ut porta auctor, mi turpis laoreet magna, nec tincidunt tellus nisi et odio. Nullam eget urna purus. Integer tristique, enim at euismod mollis, dui tortor molestie lectus, id vestibulum lorem erat eget orci. Donec vitae purus vel magna fringilla pretium. Morbi dapibus ornare accumsan. Curabitur fringilla nibh dui. Sed vel mauris in eros aliquet ultrices. Sed sem orci, ornare non suscipit at, congue nec tortor. Vivamus a dolor lobortis, varius orci vel, imperdiet massa. Fusce mattis efficitur massa vitae commodo.</p>
    </div>
  </div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Listing 16.2

$('#myAffix').affix({
  offset: {
    top: 60,
    bottom: 120
  }
});

Listing 16.3

<ul class="nav nav-tabs">
  <li class="active"><a href="#section1">Section One</a></li>
  <li><a href="#section2">Section Two</a></li>
  <li><a href="#section3">Section Three</a></li>
</ul>
<div>
  <div id="section1">
    <h2>Section One</h2>
    <p>...</p>
  </div>
  <div id="section2">
    <h2>Section Two</h2>
    <p>...</p>
  </div>
  <div id="section3">
    <h2>Section Three</h2>
    <p>...</p>
  </div>
</div>

Listing 16.4

$('#myTab a').click(function (e) {
  $(this).tab('show');
});

Listing 16.5

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('#myTab a').click(function (e) {
    $(this).tab('show');
  });
});

Listing 16.6

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="section1">
    <h2>Section One</h2>
    <p>...</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="section2">
    <h2>Section Two</h2>
    <p>...</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="section3">
    <h2>Section Three</h2>
    <p>...</p>
  </div>
</div>

Listing 16.7

$('body').scrollspy({ target: '#myNav' });

Listing 16.8

<!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 Affix with Scrollspy</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>
      body { position: relative; }
      .active { font-weight: bold; }
    </style>
  </head>
<body data-spy="scroll" data-target="#myNav">
<div class="container">
  <div class="col-md-3">
    <nav id="myNav">
      <ul class="nav" data-spy="affix">
        <li class=""><a href="#section1">Section One</a></li>
        <li class=""><a href="#section2">Section Two</a></li>
        <li class=""><a href="#section3">Section Three</a></li>
      </ul>
    </nav>
  </div>
    <article class="col-md-9">
  <div class="" id="section1">
    <h2>Section One</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in orci elit. Donec eu mauris aliquet, efficitur quam eu, ullamcorper tellus. Sed odio libero, bibendum et eleifend quis, consectetur sed massa. In neque tortor, pulvinar sit amet varius in, facilisis vitae ligula. In est nulla, bibendum eu scelerisque eget, ultricies ut nulla. Aenean accumsan, ante eget malesuada rhoncus, ligula nibh blandit leo, sollicitudin aliquam sapien ante vitae elit. Fusce pulvinar vehicula lectus, ut accumsan metus. Sed porta tincidunt fermentum. Pellentesque sollicitudin augue justo, eget imperdiet arcu vestibulum et. Duis elementum facilisis posuere.</p>
    <p>Duis id ex lobortis, semper orci ac, mattis sapien. Praesent sed rutrum elit. Suspendisse vel lacinia diam. Nullam id condimentum dolor, auctor eleifend erat. Nulla nec facilisis nibh. Morbi in condimentum ipsum. Aenean sit amet suscipit libero. Nam ultricies erat pretium velit efficitur condimentum. Cras condimentum, urna vel ultricies feugiat, orci ex varius nibh, id luctus mi est id sem. Donec porttitor dui sit amet egestas convallis. Maecenas dignissim efficitur tincidunt. Sed ac nunc porta, mollis velit imperdiet, volutpat tellus. Sed sagittis id nisi eu congue. Praesent accumsan sed nunc non venenatis.</p>
    <p>Suspendisse ornare ipsum nec velit euismod egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla id ipsum eget tincidunt. Vivamus tempor, odio non ullamcorper finibus, urna nulla tincidunt ipsum, ut lacinia nulla massa sagittis justo. Proin et urna tristique, aliquam ligula non, tempus lectus. Curabitur facilisis sodales sem quis cursus. Praesent lacinia pulvinar ultricies. Vestibulum rutrum ligula scelerisque, consequat tortor a, aliquet nisi. Mauris elementum accumsan urna id pharetra. Aliquam ut congue turpis. Nam iaculis imperdiet malesuada. Donec eu odio elementum, blandit purus at, vehicula eros. Nullam porta, nibh quis placerat aliquam, magna ex efficitur diam, sit amet ultricies nunc metus vitae dolor. Maecenas risus mi, tincidunt et urna at, posuere dapibus massa. Pellentesque rutrum elementum fermentum. Curabitur sodales elit vel dignissim placerat.</p>
    <p>Aliquam lobortis metus sapien, in efficitur ante posuere id. Mauris non tortor ligula. Integer commodo magna ut ultricies mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec iaculis arcu ut metus dictum, id interdum est interdum. Nam ac consectetur ex, sed ornare nisi. Morbi scelerisque ac tellus varius convallis. Cras fringilla metus metus, a laoreet leo congue sit amet. Duis fringilla luctus mi. Integer iaculis diam vel ipsum sagittis, quis interdum urna posuere. Nulla sed pellentesque ante, eget faucibus dui. Curabitur ullamcorper lacus quam, nec facilisis ipsum rhoncus a. Maecenas egestas purus lorem, eget elementum sem convallis eu. Nullam congue pellentesque eros et lobortis.</p>
  </div>
  <div class="" id="section2">
    <h2>Section Two</h2>
    <p>Suspendisse ornare ipsum nec velit euismod egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla id ipsum eget tincidunt. Vivamus tempor, odio non ullamcorper finibus, urna nulla tincidunt ipsum, ut lacinia nulla massa sagittis justo. Proin et urna tristique, aliquam ligula non, tempus lectus. Curabitur facilisis sodales sem quis cursus. Praesent lacinia pulvinar ultricies. Vestibulum rutrum ligula scelerisque, consequat tortor a, aliquet nisi. Mauris elementum accumsan urna id pharetra. Aliquam ut congue turpis. Nam iaculis imperdiet malesuada. Donec eu odio elementum, blandit purus at, vehicula eros. Nullam porta, nibh quis placerat aliquam, magna ex efficitur diam, sit amet ultricies nunc metus vitae dolor. Maecenas risus mi, tincidunt et urna at, posuere dapibus massa. Pellentesque rutrum elementum fermentum. Curabitur sodales elit vel dignissim placerat.</p>
    <p>Aliquam lobortis metus sapien, in efficitur ante posuere id. Mauris non tortor ligula. Integer commodo magna ut ultricies mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec iaculis arcu ut metus dictum, id interdum est interdum. Nam ac consectetur ex, sed ornare nisi. Morbi scelerisque ac tellus varius convallis. Cras fringilla metus metus, a laoreet leo congue sit amet. Duis fringilla luctus mi. Integer iaculis diam vel ipsum sagittis, quis interdum urna posuere. Nulla sed pellentesque ante, eget faucibus dui. Curabitur ullamcorper lacus quam, nec facilisis ipsum rhoncus a. Maecenas egestas purus lorem, eget elementum sem convallis eu. Nullam congue pellentesque eros et lobortis.</p>
    <p>Suspendisse ornare ipsum nec velit euismod egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla id ipsum eget tincidunt. Vivamus tempor, odio non ullamcorper finibus, urna nulla tincidunt ipsum, ut lacinia nulla massa sagittis justo. Proin et urna tristique, aliquam ligula non, tempus lectus. Curabitur facilisis sodales sem quis cursus. Praesent lacinia pulvinar ultricies. Vestibulum rutrum ligula scelerisque, consequat tortor a, aliquet nisi. Mauris elementum accumsan urna id pharetra. Aliquam ut congue turpis. Nam iaculis imperdiet malesuada. Donec eu odio elementum, blandit purus at, vehicula eros. Nullam porta, nibh quis placerat aliquam, magna ex efficitur diam, sit amet ultricies nunc metus vitae dolor. Maecenas risus mi, tincidunt et urna at, posuere dapibus massa. Pellentesque rutrum elementum fermentum. Curabitur sodales elit vel dignissim placerat.</p>
    <p>Aliquam lobortis metus sapien, in efficitur ante posuere id. Mauris non tortor ligula. Integer commodo magna ut ultricies mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec iaculis arcu ut metus dictum, id interdum est interdum. Nam ac consectetur ex, sed ornare nisi. Morbi scelerisque ac tellus varius convallis. Cras fringilla metus metus, a laoreet leo congue sit amet. Duis fringilla luctus mi. Integer iaculis diam vel ipsum sagittis, quis interdum urna posuere. Nulla sed pellentesque ante, eget faucibus dui. Curabitur ullamcorper lacus quam, nec facilisis ipsum rhoncus a. Maecenas egestas purus lorem, eget elementum sem convallis eu. Nullam congue pellentesque eros et lobortis.</p>
  </div>
  <div class="" id="section3">
    <h2>Section Three</h2>
    <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec condimentum, odio ut porta auctor, mi turpis laoreet magna, nec tincidunt tellus nisi et odio. Nullam eget urna purus. Integer tristique, enim at euismod mollis, dui tortor molestie lectus, id vestibulum lorem erat eget orci. Donec vitae purus vel magna fringilla pretium. Morbi dapibus ornare accumsan. Curabitur fringilla nibh dui. Sed vel mauris in eros aliquet ultrices. Sed sem orci, ornare non suscipit at, congue nec tortor. Vivamus a dolor lobortis, varius orci vel, imperdiet massa. Fusce mattis efficitur massa vitae commodo.</p>
    <p>Suspendisse ornare ipsum nec velit euismod egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla id ipsum eget tincidunt. Vivamus tempor, odio non ullamcorper finibus, urna nulla tincidunt ipsum, ut lacinia nulla massa sagittis justo. Proin et urna tristique, aliquam ligula non, tempus lectus. Curabitur facilisis sodales sem quis cursus. Praesent lacinia pulvinar ultricies. Vestibulum rutrum ligula scelerisque, consequat tortor a, aliquet nisi. Mauris elementum accumsan urna id pharetra. Aliquam ut congue turpis. Nam iaculis imperdiet malesuada. Donec eu odio elementum, blandit purus at, vehicula eros. Nullam porta, nibh quis placerat aliquam, magna ex efficitur diam, sit amet ultricies nunc metus vitae dolor. Maecenas risus mi, tincidunt et urna at, posuere dapibus massa. Pellentesque rutrum elementum fermentum. Curabitur sodales elit vel dignissim placerat.</p>
    <p>Aliquam lobortis metus sapien, in efficitur ante posuere id. Mauris non tortor ligula. Integer commodo magna ut ultricies mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec iaculis arcu ut metus dictum, id interdum est interdum. Nam ac consectetur ex, sed ornare nisi. Morbi scelerisque ac tellus varius convallis. Cras fringilla metus metus, a laoreet leo congue sit amet. Duis fringilla luctus mi. Integer iaculis diam vel ipsum sagittis, quis interdum urna posuere. Nulla sed pellentesque ante, eget faucibus dui. Curabitur ullamcorper lacus quam, nec facilisis ipsum rhoncus a. Maecenas egestas purus lorem, eget elementum sem convallis eu. Nullam congue pellentesque eros et lobortis.</p>
  </div>
    </article>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Hour 17: Popovers and Tooltips

Listing 17.1

$(document).ready(function(){
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
});

Listing 17.2

<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    tooltip text
  </div>
</div>

Listing 17.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 Tooltip on a Button</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>
    body { padding-top: 70px; }
    img#dandylionLogo { height:100%; width: auto; display: inline; margin-top: -10px; }
    </style>

  </head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <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>
    <div class="container">
      <div class="row">
      <article id="mainarticle" class="col-lg-5 col-md-6 col-xs-12">
        <h3>What is a Dandelion?</h3>
        <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
        <em>/təˈræksəkʉm/</em></span> 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 <span class="pronounce"><strong>dandelion</strong>
        <em>/ˈdændɨlaɪ.ən/</em></span> (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 <em>Taraxacum</em>
        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>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-trigger="click" title="Everyone should love Dandelions!">Click if you love Dandelions</button>
      </article>
      <aside id="links" class="col-md-3 col-xs-12">
        <h3>Learn More About Dandelions</h3>
        <ul>
          <li><a href="http://chemistry.about.com/b/2013/07/26/do-dandelions-burn-in-colors.htm">Do Dandelions Burn in Colors?</a></li>
          <li><a href="http://herbgardens.about.com/od/herbrecipes/tp/10-uses-for-dandelions.htm">Top 5 Things To Do With Dandelion</a></li>
          <li><a href="http://organicgardening.about.com/od/howtogrowveggies/a/How-To-Grow-Dandelion-Greens.htm">How to Grow and Harvest Dandelion Greens</a></li>
          <li><a href="http://homecooking.about.com/od/condimentrecipes/r/bljelly9.htm">Dandelion Honey Recipe</a></li>
          <li><a href="http://landscaping.about.com/od/weedsdiseases/a/kill_dandelions_2.htm">Get Rid of Dandelions the Smart Way&#8212;Eat Them!</a></li>
        </ul>
      </aside>
      <aside id="sidebar" class="col-lg-3 col-md-3 col-xs-12">
        <p><img src="images/dandy.jpg" class="img-responsive" alt=""/></p>
        <p><img src="images/seeded.jpg" class="img-responsive" alt=""/></p>
      </aside>
      <footer class="col-xs-12">
        <p>Text from 
        <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
      </footer>

      </div>
    </div>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
});
</script>
</body>
</html>

Listing 17.4

<script>
$(document).ready(function(){
  $(function () {
    $('[data-toggle="popover"]').popover();
  });
});
</script>

Listing 17.5

<button type="button" class="btn btn-default" data-toggle="popover" title="Popovers are fun" data-content="You can add titles and they stick">
  Click to see a Popover
</button>

Listing 17.6

<a href="#" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="Make this Popover Disappear" data-content="Click anywhere and the popover will leave." tabindex="0">This is a Dismissable Popover</a>

Listing 17.7

<div class="popover" role="tooltip">
  <div class="arrow"></div>
  <h3 class="popover-title"></h3>
  <div class="popover-content"></div>
</div>

Hour 18: Transitions, Buttons, Alerts, and Progress Bars

Listing 18.1

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

Listing 18.2

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this);
    $btn.button('loading');
  })
</script>

Listing 18.3

<button type="button" id="myButton" data-toggle="button" class="btn btn-primary" aria-pressed="false" autocomplete="off">
  Loading state
</button>

Listing 18.4

<button type="button" id="myButton" data-toggle="button" class="btn btn-primary active" aria-pressed="true" autocomplete="off">
  Loading state
</button>

Listing 18.5

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked>Dandelions!
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off">Roses
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off">Orchids
  </label>
</div>

Listing 18.6

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked>Dandelions!
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off">Roses
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off">Orchids
  </label>
</div>

Listing 18.7

<div class="alert alert-success" role="alert">
  Success! 
</div>
<div class="alert alert-info" role="alert">
  Info 
</div>
<div class="alert alert-warning" role="alert">
  Warning
</div>
<div class="alert alert-danger" role="alert">
  Danger! 
</div>

Listing 18.8

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  Warning! Learning about dandelions can be addictive. 
</div>

Listing 18.9

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
    20% Read
  </div>
</div>

Listing 18.10

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
    <span class="sr-only">20% Read</span>
  </div>
</div>

Listing 18.11

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 54%">
    54% love dandelions
  </div>
  <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 13%">
    13% love roses
  </div>
  <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 30%">
    30% love orchids
  </div>
</div>

Listing 18.12

.btn-info { 
  background-color: #025301; 
  border-color: #999; 
}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
  background-color: #80D464;
  border-color: #999;
  color: #000;
}

Listing 18.13

<script>
$(document).ready(function() {
  $("#myBar").click(function() {
    $(this).css('width','25%');
    $(this).text('25%');
  });
});
</script>

Hour 19: Collapse and Accordion

Listing 19.1

<a class="btn btn-default" data-toggle="collapse" href="#myCollapsedSection" aria-expanded="false" aria-controls="myCollapsedSection">
  Show the Content
</a>
<article id="myCollapsedSection" class="collapse">
<h2>My Collapsed Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</article>

Listing 19.2

<article>
<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>
<section id="moreDandelions" class="collapse">
<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>
</section>
<p><a href="#moreDandelions" class="btn btn-link" id="moreLink" data-toggle="collapse" aria-expanded="false" aria-controls="moreDandelions">Read More...</a></p>
</article>

<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready( function() {
  $('a#moreLink').click(function() {
    $(this).text($(this).text() == 
    'Read More...' ? 'Hide' : 'Read More...'); 
  });
});
</script>

Listing 19.3

.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: 200px;
  overflow: auto;
}

Listing 19.4

<section class="panel-group" role="tablist"
         aria-multiselectable="true" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="moreDandy">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
           href="#moreDandelions" aria-expanded="true"
           aria-controls="moreDandelions">Learn More About
           Dandelions</a>
      </h4>
    </div>
    <div id="moreDandelions" class="panel-collapse collapse in"
         role="tabpanel" aria-labelledby="moreDandy">
      <div class="panel-body">
        <p>The species of Taraxacum are tap-rooted biennial or
        perennial herbaceous plants, native to temperate areas of the
        globe.</p>
        <p>...</p>
        <p>Text courtesy
        <a href="http://en.wikipedia.org/wiki/Taraxacum">Wikipedia</a>.
        </p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="voteDandy">
      <h4>
        <a data-toggle="collapse" data-parent="#accordion"
           href="#voteDandelions" aria-expanded="true"
           aria-controls="voteDandelions">Vote for Dandelions</a>
      </h4>
    </div>
    <div id="voteDandelions" class="panel-collapse collapse"
         role="tabpanel" aria-labeledby="#voteDandy">
      <div class="panel-body">
        <p>...</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="picsDandy">
      <h4><a data-toggle="collapse" data-parent="#accordion"
             href="#picsDandelions" aria-expanded="true"
             aria-controls="picsDandelions">See Pictures of
             Dandelions</a></h4>
    </div>
    <div id="picsDandelions" class="panel-collapse collapse"
         role="tabpanel" aria-labeledby="#picsDandy">
      <div class="panel-body">
        <p><img src="images/seeded.jpg" alt="seeded"/>
        <p><img src="images/dandy.jpg" alt="full flower"/>
      </div>
    </div>
  </div>
</section>

Listing 19.5

<div class="panel-group" id="accordionMenu">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordionMenu"
           href="#menu1" aria-expanded="true"
           aria-controls="menu1">Menu 1</a>
      </h4>
    </div>
    <div class="panel-collapse collapse" id="menu1">
      <ul class="list-group">
        <li class="list-group-item"><a href="#">Item 1</a></li>
        <li class="list-group-item"><a href="#">Item 2</a></li>
        <li class="list-group-item"><a href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordionMenu"
           href="#menu2" aria-expanded="true"
           aria-controls="menu2">Menu 2</a>
      </h4>
    </div>
    <div class="panel-collapse collapse" id="menu2">
      <ul class="list-group">
        <li class="list-group-item"><a href="#">Item 1</a></li>
        <li class="list-group-item"><a href="#">Item 2</a></li>
        <li class="list-group-item"><a href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordionMenu"
           href="#menu3" aria-expanded="true"
           aria-controls="menu3">Menu 3</a>
      </h4>
    </div>
    <div class="panel-collapse collapse" id="menu3">
      <ul class="list-group">
        <li class="list-group-item"><a href="#">Item 1</a></li>
        <li class="list-group-item"><a href="#">Item 2</a></li>
        <li class="list-group-item"><a href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</div>

Listing 19.6

<div id="menu">
  <div class="panel list-group" role="tablist"
       aria-multiselectable="true">
    <a href="#" class="list-group-item" data-toggle="collapse"
       data-target="#dandyDeets" data-parent="#menu"
       aria-expanded="false"
       aria-controls="#dandyDeets">DETAILS</a>
    <div id="dandyDeets" class="collapse submenu">
      <a class="list-group-item small">taxonomy</a>
      <a class="list-group-item small">colors</a>
      <a class="list-group-item small">sizes</a>
    </div>
    <a href="#" class="list-group-item" data-toggle="collapse"
       data-target="#dandyArts" data-parent="#menu"
       aria-expanded="false"
       aria-controls="#dandyArts">ARTICLES</a>
    <div id="dandyArts" class="collapse submenu">
      <a class="list-group-item small">Dandelions and You</a>
      <a class="list-group-item small">Dandelion's Best Friend</a>
      <a class="list-group-item small">Read More</a>
    </div>
    <a href="#" class="list-group-item" data-toggle="collapse"
       data-target="#dandyRecipes" data-parent="#menu"
       aria-expanded="false"
       aria-controls="#dandyRecipes">RECIPES</a>
    <div id="dandyRecipes" class="collapse submenu">
      <a class="list-group-item small">Dandelion Soup</a>
      <a class="list-group-item small">Dandelion Wine</a>
      <a class="list-group-item small">Search Recipes</a>
    </div>
  </div>
</div>

Listing 19.7

$(document).ready(function(){
  $('#menu .collapse').on('show.bs.collapse', function() {
    var $head = $(this).prev();
    $head.find('span').removeClass('glyphicon-chevron-right')
                      .addClass('glyphicon-chevron-down');
  });
  $('#menu .collapse').on('hide.bs.collapse', function() {
    var $head = $(this).prev();
    $head.find('span').removeClass('glyphicon-chevron-down')
                      .addClass('glyphicon-chevron-right');
  });
});

Hour 20: Carousels

Listing 20.1

<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0"
      class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

Listing 20.2

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <h1>Slide 1</h1>
  </div>
  <div class="item">
    <h1>Slide 2</h1>
  </div>
  <div class="item">
    <h1>Slide 3</h1>
  </div>
</div>

Listing 20.3

<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button"
   data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"
        aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button"
   data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"
        aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

Listing 20.4

<div class="carousel-inner" role="listbox">
  <figure class="item active">
    <img src="images/IMG_1958.jpg" alt="dandelion 1"
         class="center-block img-responsive">
    <figcaption class="carousel-caption">
      A Dandy Closeup
    </figcaption>
  </figure>
  <figure class="item">
    <img src="images/IMG_1960.jpg" alt="dandelion 2"
         class="center-block img-responsive">
    <figcaption class="carousel-caption">
      Taking Over the Yard
    </figcaption>
  </figure>
  <figure class="item">
    <img src="images/IMGP1382.jpg" alt="dandelion 3"
         class="center-block img-responsive">
    <figcaption class="carousel-caption">
      One
    </figcaption>
  </figure>
</div>

Listing 20.5

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="container-fluid">
        <div class="feature col-md-6 col-md-offset-3"> 
          <div class="container">
            <div class="row">
              <img src="images/quote1.jpg"
                   class="img-circle col-md-2 col-md-offset-1"
                   alt=""/>
              <blockquote class="col-md-3">
                &#8220;Dandelions are my favorite flower. I love
                that they are so versatile, and they take no effort
                to grow. I used to help seed them in my mother's
                garden.&#8221;
              </blockquote>
            </div>
            <div class="row">
              <p class="col-md-offset-6 col-md-2">Jennifer
              Kyrnin</p>
            </div>
            <div class="row">
              <p class="small col-md-offset-6 col-md-2">
                <a href="http://htmljenn.com/">
                  http://htmljenn.com</a></p>
            </div>
          </div>
        </div> 
      </div> 
    </div>
    
    <div class="item">
      <div class="container-fluid">
        <div class="feature col-md-6 col-md-offset-3"> 
          <div class="container">
            <div class="row">
              <img src="images/quote2.jpg"
                   class="img-circle col-md-2 col-md-offset-1"
                   alt=""/>
              <blockquote class="col-md-3">
                &#8220;Blah blaherbe blah&#8221;
              </blockquote>
            </div>
            <div class="row">
              <p class="col-md-offset-6 col-md-2">Joseph Blue</p>
            </div>
            <div class="row">
              <p class="small col-md-offset-6 col-md-2">
                <a href="">http://dandylions.weed</a></p>
            </div>
          </div>
        </div> 
      </div> 
    </div>
    
    <div class="item">
      <div class="container-fluid">
        <div class="feature col-md-6 col-md-offset-3"> 
          <div class="container">
            <div class="row">
              <img src="images/quote3.jpg"
                   class="img-circle col-md-2 col-md-offset-1"
                   alt=""/>
              <blockquote class="col-md-3">
                &#8220;Blahbity blah blah&#8221;
              </blockquote>
            </div>
            <div class="row">
              <p class="col-md-offset-6 col-md-2">Josephine
              Blobe</p>
            </div>
            <div class="row">
              <p class="small col-md-offset-6 col-md-2">
                <a href="">http://dandelyon.plant</a></p>
            </div>
          </div>
        </div> 
      </div> 
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button"
     data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"
          aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel"
     role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"
          aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Listing 20.6

<div id="myCarousel" class="carousel" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0"
        class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h1>Carousel 1 Slide 1</h1>
    </div>
    <div class="item">
      <h1>Carousel 1 Slide 2</h1>
    </div>
    <div class="item">
      <h1>Carousel 1 Slide 3</h1>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel"
     role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"
          aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel"
     role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"
          aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<p>and here is some text</p>

<div id="myCarousel2" class="carousel" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel2" data-slide-to="0"
        class="active"></li>
    <li data-target="#myCarousel2" data-slide-to="1"></li>
    <li data-target="#myCarousel2" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h1>Carousel 2 Slide 1</h1>
    </div>
    <div class="item">
      <h1>Carousel 2 Slide 2</h1>
    </div>
    <div class="item">
      <h1>Carousel 2 Slide 3</h1>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel2"
     role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"
          aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel2"
     role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"
          aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Listing 20.7

.item h1 { 
  width: 10em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
}
.carousel-indicators li, .carousel-indicators .active {
  border-color: #000;
}
.carousel-indicators .active {
  background-color: #000;
}