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.

Related Content you might be interested in

Current Title:

Small book image
Learning Bootstrap 4 by Building Projects
Aug, 2018 | 218 pages
Small book image
Mastering Bootstrap 4.
Benjamin Jakobus
Feb, 2018 | 354 pages
Small book image
Practical Web Design
Philippe Hong
Apr, 2018 | 368 pages
Small book image
Bootstrap 4 Cookbook
Ajdin Imsirovic
Jun, 2017 | 338 pages
Table of Contents (9 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Introduction
Introduction
2
Bootstrap 4 Features
Bootstrap 4 Features
What's new in Bootstrap 4 – introducing new features
Migrating to v4
Setting up the code editor
Initializing a new project
A quick introduction to Sass
Gulp
Hello world example
Summary
3
Photosharing Website
Photosharing Website
Building a menu
Footer
Jumbotron
Main content sections
Starting Sass build out
Completing Sass for index
Creating the Contact page
Creating the About page
Creating custom media breakpoints
Installing Font Awesome
Grid analysis
Summary
4
Building a Resume Website
Building a Resume Website
Revising the gulpfile
Creating the HTML layout
Styling the home page
Adding the education and skills section
Adding services and projects
Summary
5
Social Network Frontend
Social Network Frontend
Creating the header layout for the Home page
Creating navigation and wall comments
Creating and styling bubble comments
Creating the My Friends section
Creating the Latest Groups section
Creating the footer section
Creating the Photos section
Summary
6
Agency Website
Agency Website
Creating the navigation bar and footer
Creating the landing page
Adding styles to the navigation and landing page
Creating the WHY CHOOSE US? section
Creating the WHO WE ARE section
Creating OUR CLIENTS section
Creating the contact section
Creating JS code for scrolling animations
Summary
7
Lightbox Website
Lightbox Website
Creating the carousel
Creating the tabs
Creating the three-column layout
Summary
8
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Lightbox Website

In this chapter, we're are going to build our PhotoShak project. This is going to be another kind of photo-sharing project like the one in Chapter 3, Photosharing Website, but this one will have a different layout and we will cover a few more Bootstrap features that we haven't seen yet. We will be creating a carousel, as well as tabs that will have content, in our case, images. We will be covering lightbox and the plugin that we are going to use for it. Let's start building our photo-sharing website.

The topics that we are going to cover are:

  • Creating the carousel
  • Creating the tabs
  • Creating the three-column layout
Previous Section
End of Section 1
Next Section