Bootstrap masterclass

Learn Bootstrap inside out by building projects from a Webpack boilerplate to converting a Figma design into an HTML prototype for a SaaS app.

Created 21st Jun 2024
English

Register Your Interest

I'm currently working on the final parts of this course , so enter your email below and I'll send you a message when it's been released.

Course Level all levels
Course Language English
Course Chapters 13 chapters
Course Videos 91 videos

Course overview

In this Bootstrap masterclass, you will learn how to build responsive, mobile-first websites using Bootstrap’s powerful grid system, utilities, and components. We'll dive deep into the fundamentals and advanced features of Bootstrap, including typography, forms, buttons, navigation, and much more. You'll also discover how to customise and extend Bootstrap with...

In this Bootstrap masterclass, you will learn how to build responsive, mobile-first websites using Bootstrap’s powerful grid system, utilities, and components. We'll dive deep into the fundamentals and advanced features of Bootstrap, including typography, forms, buttons, navigation, and much more. You'll also discover how to customise and extend Bootstrap with your own styles and themes, and use its utility API to create custom utility classes tailored to your needs.

What sets this course apart is my unique approach to project-based learning. Each project comes with its own Agile board, and, in many cases, Figma design files and Product Requirement Documents (PRDs). This structure ensures you gain real-world practice, mirroring professional workflows. You won't just blindly copy me as we build templates; we'll also implement modern methodologies like Component Driven Development, Domain Driven Development, and Atomic Design to organise and structure your project files.

This course doesn’t stop at just teaching you the basics. We’ll explore advanced topics like Bootstrap’s JavaScript plugins, customising the Bootstrap SCSS source files, and using the new colour settings. You’ll also gain practical experience by building real-world projects like landing pages and dashboards, ensuring you’re ready to apply these skills in a professional setting.

By the end of this course, you'll have a thorough understanding of Bootstrap and be able to create stunning, responsive websites. These skills are highly sought after in the job market, and you can use them to earn income as a frontend web developer. Whether you're looking to freelance, build your own projects, or enhance your career prospects, mastering Bootstrap is a valuable asset.

Join me in this Bootstrap Masterclass and take the next step in your journey to becoming a skilled frontend web developer.

What you will learn
  • Understand what Bootstrap is and why it’s essential for frontend development.
  • Learn how to set up Bootstrap in your projects using CDN and npm.
  • Master the Bootstrap grid system to create responsive layouts.
  • Utilise Bootstrap’s typography settings to style text effectively.
  • Explore and apply Bootstrap’s utility classes for styling and layout control.
  • Create and customise Bootstrap components like alerts, buttons, and cards.
  • Understand what Bootstrap is and why it’s essential for frontend development.
  • Learn how to set up Bootstrap in your projects using CDN and npm.
  • Master the Bootstrap grid system to create responsive layouts.
  • Utilise Bootstrap’s typography settings to style text effectively.
  • Explore and apply Bootstrap’s utility classes for styling and layout control.
  • Create and customise Bootstrap components like alerts, buttons, and cards.
  • Build and manage forms with Bootstrap’s form controls and validation.
  • Use JavaScript to enhance Bootstrap components like modals and carousels.
  • Customise Bootstrap with SCSS to create unique styles and themes.
  • Implement Bootstrap’s new colour settings for consistent design.
  • Integrate Bootstrap Icons to enhance your web designs.
  • Leverage Bootstrap’s responsive utilities for mobile-first development.
  • Understand and use Bootstrap’s Utility API to create custom utilities.
  • Build real-world projects like responsive landing pages and dashboards.
Table of contents

Below, you'll find the table of contents for all the videos available in this course. Click on a chapter to expand and see the videos included.

