Bootstrap 4 From Scratch With 5 Projects

48,214 students enrolled

Bootstrap 4 From Scratch With 5 Projects

Master Bootstrap 4 and build 5 real world themes while learning HTML5 semantics & CSS3

Bestseller

48,214 students enrolled

Created by Brad Traversy

Last updated 6/2018

English

English [Auto], French [Auto],

Preview this course

Bootstrap 4 From Scratch With 5 Projects

$104.99 $149.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

11.5 hours on-demand video
9 downloadable resources
Full lifetime access
Access on mobile and TV

Certificate of Completion

Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business

What you'll learn

Learn and create amazing high quality Bootstrap 4 themes and UIs from scratch
Learn the Bootstrap 4 utilities, classes, components & JS widgets using a custom sandbox environment
Learn semantic HTML5 & modern CSS3 techniques
Learn to compile Sass in the easiest way possible using a GUI

+ – Intro & Getting Started

5 lectures 32:18

In this intro video we will talk about what you can expect from this course. We will also talk about the Bootstrap 4 projects included

Welcome To The Course

Preview 04:47

What Is Bootstrap & Why Use It?

Preview 07:20

What's New In Bootstrap 4?

05:23

Initial Environment Setup

08:58

In this video we will setup the custom Bootstrap Sandbox UI that I have created. This sandbox will be used in the next few sections to learn about utilities, components, grids, widgets, etc. Make sure you follow along and unzip the files to your machine

Bootstrap Sandbox Setup

Preview 05:50

+ – Typography & Utilities

8 lectures 59:15

Section Introduction

02:28

Headings & Basic Typography

09:14

Text Alignment & Display

09:23

Floats & Fixed Positions

06:15

Colors & Background

09:08

Margin & Padding Spacing

10:28

Sizing & Borders

06:53

CSS Breakpoints

05:26

+ – CSS Components

11 lectures 02:01:26

Section Intro

02:18

Buttons & Button Groups

14:48

Navbar & Navs

21:21

List Groups & Badges

08:45

Forms & Input

13:12

Input Groups

08:09

Alerts & Progress Bars

09:39

Tables & Pagination

09:47

Working With Cards

21:16

Media Objects

07:54

Jumbotron

04:17

+ – Grid System & Flexbox

5 lectures 38:04

Section Introduction

02:09

Grid System

16:56

Grid Alignment

06:01

Flexbox Classes

09:18

Auto Margin, Wrap & Ordering

03:40

+ – JavaScript Widgets

7 lectures 54:45

Section Introduction

01:31

Carousel Slider

16:10

Collapse & Accordion

07:17

Tooltips

08:39

Popovers

06:38

Modals

06:56

ScrollSpy & Smooth Scolling

07:34

+ – Simple Theme Boiler Plate Setup

1 lecture 06:13

Creating The Boiler

06:13

+ – Project 1 - LoopLab Social Theme

6 lectures 56:28

Preview 02:42

Setup & Navbar

07:18

Home Section Area

18:51

Explore Section Area

09:37

Create & Share Section Areas

07:36

Footer, Contact Modal & Menu Smooth Scroll

10:24

+ – Project 2 - Mizuxe Book Theme

8 lectures 01:12:33

Preview 02:46

Setting Up Sass With Koala

10:55

Custom Navbar & Logo

09:34

Showcase & Primary Color Change

06:40

Newsletter & Boxes

14:20

About Section With Accordion

07:12

Authors Area

09:39

Contact & Footer

11:27

+ – Project 3 - Glozzom Multi Page Theme

10 lectures 01:54:35

Preview 03:20

Showcase With Carousel

20:07

Home Icons, Heading & Info Sections

11:30

Video Section With Autoplay Modal

08:57

Photo Gallery & Newsletter

13:15

Page Header & About Section

10:42

Icon Boxes & Testimonial Slider

10:21

Services Page With FAQ Accordion

13:32

Blog Page With Cards

09:54

Contact & Staff Sections

12:57

+ – Project 4 - Blogen Admin UI

7 lectures 01:18:30

Preview 03:53

Navbar & Main Header

10:20

Add Buttons & Modals

15:41

Finishing The Dashboard

12:06

Resource Table Pages

12:16

Details & Settings Pages

11:39

Profile & Login Page

12:35

Requirements

You should have basic knowledge of HTML & CSS
You do NOT need to know any Bootstrap 3

Description

This course will literally take you from knowing nothing about Bootstrap 3 or 4 to learning all of the utilities, components, widgets and grids and building real world themes and websites. You do NOT need to know Bootstrap 3 for this course. Even if you already know Bootstrap 4, skip the learning sections and head right for section 6 to create the simple boiler theme and start the projects. Everything is completely modular!

Custom Bootstrap Sandbox

I have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an html page associated with it and has a start state. As we move along through the lectures, you code along with me learning all that Bootstrap 4 offers including helpers/utilities, components, widgets, flexbox and more.

5 Real Projects/Themes

We will create 5 real world themes including. These projects are completely open source and you are free to use them anywhere.

LoopLap - A social UI Theme
Mizuxe - A Book/Product Showcase Theme (Sass Project)
Blogen - A blog admin area UI
Glozzom - A multi page theme with a carousel and some 3rd party scripts
Portfoligrid - A portfolio theme using the grid, flexbox and the collapse widget

Who this course is for:

Anyone that wants to learn & master Bootstrap 4.1.x and build real world themes

Featured review

Rafael de Queiroz Guzmán ( 98 courses, 8 reviews )

a year ago

Excellent pace. The instructor has an outstanding teaching technique. The course is organized in a way that you got to repeat some tasks several times (without being boring), so it helps you to understand the role of each one of the main Bootstrap 4 components, and despite of this, every component is presented. I would like to see one more project using Bootstrap's "Flex" utility. One plus for non-native English speakers, like myself: Instructor diction is impeccable. Very easy to follow.