Book Image

Bootstrap Site Blueprints

Book Image

Bootstrap Site Blueprints

Overview of this book

Table of Contents (16 chapters)
Bootstrap Site Blueprints
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Styling the breadcrumbs, page title, and pagination


In the following steps, we'll apply Bootstrap styles to our breadcrumbs, page title, and pagination, and then customize them to fit our design:

  1. Open products.html in your editor.

  2. Find the unordered list just above the h1 page title, add the class "breadcrumb" to the ul tag, and then add the class "active" to the last list item, as follows:

    <ul class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Parent Category</a></li>
      <li class="active">Current Category</li>
    </ul>

    These classes correspond with Bootstrap breadcrumb styles, which you will find documented at http://getbootstrap.com/components/#breadcrumbs.

    Save and refresh your browser. You should see the result as shown in the following screenshot:

  3. To customize the breadcrumbs for this design, let's remove the light gray background and the extra padding. For such a quick adjustment, we'll work directly...