OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Bootstrap 4 From Scratch With 5 Projects

4.5 Filled star Filled star Filled star Filled star Half star
Based on 17,089 ratings
see reviews
Brad Traversy

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

Read more

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
Enroll now

What's inside

Learning objectives

  • 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

Syllabus

Learn what Bootstrap is and what this course is about. We will also setup the environment for the course

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

Read more

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

Traffic lights

Read about what's good
what should give you pause
and possible dealbreakers
Covers all essential utilities, components, widgets, and grids of Bootstrap 4 from scratch
Offers a custom HTML learning environment for hands-on practice
Builds real-world themes and websites using Bootstrap 4
Includes detailed sections on important Bootstrap 4 concepts like helpers/utilities, components, widgets, flexbox, and more
Provides guidance on using semantic HTML5 and modern CSS3 techniques
Covers the compilation of Sass using a GUI for easy understanding

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Reviews summary

Bootstrap 4 with practical projects

According to learners, this course offers a largely positive experience for mastering Bootstrap 4. Students frequently praise the instructor's clear explanations and engaging teaching style, which makes the content easy to follow. A major highlight is the project-based learning approach, with many finding the five real-world projects extremely valuable for applying concepts and solidifying their understanding. The course provides a solid foundation in Bootstrap 4 utilities, components, and the grid system. While some note that Bootstrap 5 has since been released, the fundamental Bootstrap 4 concepts taught remain highly relevant and the projects provide practical skills.
Helpful tool for practicing concepts.
"The custom sandbox was really useful for trying out the code."
"Liked having the sandbox to follow along with the examples."
"The sandbox environment made practicing Bootstrap quick and easy."
"A neat way to practice the individual Bootstrap features."
Provides a strong foundation in Bootstrap 4.
"Great course on Bootstrap 4, covers all the essentials."
"Really explains the grid system and utilities well."
"I learned so much about Bootstrap 4 from this course."
"Good introduction to Bootstrap 4 components and layout."
Hands-on projects reinforce learning effectively.
"The projects are amazing and really help solidify what you learn."
"Loved building the 5 different projects, it was a great way to practice."
"Learning by doing the projects was the best part of the course."
"The projects helped me apply what I learned and see how it works in practice."
Instructor is clear, knowledgeable, and engaging.
"Brad is an amazing instructor."
"Instructor explains everything very clearly and goes at a good pace."
"Brad is excellent and very knowledgeable. Always enjoy his courses."
"The instructor is very easy to listen to and understand."
Focuses on Bootstrap 4, not the latest version.
"Just keep in mind this is Bootstrap 4, Bootstrap 5 is out now."
"While great for B4, some parts might be a little outdated given B5 exists."
"Focus is strictly on Bootstrap 4."
"Still relevant for B4 projects, but not the newest standard."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Bootstrap 4 From Scratch With 5 Projects with these activities:
Review HTML and CSS basics
Reinforce foundational knowledge of HTML and CSS to support Bootstrap implementation
Browse courses on HTML
Show steps
  • Review HTML elements and syntax
  • Review CSS selectors and styling
Read and summarize 'Bootstrap 4 for Beginners'
Provide a foundation of Bootstrap 4 basics so that understanding more complex topics covered in the course is easier.
View Modern HTML and CSS from the Beginning... on Amazon
Show steps
  • Preview the front and back covers
  • Read and summarize Chapter 1
  • Read and summarize Chapter 5
  • Write a 2-page summary
Find and follow a tutorial on Bootstrap 4 flexbox
Enhance the understanding of Bootstrap Flexbox through a self-guided tutorial.
Browse courses on CSS Flexbox
Show steps
  • Search for a comprehensive tutorial
  • Follow the steps in the tutorial
Four other activities
Expand to see all activities and additional details
Show all seven activities
Practice building Bootstrap 4 grids
Reinforce the understanding of the Bootstrap grid system through repetititve practice.
Browse courses on CSS Grids
Show steps
  • Create 5 grids with different layouts
  • Test and iterate the layouts
