Book Image

Learning Bootstrap 4 by Building Projects

Book Image

Learning Bootstrap 4 by Building Projects

Overview of this book

Bootstrap, the world’s most popular frontend framework, is an open source toolkit for building web applications with HTML, CSS, and JavaScript. Learning Bootstrap 4 by Building Projects covers the essentials of Bootstrap 4 along with best practices. The book begins by introducing you to the latest features of Bootstrap 4. You will learn different elements and components of Bootstrap, such as the strict grid system, Sass, which replaced Less, flexbox, Font Awesome, and cards. As you make your way through the chapters, you will use a template that will help you to build different kinds of real-world websites, such as a social media website, a company landing page, a media hosting website, and a profile page, with ease. By the end of this book, you will have built websites that are visually appealing, responsive, and robust.
Table of Contents (9 chapters)
Free Chapter
1
Introduction

Grid analysis

We're going to go through a little bit more in-depth analysis on the grid layouts, so let's go to the https://getbootstrap.com/ website and under Documentation, click on Layout and then click Grid. If you scroll down, you will see some of the configurations that are allowed with the grid. Here they are:

As you can see, we have different class prefixes for different sizes. What we're going to do now is actually go to a playground where we can use these configurations and see what impact they have. Let's search for w3 schools Bootstrap 4 Grid System in Google, and go to the link https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp. Scroll down to the Basic Structure of a Bootstrap 4 Grid section and click on the Try it Yourself button to access the playground:

Let's remove all of the extra lines of code and only keep the ones shown...