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

Photosharing Website

In the last chapter, we saw the new features that were introduced in Bootstrap 4 and we also created a simple hello world example. In this chapter, we are going to build a photosharing website. To build this project, we are going to look into the following topics:

  • Website layout
  • Sass variables and CSS styling
  • Creating the Contact and About pages
  • Media breakpoints
  • Installing Font Awesome
  • Grid analysis
Previous Section
End of Section 1
Next Section