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:

    Styling the breadcrumbs, page title, and pagination
  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 in breadcrumbs.less in the bootstrap folder, leaving a trail by commenting out the unneeded lines.

    Let's set the padding to 0 and remove the background-color entirely, commenting out the former values so that we can clearly see what we've done:

    .breadcrumb {
  padding: 0; // 8px 15px; // edited
  margin-bottom: @line-height-computed;
  list-style: none;
  // background-color: @breadcrumb-bg; // edited
  4. Now for the page title. Bootstrap's page title works by nesting the top-level page heading within a div tag of the page-header class. You can see the documentation at http://getbootstrap.com/components/#page-header.

    Let's adjust our markup accordingly. Let's also add some text within a small tag to take advantage of the Bootstrap style for adding the explanatory notes to our headings:

    <div class="page-header">
  <h1>Product Category Name <small>with explanatory text</small></h1>
</div>

    That will produce the following result:

    Styling the breadcrumbs, page title, and pagination
  5. Let's keep the margin and padding that comes with the page header, but remove the bottom border. Open the type.less file placed in the bootstrap folder. Search for .page-header and comment out the border-bottom rule:
    .page-header {

  // border-bottom: 1px solid @page-header-border-color;
}

    Save, refresh, and you should see a result that is cleaner—with ample white space that fits our overall design—as shown in the following screenshot:

    Styling the breadcrumbs, page title, and pagination
  6. Finally, the pagination. Our markup for this is found just a few lines above the closing main tag (</main>). Above that closing tag, you'll see commented closing div tags for the .container, .row, and .products-grid:
              </div><!-- /.products-grid -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </main>

    Bootstrap's documentation for pagination styles is found at http://getbootstrap.com/components/#pagination.

    To apply these styles here, we only need to add class="pagination" to the ul tag that you will find a few lines above the closing .products-grid tag:

    <ul class="pagination">
  <li><a href="#"><span class="fa fa-chevron-left"></span> Prev</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="#">Next <span class="fa fa-chevron-right"></span></a></li>
</ul>

    Tip

    For the Next and Prev items, I've already provided the span tags for the Font Awesome icons fa-chevron-left and -right.

    This gives us the result as shown in the following screenshot:

    Styling the breadcrumbs, page title, and pagination
  7. Let's center align the pagination below our grid. First, wrap it in a parent div tag. We'll place the row class on this to ensure it clears the content above it, and then we'll add an appropriately named custom class pagination-wrap:
    <div class="row pagination-wrap">
  <ul class="pagination">
    <li> ... 
  </ul>
</div>
  8. Now, we need some custom styling to center align this component within its space. In Chapter 4, Bootstrappin' Business, we used the custom LESS file _page-contents.less to write our custom styles. Here, let's create a more specific file to manage the special features for our products grid. Create a new file called _products-grid.less, save it in the less folder alongside our other custom LESS files, and add the following lines to it:
    .pagination-wrap {
  text-align: center;
}

    Save the file.

  9. Now we'll add the new file to our LESS import sequence. Open the _main.less file inside the less folder, and add the import line under the comment // Other custom files, as shown here:
    @import "_products-grid.less"; // added

    Save the file and compile to CSS.

    Refresh your browser. You should now see our pagination snap to the center.

    Styling the breadcrumbs, page title, and pagination
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset