Book Overview & Buying
Table Of Contents

Learning Bootstrap 4 by Building Projects

By : Eduonix Learning Solutions

2 (1)

Buy this Book

Learning Bootstrap 4 by Building Projects

2 (1)

By: Eduonix Learning Solutions

Buy this Book

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Introduction

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

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

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

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

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

Lightbox Website

Creating the carousel

Creating the tabs

Creating the three-column layout

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

Creating the three-column layout

We will first start with the content for our All Photos tab. Let's look at the code now:

<div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="all">
            <div class="row">
              <div class="col-md-4">
                <a href="images/sample1.jpg" data-lightbox="gallery" 
                data-title="Sample Image One">
                  <img src="images/sample1.jpg" class="img-thumbnail">
                </a>
                <div class="title">Sample Image One</div>
              </div>

We have a div tag with tab-content as our class. We then added one more div tag with id="all" and set role to tabpanel. Since it's...