Create a Bootstrap 4 landing page
Applying the skills and knowledge gained in this course through the creation of a landing page.
Browse courses on UI Development
Show steps
  • Plan out the page's layout
  • Create HTML and CSS Code
  • Test the web page in different browsers
Answer questions in the course forum
Deepen understanding of Bootstrap concepts by explaining them to others and providing support.
Show steps
  • Review the course topics
  • Monitor the forum
  • Provide thoughtful responses
Create a Bootstrap 4 resource kit
Organize and consolidate relevant Bootstrap materials for future reference and continuous exploration.
Browse courses on Web Development
Show steps
  • Gather tutorials, articles, and code snippets
  • Organize resources by category
  • Create a central repository

Career center

Learners who complete Bootstrap 4 From Scratch With 5 Projects will develop knowledge and skills that may be useful to these careers:
Front-End Developer
Front-end developers are responsible for the design and implementation of the user interface of a website or web application. This course can help you develop the skills needed to become a front-end developer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create responsive, user-friendly websites and applications.
See salaries and explore the career path for Front-End Developer
Web Designer
Web designers are responsible for the overall look and feel of a website or web application. They work with front-end developers to create websites that are both visually appealing and functional. This course can help you develop the skills needed to become a web designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create beautiful, user-friendly websites and applications.
See salaries and explore the career path for Web Designer
UX Designer
UX designers are responsible for the user experience of a website or web application. They work with front-end developers and web designers to create websites and applications that are easy to use and navigate. This course can help you develop the skills needed to become a UX designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create user-friendly websites and applications that meet the needs of users.
See salaries and explore the career path for UX Designer
UI Designer
UI designers are responsible for the visual design of a website or web application. They work with front-end developers and web designers to create websites and applications that are both visually appealing and functional. This course can help you develop the skills needed to become a UI designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create beautiful, user-friendly websites and applications.
See salaries and explore the career path for UI Designer
Web Developer
Web developers are responsible for the development and maintenance of websites and web applications. They work with front-end developers, web designers, and UX designers to create websites and applications that are both visually appealing, functional, and easy to use. This course can help you develop the skills needed to become a web developer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create websites and applications that meet the needs of users.
See salaries and explore the career path for Web Developer
Software Engineer
Software engineers are responsible for the design, development, and maintenance of software applications. They work with other software engineers, as well as with front-end developers, web designers, and UX designers, to create software applications that meet the needs of users. This course can help you develop the skills needed to become a software engineer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create software applications that are both functional and user-friendly.
See salaries and explore the career path for Software Engineer
Product Manager
Product managers are responsible for the development and management of products. They work with other product managers, as well as with front-end developers, web designers, UX designers, and software engineers, to create products that meet the needs of users. This course can help you develop the skills needed to become a product manager, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create products that are both functional and user-friendly.
See salaries and explore the career path for Product Manager
Project Manager
Project managers are responsible for the planning, execution, and closure of projects. They work with other project managers, as well as with front-end developers, web designers, UX designers, and software engineers, to ensure that projects are completed on time, within budget, and to the required quality standards. This course can help you develop the skills needed to become a project manager, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to manage projects and ensure that they are successful.
See salaries and explore the career path for Project Manager
Business Analyst
Business analysts are responsible for understanding the business needs of an organization and translating those needs into technical requirements. They work with other business analysts, as well as with front-end developers, web designers, UX designers, and software engineers, to create solutions that meet the needs of the business. This course can help you develop the skills needed to become a business analyst, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to understand business needs and create solutions that meet those needs.
See salaries and explore the career path for Business Analyst
Data Analyst
Data analysts are responsible for collecting, cleaning, and analyzing data. They work with other data analysts, as well as with front-end developers, web designers, UX designers, and software engineers, to create data-driven solutions that meet the needs of the business. This course can help you develop the skills needed to become a data analyst, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to collect, clean, and analyze data, and to create data-driven solutions.
See salaries and explore the career path for Data Analyst
Market Researcher
Market researchers are responsible for conducting research to understand the needs of customers. They work with other market researchers, as well as with front-end developers, web designers, UX designers, and software engineers, to create products and services that meet the needs of customers. This course can help you develop the skills needed to become a market researcher, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to conduct research and to create products and services that meet the needs of customers.
See salaries and explore the career path for Market Researcher
Technical Writer
Technical writers are responsible for creating documentation for software and hardware products. They work with other technical writers, as well as with front-end developers, web designers, UX designers, and software engineers, to create documentation that is clear, concise, and easy to understand. This course can help you develop the skills needed to become a technical writer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create documentation that is both informative and engaging.
See salaries and explore the career path for Technical Writer
Instructional Designer
Instructional designers are responsible for creating and developing educational materials. They work with other instructional designers, as well as with front-end developers, web designers, UX designers, and software engineers, to create educational materials that are effective and engaging. This course can help you develop the skills needed to become an instructional designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create educational materials that are both informative and engaging.
See salaries and explore the career path for Instructional Designer
E-Learning Developer
E-learning developers are responsible for creating and developing online learning materials. They work with other e-learning developers, as well as with front-end developers, web designers, UX designers, and software engineers, to create online learning materials that are effective and engaging. This course can help you develop the skills needed to become an e-learning developer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create online learning materials that are both informative and engaging.
See salaries and explore the career path for E-Learning Developer
User Experience Researcher
User experience researchers are responsible for researching the user experience of products and services. They work with other user experience researchers, as well as with front-end developers, web designers, UX designers, and software engineers, to create products and services that are easy to use and navigate. This course can help you develop the skills needed to become a user experience researcher, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to research the user experience and to create products and services that are easy to use and navigate.
See salaries and explore the career path for User Experience Researcher

