O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ordered list just above the h1 page title, add the "breadcrumb" class to the ol tag, and then add the "active" class to the last list item, as follows:
        <ol class="breadcrumb"> 
          <li class="breadcrumb-item"><a href="/">Home</a></li> 
          <li class="breadcrumb-item"><a href="#">Parent Category</a></li> 
          <li class="breadcrumb-item active">Current Category</li> 
        </ol> 
     
    

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

    Save and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required