Book Image

Mastering Bootstrap 4 - Second Edition

By : Benjamin Jakobus
Book Image

Mastering Bootstrap 4 - Second Edition

By: Benjamin Jakobus

Overview of this book

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web interfaces. This book will help you use and adapt Bootstrap to produce enticing websites that fit your needs. You will build a customized Bootstrap website from scratch, using various approaches to customize the framework with increasing levels of skill. You will get to grips with Bootstrap's key features and quickly discover various ways in which Bootstrap can help you develop web interfaces. Then take a walk through the fundamental features, such as its grid system, global styles, helper classes, and responsive utilities. When you have mastered these, you will discover how to structure page layouts, utilize Bootstrap's various navigation components, use forms, and style different types of content. Among other things, you will also tour the anatomy of a Bootstrap plugin, create your own custom components, and extend Bootstrap using jQuery. You will also understand what utility classes Bootstrap 4 has to offer, and how you can use them effectively to speed up the development of your website. 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 will be able to build highly customizable and optimized web interfaces.
Table of Contents (18 chapters)
Title Page
Copyright and Credits
Packt Upsell
Contributors
Preface
Index

Chapter 1. Revving Up Bootstrap

Bootstrap is a web development framework that helps developers build web interfaces. Originally conceived at Twitter in 2011 by Mark Otto and Jacob Thornton, the framework is now open source and has grown to be one of the most popular web development frameworks in existence. Being freely available for private, educational, and commercial use meant that Bootstrap quickly grew in popularity. Today, thousands of organizations rely on Bootstrap, including NASA, Walmart, and Bloomberg. According to BuiltWith.com, over 10% of the world's top 1 million websites are built using Bootstrap (http://trends.builtwith.com/docinfo/Twitter-Bootstrap). As such, knowing how to use Bootstrap will be an important skill and will serve as a powerful addition to any web developer's tool belt.

The framework itself consists of a mixture of JavaScript and CSS, and provides developers with all the essential components required to develop a fully-functioning web user interface. Over the course of this book, we will be introducing you to all the most essential features that Bootstrap has to offer by teaching you how to use the framework to build a complete website from scratch. As CSS, HTML, and JavaScript alone are already the subjects of entire books in themselves, we assume that you, the reader, have at least a basic knowledge of these languages.

We begin this chapter by introducing you to our demo website, MyPhoto. This website will accompany us throughout this book, and serve as a practical point of reference. Therefore, all lessons learned will be taught within the context of MyPhoto.

We will then discuss the Bootstrap framework, listing its features and contrasting the current release to the last major release (Bootstrap 3).

Last but not least, this chapter will help you set up your development environment. To ensure equal footing, we will guide you toward installing the right build tools, and precisely detail the various ways in which you can integrate Bootstrap into a project. More advanced readers may safely skip this last part and continue to Chapter 2, Making a Style Statement.

To summarize, this chapter will do the following:

  • Introduce you to our fictional demo project—a website for photographers
  • Explain what is new in the latest version of Bootstrap, and how the latest version differs from the previous major release
  • Show you how to include Bootstrap in our web project