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

Creating the navigation bar and footer

So, the next website that we are going to build will be an agency website. Here, we are going to touch on some of the particular areas in Bootstrap 4 that we haven't really got into yet. Before we start coding, let's look at the website that we are going to build:

At the top, there is going to be the navigation. You can see the menu items are highlighted when we hover the mouse over them. The navigation seems to blend in with the page, but when we scroll down, you can see the menu changing a bit—it becomes darker:

When you scroll back, the menu changes to its original state. We also have the jumbotron introduction area that we're going to create.

So, let's go ahead and get into VS Code. The first thing that we have to do is get the template into our index.html file. We have also imported the images that we require...