Bootstrapping Your Web Page Responsively: Building Mobile First Responsive Web with Bootstrap

In my book Responsive Web Design Codified, the readers learn about the needs and rationale for multi-screen friendly websites and the role of responsive web design in meeting such needs, explore the fundamentals of responsive web design through an elaborate walk-through on how to turn an indifferent web page into a responsive one using HTML5 and CSS3 and a combination of Retile, Replace, and Resize methods which I aptly coined the Three R's of Responsive Web Design in that book.

In this way, the whole process is analogous to making a piece of furniture from scratch by applying carpentry knowledge and skills (HTML5, CSS3, and JavaScript) and utilizing the right tools (web authoring software) to carry out the measurement, cutting, sawing, turning, planing, and chiseling on various furniture parts and putting them together according to the design. Unfortunately, this is too time-consuming and error-prone, and may not be everybody's cup of tea!

Alternatively, you can source for ready-made furniture components and put them together. Likewise, in web development, you can choose to use one of the many front-end web development frameworks, such as Bootstrap, Foundation, Skeleton, and W3.CSS, to help you construct a responsive web page faster, easier, and with fewer errors.

In this book, we set our sight on Bootstrap, by far the most popular front-end web development framework. Instead of manhandling HTML5 and CSS3, you will simply acquire the essential components from Bootstrap and assemble them into your web page to make it responsive to different screen sizes according to your design and requirements. The essential components that you need to acquire from Bootstrap for this purpose are container, grid, and navigation bar. This book explains in detail the behaviour and characteristics of these components and their usages reinforced with many examples, illustrations, and exercises. Once you are acquainted yourself with these components, this book will guide you through a hands-on session of assembling these components into a web page to make it into a responsive one. One thing is certain, you will have to employ the Three R's of Responsive Web Design in one way or another. Let the journey begin…