Course preview
Have a look at what the most comprehensive Bootstrap masterclass has in store for you!
Course goals
The goals of this course are to teach you how to use Bootstrap to create responsive, mobile-first websites, and to provide you with the skills to customise and extend Bootstrap for unique, professional-grade web projects. By mastering Bootstrap, you'll be equipped to earn income as a frontend web developer through freelancing, personal projects, or career advancement.
Course prerequisites
No previous knowledge of Bootstrap is required, but you should understand the basics of HTML, CSS and JavaScript to get the most from this course.
Course structure
I've separated the theory videos from the hands-on projects to provide a clear and organised learning path. My projects are built using real-world methodologies such as Agile, and we'll be working with Figma design files, just as professional frontend web developers do. This approach ensures you gain both the theoretical knowledge and practical experience needed to excel in the industry.
Environment setup
In this video, we'll make sure your development environment is ready to go. We'll cover the installation and setup of essential tools like Node.js, npm, and any other necessary software.
Key terms and concepts we will cover
In this video, I'll introduce you to the key terms and concepts that we'll cover throughout the course. Understanding these foundational elements will help you grasp the more advanced topics we’ll dive into later. From Bootstrap-specific terminology to general frontend development concepts, this video will set the stage for your learning journey.
What is Bootstrap?
We'll start off our core concepts by understanding what Bootstrap is and what it provides your projects when you add it to your codebase.
Chapter introduction
Let's kick off our masterclass by going over core Bootstrap concepts. This chapter is a primer - quick overviews of what I think are important concepts when working with Bootstrap. We'll expand on these concepts in later chapters or during the practical project builds.
Reboot styles
Explore Bootstrap's Reboot styles, which provide an essential foundation by resetting and normalising default browser styles. I'll show you how Reboot ensures a consistent base across all browsers.
Typography
Discover how Bootstrap handles typography, including classes for headings, paragraphs, lists, and text alignment, and how to customise these to fit your design needs.
Forms
Learn about Bootstrap's form controls, layout options, and validation styles, and how to create user-friendly forms that look great.
Tables
Find out how to style and enhance tables using Bootstrap's table classes, covering basic styling as well as advanced features like striped rows and responsive tables.
Media
Understand how to work with media elements in Bootstrap, including responsive images and media objects, to integrate multimedia content effectively.
Grid system
Get introduced to Bootstrap's grid system and learn how to use it to create flexible and scalable layouts for your projects.
Responsive design
Explore the principles of responsive design in Bootstrap and how to make your web pages look great on all devices using responsive utilities and breakpoints.
Utilities
Discover the wide range of utility classes in Bootstrap that simplify styling and layout control, helping you quickly apply common CSS properties.
Components
Learn about Bootstrap's extensive library of components, such as buttons, cards, and navbars, and how to use and customise them to fit your design needs.
JavaScript plugins
Find out about Bootstrap's JavaScript plugins that add interactivity to your web projects, including modals, tooltips, and carousels.
Icons
Explore the integration of Bootstrap Icons and learn how to add and style icons to enhance your web designs.
Customising Bootstrap
Understand how to customise Bootstrap to better fit your project's requirements using Bootstrap's SCSS source files.
Extending Bootstrap
Learn how to extend Bootstrap with your own custom components and utilities to create unique and tailored solutions for your projects.
Chapter introduction
In this chapter, you'll learn the different ways you can add Bootstrap to your project, we'll explore the Bootstrap source code file structure, go through the default Sass options, default colours and typography settings, and then we'll end off the chapter by setting up a project with the required CSS imports that will allow us to customise Bootstrap.
How to add Bootstrap to your project
In this video, I'll show you various ways to add Bootstrap to your project, including using a CDN and installing it via npm. You'll learn the pros and cons of each method and how to get started quickly.
Let's explore the Bootstrap source code
We'll explore the Bootstrap source code file structure in this video. You'll understand how the files are organised and what each file is used for, giving you a better grasp of Bootstrap's internal workings.
Bootstrap's default Sass setup
Discover the default Sass options available in Bootstrap. I'll walk you through the various settings you can configure to customise your Bootstrap build, making it easier to tailor Bootstrap to your project's needs.
Bootstrap default colours
Learn about Bootstrap's default colour system and how to customise it. I'll show you how to use the built-in colour variables to change the colour scheme of your project.
Bootstrap colour modes
Discover colour modes in Bootstrap and how to implement them in your projects. In this video, you'll learn about the new dark and light colour modes, how to switch between them, and customise these modes to enhance your website's visual appeal and usability.
Bootstrap typography
In this video, you'll explore Bootstrap's default typography settings. You'll learn how to customise font styles, sizes, and other typographic elements to match your design requirements.
Setting up Bootstrap for customisation
I'll guide you through creating the required CSS imports and configuring your project to enable Bootstrap customisation, allowing you to make the framework truly your own.
Chapter introduction
Now it's time for us to start customising Bootstrap. In this chapter, we'll go through the steps to customise all aspects of Bootstrap so that your projects look and feel unique. This chapter is for anyone tired of hearing "All Bootstrap Projects Look The Same!".
How to customise Bootstrap's Sass
In this video, I'll show you how to customise Bootstrap's Sass. You'll learn how to modify Bootstrap's source files to change the default styles and behaviour, making the framework align with your design vision.
How to customise Bootstrap CSS variables
Discover how to customise Bootstrap using CSS variables. I'll demonstrate how to change and override default variables to create a personalised look and feel for your project.
Customise Sass variable or CSS variable?
You have options when it comes to customising Boostrap - do you adjust the Sass variable or the CSS variable? Let's go through it in this video.
Chapter introduction
In this chapter, we're going to learn how to build layouts with Bootstrap. As a frontend developer, you'll be building layouts almost every single day, so the sooner you master it with Bootstrap, the easier you'll complete your projects.
How to build layouts with Bootstrap
Before we dive into individual concepts such as the Bootstrap grid, containers and breakpoints, let's start off with a high level overview of how to quickly build layouts with Bootstrap.
Bootstrap grid
Discover the power of Bootstrap's grid system in this video. I'll provide an overview of how the grid system works and how you can use it to create responsive, mobile-first layouts with ease.
Breakpoints
Learn about Bootstrap's breakpoints and how they enable responsive design. I'll explain the different breakpoints available and show you how to use them to ensure your layouts look great on all devices.
Containers
In this video, you'll explore Bootstrap's container classes. I'll demonstrate how to use containers to align your content and create a consistent structure across your web pages.
Vertical and horizontal stacks
Discover how to use vertical and horizontal stacks in Bootstrap to create organised and visually appealing layouts. I'll show you how to stack elements vertically using Bootstrap's utility classes, making it easy to manage spacing and alignment in your designs.
Customising Bootstrap layout options
Let's wrap up this chapter by going through what and how you can customise options related to building layouts with Bootstrap.
Chapter introduction
In this chapter, you'll learn about Bootstrap components. We'll start off with a quick overview of what components are and how to customise components. I've then picked two of the core components - button and navbar - and we'll take a closer look at both of these. Lastly, we'll look at the steps to extend core components and how to create your own components.
What are Bootstrap components?
This video will introduce you to Bootstrap components. I'll explain what components are, their purpose, and how they can help you build feature-rich, responsive web pages with ease.
How to customise components
Learn how to customise Bootstrap components to fit your design needs. I'll show you various methods to override default styles and extend components to match your project's unique requirements.
Button component deep dive
In this video, we'll take a deep dive into Bootstrap's button component. You'll learn about the different button styles, sizes, and states, as well as how to customise and extend button functionality.
Navbar component deep dive
Discover the ins and outs of Bootstrap's navbar component. I'll guide you through creating and customising responsive navigation bars, including adding dropdowns, forms, and other interactive elements.
Extending core components
Learn how to extend Bootstrap components to add new functionality or modify existing behaviour. I'll show you techniques to create more versatile and powerful components for your projects.
Custom components
In this video, you'll learn how to create custom components using Bootstrap. I'll demonstrate how to build your own reusable components that integrate seamlessly with Bootstrap's design system, giving you greater control over your project's UI.
Chapter introduction
In this chapter, you'll learn how Bootstrap uses JavaScript to enhance interactivity and functionality in your web projects.
How Bootstrap uses JavaScript
This video will explain how Bootstrap integrates JavaScript to provide interactive features and components. I'll cover the basics of Bootstrap's JavaScript, including how to include it in your projects.
Bootstrap's JavaScript components
Discover the range of JavaScript components that Bootstrap offers. I'll provide an overview of these components and how they can be used to add interactivity and enhance user experience on your website.
Bootstrap modal deep dive
In this video, we'll take a deep dive into Bootstrap's modal component. You'll learn how to create, customise, and control modals to display content in a focused and interactive way.
Bootstrap Popover deep dive
In this video, we'll delve into Bootstrap's popover component. You'll learn how to create and customise popovers to display rich content and interactive elements when users interact with your page.
Chapter introduction
In this chapter, you'll learn about the various aspects of form creation and customisation using Bootstrap.
Creating basic forms
Learn how to create simple forms using Bootstrap's form components and classes. I'll show you how to build forms with text inputs, buttons, and basic styling.
Form layout options
Explore different layout options for forms in this video. You'll learn how to create inline, horizontal, and vertical forms using Bootstrap's layout utilities.
Custom form controls
Discover how to customise form controls such as input fields, checkboxes, radio buttons, and select dropdowns. I'll demonstrate how to use Bootstrap's custom form control classes to enhance the appearance and functionality of your forms.
Form validation
In this video, you'll learn how to implement form validation using Bootstrap's built-in validation classes and JavaScript. I'll show you how to provide real-time feedback to users as they fill out your forms.
Input groups
Learn how to use input groups and addons to enhance form inputs with additional elements like buttons, text, and icons. I'll guide you through creating input groups for various use cases.
Form accessibility
Ensure your forms are accessible to all users by following best practices and using Bootstrap's accessibility features. In this video, I'll cover techniques to make your forms more inclusive and user-friendly.
Advanced form components
Integrate advanced form components such as date pickers, time pickers, and range sliders with Bootstrap. I'll demonstrate how to add these components to your forms and customise their appearance.
Chapter introduction
Time to build some tables! You'll learn about the various aspects of table creation and customisation using Bootstrap.
Creating basic tables
Learn how to create simple tables using Bootstrap's table classes. I'll show you how to structure your data in an organised and visually appealing way.
Table styles and classes
Explore the different styles and classes available for tables in Bootstrap. You'll learn how to apply striped rows, hover effects, and bordered tables to enhance the look of your data.
Responsive tables
Discover how to make your tables responsive using Bootstrap's built-in utilities. I'll demonstrate techniques to ensure your tables look great on all devices and screen sizes.
Chapter introduction
Let's go through how to embed media elements in your Bootstrap projects.
Images
Learn how to create responsive images using Bootstrap's classes. I'll show you how to ensure your images scale properly across different devices and screen sizes.
Media objects
Explore the media object component in Bootstrap. I'll teach you how to combine text and media in a flexible and efficient way.
Embedding videos
Learn how to embed responsive videos in your Bootstrap projects. I'll show you how to use Bootstrap's responsive embed utilities to ensure your videos look great on all devices.
Using Bootstrap's modal as a video player
In this video, I'll show you how to use Bootstrap's modal component to create a YouTube video player. You'll learn how to embed a YouTube video within a modal, customise the modal's appearance, and ensure it functions smoothly for an enhanced user experience. This practical example will help you leverage Bootstrap's modal component to add engaging video content to your web projects.
Chapter introduction
Bootstrap gives us a wide variety of utilities that we can use to modify or extend components without the need to write additional CSS. Let's go through what's available, how to modify it, and how to use the utility API to extend the available utilities.
Utilities overview
Get introduced to Bootstrap's extensive range of utility classes and how they can simplify your styling and layout tasks.
Spacing utilities
Learn how to use Bootstrap's margin and padding utilities to control spacing within your layouts.
Colour and background utilities
Discover how to apply colours and backgrounds using Bootstrap's utility classes to enhance the visual appeal of your elements.
Display utilities
Understand how to control the display property of elements with Bootstrap's display utilities, including show, hide, and display values.
Flexbox utilities
Explore Bootstrap's flexbox utilities to create flexible and responsive layouts with ease.
Extending utilities with the utility API
Learn how to extend and customise Bootstrap's utilities using the Utility API to create your own utility classes.
Customising utilities with Sass
Discover how to modify Bootstrap's default utility classes using Sass for more personalised styling.
Chapter introduction
I've put this chapter together to help you quickly achieve tweaks and customisations in Bootstrap that you will often find yourself having to do. No need to watch this entire chapter in one go - instead come back and refer to it when needed.
How to modify Bootstrap's font family
In this video, I'll show you how to change the default font family in Bootstrap. I'll guide you through the process of customising the typography settings to match your project's design requirements.
How to modify Bootstrap's body font size
You'll learn how to use Bootstrap's SCSS variables to change the default font size across your entire project.
How to change Bootstrap's background colour
I'll walk you through overriding Bootstrap's default background settings using custom SCSS variables.
How to customise Bootstrap's buttons
This video will cover how to customise the appearance of buttons in Bootstrap. I'll show you how to modify button styles, colours, and sizes to fit your design needs.
How to customise Bootstrap's spacers
Let's go through the steps to customise Bootstrap's margin and padding spacers to create the desired layout and spacing in your project.
How to install Bootstrap with Parcel
In this video, I'll guide you through the steps to install Bootstrap using Parcel. You'll learn how to set up a Parcel project and integrate Bootstrap into your development workflow.
How to install Bootstrap with npm
I'll walk you through the process of setting up a Node.js project and adding Bootstrap as a dependency.
How to install Bootstrap with Vite
Let's get a new project setup with Vite and add Bootstrap to it.
How to install Bootstrap with Webpack
In this video I'll show you how to add Bootstrap to a project using Webpack 5 as the build tool.
How to add Bootstrap to a WordPress theme
In this video, I'll show you how to add Bootstrap to a WordPress theme. I'll guide you through the steps to enqueue Bootstrap styles and scripts in your WordPress theme.
How to add Bootstrap to a Laravel project using Laravel Mix
Time to work on a legacy code base - let's setup an older version of Laravel and add Bootstrap to it using Laravel Mix.
How to add Bootstrap to a Laravel project using Vite
Let's setup a modern Laravel project using Vite as our build tool and get Bootstrap added to it.
Course wrap
You've made it to the end of this masterclass - well done! Let's wrap up this course by going through what your next steps are on your frontend learning journey.
Course FAQs
What is this?
This is a web development video course designed to help you improve your frontend development skills. The course is broken down into smaller chapters, and each chapter contains a series of related videos.
When can I enrol?
When the course is ready, the "Register your interest" button will be replaced with an "Enrol Now" button. Be sure to add your email via the "Register your interest" button to be notified when the course is ready.
Additional resources
  • Frontend web development projects

    Beginner-friendly projects focusing on HTML, CSS, and JavaScript.

    View Projects
  • Free website templates

    Collection of free, high-quality website templates for your next project.

    View Templates
  • Frontend web development quizzes

    Test your knowledge on frontend subjects such as HTML, CSS, and JavaScript.

    View Quizzes