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 Photos section

For the Photos page, we need ekko-lightbox. There are two ways to get ekko-lightbox into our project, one is using npm and the other is using CDN. For npm, you can run the following command on the terminal:

npm ekko-lightbox

For CDN, you can visit https://cdnjs.com/libraries/ekko-lightbox. From here, you will get the CSS and the js file. Since we have already done something similar earlier, we won't be covering it here now. We have already got ekko-lightbox into our project. As you can see, we have it in our Project folder:

We have got our CSS and js file and this is what's going to make our lightbox work. If you go to the bottom of the index file, you won't see anything new except for the JavaScript code:

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