Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Bootstrap 4 Site Blueprints
  • Table Of Contents Toc
Bootstrap 4 Site Blueprints

Bootstrap 4 Site Blueprints - Second Edition

By : Jobsen, David Cochran, Whitney
close
close
Bootstrap 4 Site Blueprints

Bootstrap 4 Site Blueprints

By: Jobsen, David Cochran, Whitney

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 (10 chapters)
close
close

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...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Bootstrap 4 Site Blueprints
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon