Mastering Bootstrap 4

Benjamin Jakobus, Jason Marah

• Publisher: Packt Publishing
• Year: 2016
• Edition: 1
• eBook ISBN:
  9781783981120
• Topic: Design
• Subtopic: Web Development

Learn how to build beautiful and highly customizable web interfaces by leveraging the power of Bootstrap 4

About This Book

• Adapt and customize Bootstrap to produce enticing websites that fit your needs
• Explore Bootstrap's grid system, helper classes, and responsive utilities
• Extend Bootstrap with jQuery plugins and learn how to create your own custom plugins

Who This Book Is For

This book targets intermediate-level front-end web-developers. The book is not intended to be an introduction to web development. As such, the book assumes that readers have a firm grasp on the basic concepts behind web-development, as well as essential HTML, JavaScript and CSS skills.

What You Will Learn

• Create a professional Bootstrap-based website from scratch without using third-party templates
• Apply the Bootstrap mobile-first grid system and add responsiveness and aesthetic touches to image elements
• Style various types of content and learn how to build a page's layout from scratch by applying the power of Bootstrap 4
• Take advantage of Bootstrap's form helper and contextual classes
• Infuse your web pages with life and movement using Bootstrap jQuery plugins
• Customize the behavior and features of Bootstrap's jQuery Plugins extensively
• Optimize your Bootstrap-based project before deployment
• Incorporate Bootstrap into an AngularJS or React application and use Bootstrap components as AngularJS directives or React components

In Detail

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces.

Right from the first chapter, dive into building a customized Bootstrap website from scratch. Get to grips with Bootstrap's key features and quickly discover the various ways in which Bootstrap can help you develop web-interfaces. Then take walk through the fundamental features, such as its grid system, helper classes, and responsive utilities. When you have mastered these, you will discover how to structure page layouts, use forms, style different types of content and utilize Bootstrap's various navigation components. Among other things, you will also tour the anatomy of a Bootstrap plugin, creating your own custom components and extending Bootstrap using jQuery. Finally, you will discover how to optimize your website and integrate it with third-party frameworks.

By the end of this book, you will have a thorough knowledge of the framework's ins and outs, and be able to build highly customizable and optimized web interfaces.

Style and approach

This comprehensive step-by-step guide walks you through building a complete website using Bootstrap 4. Each chapter is accompanied by source code and screenshots, and focuses on a distinct set of lessons that are illustrated within the context of a demo project.

Mastering Bootstrap 4

---

Mastering Bootstrap 4

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: September 2016

Production reference: 1260916

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-78398-112-0

www.packtpub.com

Credits

Authors Benjamin Jakobus Jason Marah	Copy Editor Safis Editing
Reviewer Saeed Afzal Marija Zaric	Project Coordinator Kinjal Bari
Acquisition Editor Rahul Nair	Proofreader Safis Editing
Content Development Editor Samantha Gonsalves	Indexer Rekha Nair
Technical Editor Huzefa Unwala	Graphics Jason Monteiro
Production Coordinator Shraddha Falebhai

About the Authors

Benjamin Jakobus graduated with a BSc in Computer Science from University College Cork and obtained an MSc in Advanced Computing from Imperial College London. As a software engineer, he has worked on various web-development projects across Europe and Brazil.

To Marina Barrenne De Artagão Quental, for all your kindness and support. To Eduardo Quental, for giving me so much of your time.

Jason Marah is a software engineer who is currently developing AerLingus.com in Dublin, Ireland, as a lead UI developer. Jason is a University College Cork alumnus, graduating with a BSc in Computer Science. Jason has worked as a full-stack engineer specializing in JavaScript around Europe on various projects.

To Heather, for so much love, support and understanding. To my family and friends for the never-ending encouragement.

About the Reviewers

Marija Zaric is a web designer who loves coding and works with clients from USA and all over the world. She is a relentless learner. Marija creates various Bootstrap themes for the global market.

She was a technical reviewer for the books Responsive Media in HTML5, Mastering Responsive Web Design, and Responsive Web Design Patterns for Packt.

Her projects can be found at http://www.marijazaric.com/.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

• Fully searchable across every book published by Packt
• Copy and paste, print, and bookmark content
• On demand and accessible via a web browser

Preface

Bootstrap is a free CSS and JavaScript framework that allows developers to rapidly build responsive web interfaces. The framework was first conceived by Mark Otto and Jacob Thornton while working at Twitter in 2010. Since its release as an open source project in August of 2011, Bootstrap has become a household name among frontend web developers. The framework’s ease-of-use along with its cross-browser compatibility, support for mobile user interfaces, and responsive web design capabilities, make it an essential building block for any modern web application. Totaling over 600 contributors, and more than 34,000 GitHub forks, Bootstrap has become the world’s most popular responsive web development framework. However, despite its popularity, there are relatively few advanced resources on the fourth, and latest, version of Bootstrap. As such, the motivation behind this book is to provide a comprehensive, step-by-step guide for developers that wish to build a complete, production-ready, website using Bootstrap 4. Once you turn the final pages of this book, you should be mastering the framework’s ins and outs, and building highly customizable and optimized web interfaces. You will know how to both extend the framework, integrate it with third-party components and frameworks, as well as optimize and automate your Bootstrapped builds.

What this book covers

Chapter 1, Revving Up Bootstrap, places the Bootstrap framework into context by highlighting the relevant features that come bundled with it. It briefly deals with various ways to include the framework and concludes by setting up the required files for the book’s demo project.

Chapter 2, Making a Style Statement, introduces the Bootstrap markup and style rules for the mobile-first grid system and HTML image elements. It also goes into the handy helper classes and responsive utilities that Bootstrap makes available to boost development speed.

Chapter 3, Building the Layout, focuses on starting to flesh out the demo project set up in Chapter 1, Revving Up Bootstrap, by adding a style guide for commonly used HTML elements and structuring the page layout.

Chapter 4, On Navigation, Footers, Alerts, and Content, shows you how to take advantage of Bootstrap to build footers and alerts, and how you can add and style various types of content using Bootstrap’s built-in classes.

Chapter 5, Speeding Up Development Using jQuery Plugins, focuses on how to use the handy third-party jQuery plugins to add interactivity and fun to a web page.

Chapter 6, Customizing Your Plugins, delves into the Bootstrap jQuery plugins’ code and customizes it to jazz up this book’s demo page. Plugins will be examined and extended throughout this chapter in an effort to not only make our page better, but to also improve our knowledge of how jQuery plugins are built and how they behave within Bootstrap’s ecosystem.

Chapter 7, Integrating Bootstrap with Third-Party Plugins, will identify new features or improvements that we want to make to our demo website. Consequently, the chapter will introduce libraries to help us achieve those goals, and figure out how these can be gracefully integrated with our existing architecture.

Chapter 8, Optimizing Your Website, shows how your website can be optimized for maximum perfo...

Table of contents

• Mastering Bootstrap 4