Bootstrap 4 Tutorial and 10 Projects Course
4.5 (686 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.
3,689 students enrolled

Bootstrap 4 Tutorial and 10 Projects Course

Step by Step learn Bootstrap 4 with tutorial and by creating 10 interesting projects.
4.5 (686 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.
3,689 students enrolled
Created by John Smilga
Last updated 3/2020
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 44 hours on-demand video
  • 42 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
  • Create 10 amazing projects using Bootstrap 4
  • Learn bootstrap classes and grid system.
  • Learn CSS3 tricks and techniques.
  • Learn Jquery Plugins - Like Owl Carousel.
  • Learn CSS Flexbox
Course content
Expand all 249 lectures 43:50:34
+ Course Intro
4 lectures 19:46
Video Blur Fix
01:37
Course Review
00:33
Visual Studio Code Setup
14:03
+ Bootstrap Tutorial
13 lectures 02:11:59
What is Bootstrap?
10:56
Adding Bootstrap To a Project
06:27
Colors in Bootstrap
15:55
Typography in Bootstrap
18:36
Container and Container Fluid
10:07
Responsive Breakpoints
06:30
Bootstrap Grid Intro
06:12
Custom Grid
12:11
Different Column Count
06:12
Bootstrap Grid Nested Columns
05:23
Bootstrap Tutorial - Margin and Padding in the Bootstrap
14:45
Flexbox in Bootstrap D-FLEX
13:46
Flexbox in Bootstrap - Row
04:59
+ Bootstrap 4 Only Project With Font-Awesome 5
28 lectures 04:37:55
Bootstrap 4 Only Project - Project Intro
06:24
Bootstrap 4 Only Project - Download Bootstrap
10:06
Bootstrap 4 Only Project -Download Font-Awesome Icons
06:29
Bootstrap 4 Only Project -Download Fonts,Images,Colors
05:09
Bootstrap 4 Only Project - Emmet Crash Course
06:42
Bootstrap 4 Only Project -First Container
09:08
Bootstrap 4 Only Project -First Container Fluid
08:40
Bootstrap 4 Only Project - First Section
17:42
Bootstrap 4 Only Project - Second Section
08:30
Bootstrap 4 Only Project - First Grid
07:57
Bootstrap 4 Only Project - Second Grid
05:12
Bootstrap 4 Only Project - Screen Size
07:18
Bootstrap 4 Only Project - Screen Size Continued
04:35
Bootstrap 4 Only Project - Emmet Crash Course
11:34
Bootstrap 4 Only Project - Header Section
09:47
Bootstrap 4 Only Project - Skills Section
14:44
Bootstrap 4 Only Project - About Section
17:44
Bootstrap 4 Only Project - Projects Section
10:18
Bootstrap 4 Only Project - Team Section
14:13
Bootstrap 4 Only Project - First Carousel
13:04
Bootstrap 4 Only Project - Filler Section
07:17
Bootstrap 4 Only Project - Blog Section
04:56
Bootstrap 4 Only Project - Contact Section
18:53
Bootstrap 4 Only Project - Review Section
07:15
Bootstrap 4 Only Project - Progress Section
09:46
Bootstrap 4 Only Project - Pricing Section
09:58
Bootstrap 4 Only Project - Footer Section
12:37
Bootstrap 4 Only Project - Navbar
11:57
+ Grandma's Sweets Project
12 lectures 02:55:39
Setup
12:48
Navbar HTML
19:46
Navbar CSS
14:32
Banner
20:13
About Section
17:06
Store Section First Part
12:58
Store Section Second Part
21:42
Services Section
10:11
Order Section
08:26
Footer Section
11:36
Cart
22:09
+ Renters Project
16 lectures 03:41:57
Renters Setup
07:28
Renters Navbar
29:07
Renters Header HTML
18:51
Renters Header CSS
15:39
Renters About HTML
17:39
Renters About CSS
11:15
Renters Featured Section
06:38
Renters Contact Section
08:56
Renters Services HTML
19:11
Renters Services CSS
13:44
Renters Gallery HTML
15:39
Renters Gallery CSS
18:51
Renters - Virtual Tour Section
09:28
Renters - Nearby Places Section
13:04
Renters - Footer
11:10
+ Furniture E-Commerce
27 lectures 05:01:43
Furniture Setup
06:53
Navbar HTML
19:49
Navbar CSS
14:28
Banner HTML
06:41
Banner CSS
13:45
Featured HTML
14:08
Featured CSS
13:25
Partners Carousel Section
14:12
Newsletter Section
09:42
Skills Section
09:28
Footer
14:43
Populate Remaining Pages
17:24
Services Section
09:00
Home Page - Categories HTML
14:01
Home Page - Categories CSS
12:28
Home Page Filler Section
09:27
Products Page - Item Column HTML
05:01
Products Page - Category Column HTML
13:07
Products Page - Category CSS
05:02
Single Product Page - Images HTML
04:49
Single Product Page - Details HTML
11:53
Single Product Page - Details CSS
05:19
Single Product Page - Product Info
07:08
Cart Page - Product Columns
15:18
Cart Page - Cart Totals
06:52
Modal
16:44
+ Car Dealership Project
18 lectures 03:11:21
Car Dealership - Setup
08:37
Car Dealership - Navbar Html
12:55
Car Dealership -Navbar CSS
07:47
Car Dealership - Header HTML
05:56
Car Dealership - Header CSS
18:23
Car Dealership - Section Title
07:17
Car Dealership - Skills Section
07:56
Car Dealership - Prelaoder
05:27
Car Dealership - Inventory Section
18:24
Car Dealership - Question Section
11:46
Car Dealership - Featured Section
20:27
Car Dealership - Gallery Section
15:55
Car Dealership - Contact Section
08:53
Car Dealership - Video Container
11:52
Car Dealership - Services Items
07:24
Car Dealership - Quotes Section
12:51
Car Dealership - Footer Section
04:28
+ Restaurant Website Project
20 lectures 03:50:01
Restaurant Website Project - Project Setup
19:09
Restaurant Website Project - Social Icons Section
16:34
Restaurant Website Project -Header HTML
05:23
Restaurant Website Project - Header CSS
17:19
Restaurant Website Project - Header Animation
12:53
Restaurant Website Project -Header Ripple Effect
05:18
Restaurant Website Project -Special Items Magnific Popup
05:52
Restaurant Website Project - Special Items HTML
12:14
Restaurant Website Project - Special CSS
14:21
Restaurant Website Project - Menu Section
13:47
Restaurant Website Project - About Section
14:40
Restaurant Website Project - Review Section
13:47
Restaurant Website Project - Team Section
09:02
Restaurant Website Project - Contact Section HTML
11:42
Restaurant Website Project - Contact Section CSS
07:54
Restaurant Website Project - Footer and Back To Top Button
05:20
Restaurant Website Project - Navbar HTML
10:11
Restaurant Website Project - Navbar CSS
10:54
Restaurant Website Project - Navbar JS
16:48
+ Portfolio Project with Font Awesome 5
21 lectures 05:50:41
Portfolio Project - Setup
11:17
Download Bootstrap
06:24
Portfolio Project - Top Icons
09:23
Portfolio Project - Navbar HTML
12:53
Portfolio Project - Navbar CSS
16:47
Portfolio Project - Navbar Js Functionality
24:14
Portfolio Project - Slider Section
27:28
Portfolio Project - Skills Section
20:42
Portfolio Project - About Section Modal Video
27:26
Portfolio Project - About Section Progress Part
19:31
Portfolio Project - Projects Section HTML and Isotope.js
22:42
Portfolio Project - Projects Section CSS
13:18
Portfolio Project - Current Project Section
17:43
Portfolio Project - Posts Section
15:25
Portfolio Project - Contact Form Section
14:12
Portfolio Project - Values Section
13:19
Portfolio Project - Reviews Section
18:19
Portfolio Project - Team Section
20:34
Portfolio Project - Numbers Section
05:59
Portfolio Project - Form And Footer Section
22:14
+ Agency Theme Project
26 lectures 03:09:43
Agency Theme Project Setup
10:57
Agency Theme Navbar HTML
07:51
Agency Theme Navbar CSS
07:17
Agency Theme Banner HTML
03:39
Agency Theme Banner CSS
05:18
Agency Theme Banner After
02:50
Agency Theme Banner Icons
06:07
Agency Theme Services HTML
06:31
Agency Theme Services CSS
08:39
Agency Theme Contact Section
10:40
Agency Theme Work HTML
08:45
Agency Theme Work CSS
04:42
Agency Theme Work Plugin
08:59
Agency Theme About HTML
09:21
Agency Theme About CSS
03:13
Agency Theme Projects HTML
05:01
Agency Theme Projects CSS
07:18
Agency Theme Numbers Section
11:10
Agency Theme Team Section
08:35
Agency Theme Progress Bar Section
06:27
Agency Theme Pricing HTML
10:19
Agency Theme Pricing CSS
09:11
Agency Theme Quotes Section
08:35
Agency Theme Quotes Owl Carousel
07:34
Agency Theme Footer
06:46
Requirements
  • Basic knowledge of HTML & CSS
Description

Bootstrap 4  is latest version of the most popular mobile development framework.In this course we will be learning Bootstrap 4 by creating various projects.If you want to build websites quickly Bootstrap 4  is for you!!!!

All Project Intros are available for preview.

1.Project Nr 1 - Long website using only Bootstrap 4  classes for styling with very minimal css .

2.Project Nr 2 - Grandma's Sweets Website

3.Project Nr 3 - Renters Realtors Website

4.Project Nr 4 - Furniture E-commerce Website

5.Project Nr 5 - Car Dealership Website

6.Project Nr 6 - Restaurant Website

7.Project Nr 7 - Portfolio Website

8.Project Nr 8 - Agency Website

9. Project Nr 9 - Music App

10. Project Nr 10 - Admin Theme



Who this course is for:
  • Anyone who wants to work with Bootstrap 4