Bootstrap 4 Complete Guide

What Will I Learn?

Master the Bootstrap 4 class name using custom Bootstrap Playground
Learn how to build a beautiful website
Build your own project using Flexbox
Discover and understand the advanced concepts such as SASS & SCSS
Build your website with Responsive Design

Requirements

Knowledge in HTML and CSS
Web development knowledge

+ View More

Description

This is the complete guide for Bootstrap from Beginners to Advanced. This course provides you the most comprehensive effective way to learn the latest version of Bootstrap.

The Bootstrap 4 builds the fastest way to build the websites without having to re-invent the wheel. Throughout this course, we cover a lot other technologies such as:

HTML5
CSS
Bootstrap 4
Flexbox
Responsive Design
SASS & SCSS

This course is well structured and presented. In this course, we built a custom site called Bootstrap playground which allows you to quickly learn the Bootstrap 4 class names, able to differentiate between Bootstrap 4 components and play around with Bootstrap.

Curriculum For This Course

112 Lessons 10 Hours

Introduction

4 Lessons 00:13:15 Hours

Setup 1- VS Code 00:04:03 Preview
Setup 2- Course Files 00:04:39
Setup 3-Window Size Tool 00:02:03
Setup 4-File Comparisons 00:02:30

Bootstrap Playground - part 1 - Grid & Flex box

18 Lessons 01:38:53 Hours

Intro to Bootstrap Playground 00:04:23 Preview
Containers 00:04:26
The Grid - Part 1 00:00:51
The Grid - Part 2 00:08:59
The Grid - Part 3 00:07:33
The Grid Breakpoints - Part 1 00:05:38
The Grid Breakpoints - Part 2 00:04:51
The Grid Breakpoints - Part 3 00:07:27
Display Properties - Part 1 00:05:13
Display Properties - Part 2 00:07:07
Flex - Part 1 00:06:53
Flex - Part 2 00:04:38
Flex - Part 3 00:10:17
Flex - Part 4 00:06:41
Flex - Part 5 00:03:01
Flex - Part 6 00:04:04
Flex - Part 7 00:04:38
Flex - Part 8 00:02:13

Bootstrap Playground - part 2 - Utilities

16 Lessons 01:17:29 Hours

Typography 00:06:33 Preview
Text Utilities 00:05:50
Code 00:03:40
Bootstrap Colors 00:06:14
Spacing - Part 1 00:07:06
Spacing - Part 2 00:05:51
Spacing - Part 3 00:04:35
Sizing 00:05:08
Images 00:05:02
Figures 00:02:37
Borders 00:06:48
Tables 00:08:55
Vertical Align 00:02:00
Float 00:01:36
Clearfix 00:02:29
Screen Readers 00:03:05

Bootstrap Playground - part 3 - Components

24 Lessons 01:53:54 Hours

Media Objects 00:05:31 Preview
Alerts 00:04:06
Badges 00:04:04
Breadcrumbs 00:03:43
Buttons - part 1 00:03:13
Buttons - part 2 00:05:24
Button Groups 00:04:16
Drop Downs - Part 1 00:06:05
Drop Downs - Part 2 00:05:31
Drop Downs - Part 3 00:02:01
Cards - Part 1 00:04:35
Cards - Part 2 00:04:17
Cards - Part 3 00:04:38
Cards - Part 4 00:06:06
Forms - Part 1 00:04:25
Forms - Part 2 00:05:55
Forms - Part 3 00:03:20
Input Groups 00:07:14
Navs 00:07:11
Navbars - Part 1 00:07:51
Navbars - Part 2 00:03:03
Position 00:03:01
Pagination 00:03:40
Progress Bars 00:04:44

Bootstrap Playground - part 4 - Java Script

7 Lessons 00:35:05 Hours

Carousels 00:04:16 Preview
Collapse 00:07:46
Tooltips 00:01:59
Popovers 00:03:50
Modals 00:06:40
Scrollspy 00:09:36
Bootstrap Playground Wrap Up 00:00:58

Project 1

9 Lessons 00:41:31 Hours

Overview of Project 1 00:01:42
Step 1 00:03:40
Step 2 00:04:26
Step 3 00:04:44
Step 4 00:04:34
Step 5 00:03:24
Step 6 00:03:16
Step 7 00:09:43
Step 8 00:06:02

Project 2

9 Lessons 00:48:39 Hours

Overview of Project 2 00:01:35
Project 2 - Step 1 00:07:42
Project 2 - Step 2 00:06:42
Project 2 - Step 3 - Part 1 00:03:54
Project 2 - Step 3 - Part 2 00:04:34
Project 2 - Step 4 00:05:39
Project 2 - Step 5 00:07:25
Project 2 - Step 6 00:06:41
Project 2 - Step 7 00:04:27

Project 3

25 Lessons 02:34:39 Hours

Project 3 - Bullseye Overview 00:01:54
Project 3 - Template - Step 1 00:05:33
Project 3 - Template - Step 2 00:04:22
Project 3 - Template - Step 3 00:07:06
Project 3 - Template - Step 4 00:06:55
Project 3 - Homepage - Step 1 00:06:53
Project 3 - Homepage - Step 2 00:04:16
Project 3 - Homepage - Step 3 00:09:42
Project 3 - Homepage - Step 4 00:07:42
Project 3 - Homepage - Step 5 00:00:54
Project 3 - About Page 00:03:14
Project 3 - Careers Page 00:06:25
Project 3 - Contact Page 00:09:29
Project 3 - Franchising Page 00:06:39
Project 3 - Location Page - Part 1 00:09:52
Project 3 - Location Page - Part 2 00:05:16
Project 3 - Rewards Page 00:05:35
Project 3 - Menu Page - Part 1 00:10:48
Project 3 -Menu Page - Part 2 00:04:27
Project 3 - Menu Page - Part 3 00:04:59
Project 3 - Menu Page - Part 4 00:11:23
Project 3 -Menu Page - Part 5 00:01:34
Project 3 -Menu Page - Part 6 00:04:51
Project 3 -Menu Page - Part 7 00:07:20
Project 3 - Menu Page - Part 8 00:07:30

Related Courses

Linux command line tutorial - ...

Renjith Nair

Free

Master Python 3 Programming

ramya

$ 200$ 9.99

Master Golang Programming

ramya

$ 200$ 14.99

Master Ethical Hacking

Spark Databox

$ 200$ 9.99

Adobe Photoshop Lightroom Clas...

ramya

$ 54$ 20

Complete Android app developme...

Spark Databox

$ 200$ 9.99

Python Complete reference : Go...

Prabhu Y

$ 94.99$ 13

SDN Practical Hands On Trainin...

Prabhu Y

$ 99$ 9.99

Data Structures & Algorithms i...

Deepika S

$ 129.99$ 9.99

Docker for DevOps

Michael John

$ 149.99$ 12.99

Data Science with Python

Harish Gowda

$ 199.99$ 11.99

The Container, Kubernetes and ...

Sam Johnson

$ 199.99$ 14.99

UiPath Handson on Enterprise R...

Michael Jordan

$ 199.99$ 47

Informatica PowerCenter Traini...

Prerana Krishna

$ 149.99$ 14.99

Mulesoft ESB Training

Kenny James

$ 119.99$ 9.99

Master Devops Online Training

Ajay Prabhakar

$ 94.99$ 8.99

Linux System Programming - A p...

Mohan Parasuram

$ 49.99$ 11.99

Bootstrap 4 Complete Guide