Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Surveying the markup for our products page


You'll find this chapter's files prepared and ready in the folder chapter7/start. This project builds directly on the completed design from Chapter 6, Bootstrappin' Business. If anything in these files seems strange, you may want to review Chapter 6, Bootstrappin' Business, before proceeding.

Tip

If you've not already downloaded the exercise files, you can find them at http://packtpub.com/support.

Run the bower install and npm install commands in your console before going on with the next steps! For this chapter, there is one new file in the html/pages directory, products.html.

Open products.html in your editor to view the markup. Let's survey its contents.

Inside the main role="main" element is where we'll find what's new. Here, you'll find the following elements in the same order as they appear:

  • Breadcrumb links marked up as an ordered list

  • A page title within a h1 heading

  • A series of options for filtering products

  • Nine products with thumbnails, titles...