Reading list

We've selected 12 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Bootstrap 4 From Scratch With 5 Projects.
Cover image
Head First JavaScript Programming
Save
Comprehensive guide to HTML5. It covers everything from the basics to more advanced topics, such as using HTML5 for mobile development and creating interactive web applications. It also includes a number of helpful code examples and tutorials.
Head First JavaScript Programming
Paperback
Check
Head First JavaScript Programming
Kindle Edition
Check
Cover image
Responsive Design With Wordpress
Save
Practical guide to building websites with Bootstrap 4. It covers everything from choosing a theme to adding content and styling your site. It would be a good resource for students who want to learn how to use Bootstrap 4 to create real-world websites.
Responsive Design With Wordpress
Paperback
Check
Responsive Design With Wordpress
Kindle Edition
Check
Modern HTML and CSS from the Beginning (Including...
Save
Quick start guide to Bootstrap 4. It covers the basics of Bootstrap 4, including how to install it, use it to create a basic website, and customize it to your liking. It would be a good resource for students who want to learn the basics of Bootstrap 4 quickly.
Modern HTML and CSS from the Beginning (Including...
Paperback
Check
Modern HTML and CSS from the Beginning (Including...
Kindle Edition
Check
Cover image
Responsive web design
Save
Provides a good overview of responsive web design, which key concept in Bootstrap 4. It would be helpful for students who are new to responsive web design.
Responsive Web Design: Second Edition
Paperback
$$
(Français) Responsive web design: N° 4
Paperback
$$
Responsive Web Design: Second Edition
Kindle Edition
$
Cover image
Css3
Save
Comprehensive guide to CSS3. It covers everything from the basics to more advanced topics, such as using CSS3 for animations and creating responsive web design. It also includes a number of helpful code examples and tutorials.
Css3
Paperback
Check
Css3
Kindle Edition
Check
Cover image
Web Design with HTML, CSS, JavaScript and jQuery Set
Save
Provides a good overview of HTML and CSS, which are the foundation of Bootstrap 4. It would be helpful for students who are new to web development.
Web Design with HTML, CSS, JavaScript and jQuery Set
Paperback
$$
Cover image
jQuery in Action
Save
Comprehensive guide to jQuery. It covers everything from the basics to more advanced topics, such as using jQuery for animations and creating interactive web applications. It also includes a number of helpful code examples and tutorials.
jQuery in Action
Paperback
$$
jQuery in Action
Kindle Edition
$$
Cover image
Secrets of the JavaScript Ninja
Save
Provides a good overview of JavaScript, which is used in Bootstrap 4 for things like carousels and popovers. It would be helpful for students who are new to JavaScript.
Secrets of the JavaScript Ninja
Paperback
$$
Cover image
Learning jQuery 3 - Fifth Edition
Save
Great resource for jQuery developers who want to learn more about the library and how to use it effectively.
Learning jQuery 3 - Fifth Edition: Interactive...
Kindle Edition
$$
Cover image
CSS Mastery
Save
Great resource for web designers who want to learn more about CSS and how to use it effectively.
CSS Mastery: Advanced Web Standards Solutions
Kindle Edition
$$
CSS Mastery: Advanced Web Standards Solutions
Paperback
$$
Cover image
A Million And One Random Digits
Save
Great resource for JavaScript developers who want to learn more about the language and how to use it effectively.
A Million And One Random Digits
Paperback
Check
A Million And One Random Digits
Kindle Edition
Check
Cover image
AngularJS: Up and Running
Save
Great resource for AngularJS developers who want to learn more about the framework and how to use it effectively.
AngularJS: Up and Running: Enhanced Productivity...
Paperback
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Bootstrap 4 From Scratch With 5 Projects.
Check Point Jump Start: Quantum Management
Most relevant
Use WordPress to Create a Blog for your Business
Most relevant
Linux: I/O Redirection for DevOps
Most relevant
Governmental Accounting and Reporting I
Most relevant
AWS Organizations Getting Started
Most relevant
Terraform for the Absolute Beginner with Hands-on Labs
Most relevant
Build a Chatbot with Voiceflow: Ecommerce Customer Support
Most relevant
Diabetes Prediction With Pyspark MLLIB
Most relevant
Brand New Brand
Most relevant

Udemy Buyer Protection & Guarantee

Verified partner policies & purchase protections

Global Marketplace Leader
Free Trial & Audit

Free Lecture Previews

Free preview video lectures available for all courses; optional 7-day free trial on Personal Plan subscriptions (cancel before trial ends to avoid conversion).

Return & Refund Policy

30-Day Money-Back Guarantee

30-day money-back guarantee on all eligible individual course purchases (provided course content has not been substantially consumed or downloaded). Subscription fees are non-refundable once billed.

Buyer Protections

Verified Academic & Industry Partner

Lifetime access to purchased individual courses and future updates, verifiable certificate of completion, and direct student Q&A forums.

Key Purchase Protections
30-day 100% money-back guarantee on course purchases
Lifetime access on web, mobile, and offline
Certificate of completion included with purchase
Direct instructor Q&A and active student community
OpenCourser Verified Partner Policy details last reviewed: 2026-10-22
Course image
Rating
4.5 Filled star Filled star Filled star Filled star Half star
Effort
11.5 total hours
Via
Udemy
Instructor
Brad Traversy
Language
English
Traffic lights
Read about what's good
what should give you pause
and possible dealbreakers
Covers all essential utilities, components, widgets, and grids of Bootstrap 4 from scratch
Offers a custom HTML learning environment for hands-on practice
Builds real-world themes and websites using Bootstrap 4
Includes detailed sections on important Bootstrap 4 concepts like helpers/utilities, components, widgets, flexbox, and more
Provides guidance on using semantic HTML5 and modern CSS3 techniques
Covers the compilation of Sass using a GUI for easy understanding
Share this
Share to help others discover this course.
Facebook LinkedIn X Reddit Link Email
Begin learning today
Enroll now to gain full access to Bootstrap 4 From Scratch With 5 Projects.
Enroll now
Save for later
Add this course to your list. Find it anytime.
Save
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser