Skip to content
#1 in BootstrapUdemyBootstrapPaid courseAll LevelsCertificate

Bootstrap 4 From Scratch With 5 Projects (Udemy.com)

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

Created by: Brad Traversy

Last updated June 2018

Our take

Based on the ratings of 17,122 students, a sample of their written reviews and the syllabus, as the course stood in June 2018. No course pays to be reviewed.

This is a hands-on Bootstrap 4 course from Brad Traversy of Traversy Media, and it is one of the most popular Bootstrap courses on Udemy, with about 71,000 students and more than 17,000 reviews. The first five sections cover typography, utilities, components, the grid, flexbox and the JavaScript widgets inside a custom HTML sandbox, one page per lecture. The remaining sections are a short boilerplate setup and five open source themes: a social UI, a Sass-based book showcase, a multi page site with a carousel, a blog admin panel, and a portfolio grid. It suits people who already know basic HTML and CSS and want to see how the pieces fit together on a real page.

Reviewers like Brad's plain, conversational explanations, and one says this was the first time Bootstrap made sense after two earlier attempts. The sandbox-then-projects structure gets repeated praise, as does the fact that each project tries something different rather than repeating the same layout. The complaints are fewer but specific. The course was last updated in June 2018, so it teaches Bootstrap 4 with jQuery, not Bootstrap 5. One three-star reviewer says questions in the Q&A go unanswered and that the parts on dependencies, Gulp and Sass move too fast for beginners. About 63 percent of ratings are five stars and only a small fraction are one or two.

At 11 hours and 74 lectures it is shorter than a full bootcamp and easy to work through in a couple of weeks. Anyone maintaining an older Bootstrap 4 site, or who wants the grid and utility classes drilled in through practice, will get their money's worth. If a current framework version matters more than the projects, the Bootstrap 5 course on this list is the safer pick.

Best forPeople who know basic HTML and CSS and want to learn Bootstrap 4 by building themes rather than reading the docs.
Skip it ifYou need Bootstrap 5 or an active Q&A board; this one was last updated in 2018 and still leans on jQuery.

Pros

  • Custom sandbox pages for each lecture, so every class and utility is tried before the projects start
  • Five different open source themes: social UI, Sass product page, multi page site, admin panel, portfolio grid
  • Brad's conversational explanations get repeated credit; one reviewer says Bootstrap finally made sense on a third try
  • 11 hours is enough to finish in a couple of weeks without filler

Cons

  • Last updated June 2018, so it covers Bootstrap 4 with jQuery rather than Bootstrap 5
  • A reviewer reports unanswered Q&A questions and no teaching assistants
  • The Gulp, Sass and dependency setup moves quickly for true beginners
I love how he explains everything in a conversational tone. It almost feels like he is sitting next to you.
Andrew Wandola, a student

Listed as all levels, but the requirements assume basic HTML and CSS; total beginners will find the Sass and Gulp parts rushed.

icon
What you will 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

11 sections · 74 lectures · 11 hours of video

  1. 1Intro & Getting Started 3 free previews5 lectures · 32 min
  2. 2Typography & Utilities8 lectures · 59 min
  3. 3CSS Components11 lectures · 2 hours
  4. 4Grid System & Flexbox5 lectures · 38 min
  5. 5JavaScript Widgets7 lectures · 55 min
  6. 6Simple Theme Boiler Plate Setup1 lecture · 6 min
  7. 7Project 1 - LoopLab Social Theme 1 free preview6 lectures · 56 min
  8. 8Project 2 - Mizuxe Book Theme 1 free preview8 lectures · 1.2 hours
  9. 9Project 3 - Glozzom Multi Page Theme 1 free preview10 lectures · 1.9 hours
  10. 10Project 4 - Blogen Admin UI 1 free preview7 lectures · 1.3 hours

Who it is for

The instructor says it suits

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

What you need before you start

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

icon
Course 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

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

icon
More courses by Brad Traversy

$16.99

$129.99

$99.99

$119.99

$11.99

$13.99

icon
More Bootstrap courses

$89.99

$19.99

$84.99

$79.99

$99.99

$54.99

icon
Reviews

4.6

17,122 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Andrew Wandola on 7/31/2020

This is the first course I've ever completed on Udemy. Brad is one instructor I will never forget. I love how he explains everything in a conversational tone. It almost feels like he is sitting next to you. This is my third time studying Bootstrap, and it is also the very first time I have understood it by at least 90%. I love how natural Brad sounds and I love it when he mistakes a mistake occasionally, identifies it, and corrects it. It makes everything feel natural from the onset. I'm so pleased to a point where I've been looking up for a list of courses he's done on Udemy and I intend to learn more from him. On to the next one! Thank you Brad!

By Sergio Garcia on 6/28/2020

This is my 4th course with Brad, and I learn a ton every time. I liked the approach of having a sandbox at the beginning explaining all the classes and also hearing Brad talk about a context in which he might use them, followed by the hands-on approach with the projects. I appreciate that Brad attempted to do something different with each project: the first project was a demonstration of using bootstrap, the second was about using sass, the third was about making a multi-page site, the fourth was about making an application UI, and the fifth using the collapse module to make a one-page seem almost like a multi-page. Appreciate it again Brad!!!

By Horacio Bermudez on 4/10/2020

I have some experience with CSS. After taking this course, I not only learned Bootstrap (BS), I was also able to sharpen my vanilla CSS skills. The sandbox helped to visual what BS could before seeing it displayed in a project. The projects varied in BS and that also helped give a good overview of what you can do with BS. Overall, it was an excellent course.

By Russell Okamura on 10/6/2019

Very helpful. The sandbox was great and is something I know I can reference easily in the future when designing my own websites. Also, throughout the course, I found the redundancy to be very helpful. I did everything together with the videos and I found that by the end, I already knew what Brad was going to type when trying to implement a Navbar or a collapse module or a card. I thoroughly enjoyed this course and found the diversity in the projects to also spark some of my own ideas for ways to design future website ideas.

By Christopher Windsor on 11/1/2018

Excellent Course. Brad did a great job!! He mentioned at one point considering doing server-side programming alongside this. I hope he does (hopefully php). Pros: Everything EXCEPT Cons: At certain times I got a little lost when he spent so much time on the code without showing enough of the effects of the code (i.e. the web page). This was especially so with the project "Blogen Admin UI".

By Steven Wellman on 7/20/2018

This is one of the best courses for learning Bootstrap 4 that I have taken. The first part of the course is the sandbox, which is a series of lessons on how Bootstrap works. You get the blank template files and the final files, so you can code along with Brad, and if you get stuck, you have the finished file on your hard drive to see where you went wrong. The five projects were interesting, and I appreciated that they were different so I could learn different ways of building sites with Bootstrap. I've got 2 other courses from Brad to get to, and I can't wait. He's a good instructor, and I learned a lot. Thanks Brad.

By Petar Scepanovic on 5/25/2018

So many people asking questions and nobody answers, no teaching assistants to help, nothing. In some sections instructors is just too fast and unclear for beginners, especially the part about dependencies, gulp, sas...etc In other udemy courses instructors are far more responsive despite the fact they are busy with other things like everyone else.

By Mahmood Fahim on 1/11/2018

I have been to a lot of courses but haven't seen such an experienced instructor like Mr. Brad Traversy. he explains everything very clearly and all his lectures are very understandable. He uses very simple words in while explaining the lecture and that doesn't compel non-English speakers to look up in the dictionaries for words. This course is 100% suitable for absolute beginners and experts too because there are always new things to learn. Keep it up Mr. Brad Traversy With respect Mahmood Fahim Bangalore India

By Foyah Z Freeman Jr on 9/2/2017

Brad has taken the time to lay out what the course is all about and what I will be learning. His explanations are clear, and makes me excited about my learning. Having completed the course, I must say that the expectations Brad set before beginning was met. The applicability of the course can be seen right away and I am glad that I am now able to create sites using what I learned from this course. Thanks Brad, and I am moving on your newly released PHP course!

By Thierry@delage@ thierry delage on 9/1/2017

I like this couse because it is new like last time whith PHP7 very good

Showing all 10 reviews on CourseDuck

Read all 17,122 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 92 / 100