Bootstrap 4 From Scratch With 5 Projects
4.7 (11,607 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
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
4.7 (11,607 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
48,214 students enrolled
Created by Brad Traversy
Last updated 6/2018
English
English [Auto], French [Auto], 5 more
  • German [Auto]
  • Indonesian [Auto]
  • Italian [Auto]
  • Portuguese [Auto]
  • Spanish [Auto]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 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
Course content
Expand all 74 lectures 11:21:16
+ 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

Preview 04:47
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

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
+ Project 1 - LoopLab Social Theme
6 lectures 56:28
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
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
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
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.

  1. LoopLap - A social UI Theme
  2. Mizuxe - A Book/Product Showcase Theme (Sass Project)
  3. Blogen - A blog admin area UI
  4. Glozzom - A multi page theme with a carousel and some 3rd party scripts
  5. 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