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 HTML layout

Now, we're going to get into creating our layout for our resume website. Here, we're going to have two columns, as you can see in the target site shown in the following screenshot. We're going to have our footer, our header at the top stretching across, and our picture as well:

Now, we're going to look at our index.html. To start off, we will first remove our Hello, world! and also remove the styling from our style.scss file, if any. Before we start working on our resume website, let's add the popper.min.js script as follows:

 <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src...