
This course includes our updated coding exercises so you can practice your skills as you learn.
See a demo
Learn how to download and install Bootstrap 5. The latest version of Bootstrap 5 can be downloaded from the official website as well as from the resources for this lecture.
Explore a custom Bootstrap 5 learning kit with code export to CodePen, practice and screencast tabs, responsive examples, and a navigation that mirrors the official docs.
In this lecture you will learn how to create containers. Containers are used to limit the width of content and center it in the viewport.
In this lecture you will learn how to create a grid system. Learn how to build layouts of all shapes and sizes using a twelve column responsive grid system.
In this lecture you will learn how to create columns. Learn how to modify columns with options for alignment, ordering, and offsetting using the flex utilities.
In this lecture you will learn how to use gutters. Gutters are the padding between your columns, used to responsively space and align content in the grid system.
In this lecture you will learn how to use typography. We can use some basic styling for headings, paragraphs, blockquotes, lists and more.
In this lecture you will learn how to use images. We can make them responsive, apply some styling and align them.
In this lecture you will learn how to use tables. The different styles for tables includes contextual color classes, striped rows, hoverable rows, bordered table, small table, and responsive table.
In this lecture you will learn how to use figures. Figures are used when you need to display an image with a related caption.
Explore Bootstrap 5 forms using fieldset for semantic grouping, legend as a heading, and helper text in stacked or inline layouts, with disabled inputs and fieldsets.
Explore Bootstrap form controls, including text inputs and text areas, file inputs, color pickers, and data lists, with sizing, read-only variations, and labeled examples that connect inputs to labels.
Learn to use the range form control in bootstrap, with min, max, and step options, including defaults 0 to 100 and 0 to 10.
In this lecture you will learn about input groups. With input groups we can add text, checkboxes, radio buttons, buttons, button groups and dropdowns on either side of text input elements.
In this lecture you will learn how to create floating labels that float to the top of input fields.
In this lecture you will learn about how to layout forms in Bootstrap. This can be done using the grid system, but it's also possible to create inline forms and horizontal forms.
In this lecture you will learn about the different validation methods provided by Bootstrap. You can choose between the native browser validation and the custom Bootstrap validation. The custom Bootstrap validation can be applied client-side and server-side and can have help text as regular text and as tooltips.
In this lecture you will learn about the accordion component. With this component you can build vertically collapsing accordions using Bootstraps collapse plugin.
In this lecture you will learn about the alert component. You can use this for contextual feedback messages for typical user actions.
In this lecture you will learn about the badge component. This is primarily used for labelling and counting for notifications.
In this lecture you will learn about the breadcrumb component. This is used to indicate the current page’s location within a navigational hierarchy.
In this lecture you will learn about the button component. The button component can be used for actions in forms, modals and more. The button styles can be used with both regular buttons and links and comes in different sizes and colors.
In this lecture you will learn about the button group component. This is a component used to group a series of buttons on a single line either horizontally or vertically.
In this lecture you will learn about the card component. The card component is a flexible content container that includes options for title, subtitle, header, footer, image and various content as well as contextual colors and various layouts.
In this lecture you will learn about the carousel component. The carousel component is used as a slideshow for various kinds of content, and it comes with controls, indicators and captions and different options for behavior.
In this lecture you will learn about the close button. With this component you can easily create a generic close button for dismissing content like modals and alerts.
In this lecture you will learn about the collapse component. The collapse component is used to toggle content on the page.
In this lecture you will learn about the dropdown component. Dropdowns are contextual overlays that can be toggled to show a list of links.
In this lecture you will learn about the list group component. This is a flexible component for displaying a series of content as a list.
In this lecture you will learn about the modal component. Modals are flexible dialog prompts, and they come with different options for functionality and styling.
Please note: The modal examples are not working because of the static example (the first example). If you remove that or comment it out all the other examples will work. Bootstrap sees the static example as an open modal, and therefor won't open the other examples. I will fix this issue in my planned update for the course.
In this lecture you will learn about the navs and tabs component. Navs can be styled as tabs and pills and they can be used to create tab panels.
In this lecture you will learn about the navbar component. The navbar component functions as a wrapper that positions branding, navigation and other elements in a responsive header.
In this lecture you will learn about the offcanvas component. With this component you can build hidden sidebars into your project for navigation, shopping carts and more.
In this lecture you will learn about the pagination component. This component indicates that a series of related content exists across multiple pages. This is useful for long lists of content like search results.
In this lecture you will learn about the placeholders component. This component is used to indicate a loading state. It can be applied to various elements and you can set the width, color, size and animation.
In this lecture you will learn about the popover component. With popovers we can add small overlay content to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.
In this lecture you will learn about the progress component. The progress component can be used to display simple and complex progress bars with options for adding labels, stripes and animated stripes.
In this lecture you will learn about the scrollspy component. The scrollspy component is used to automatically update navigation targets based on scroll position.
In this lecture you will learn about the spinner component. The spinner component is used to indicate the loading state of a component or page.
In this lecture you will learn about the toast component. The toast component is used to push notifications to your visitors.
In this lecture you will learn about the tooltip component. You can easily add tooltips to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.
In this lecture you will learn about the clearfix utility. This is a well-known method to clear floated content if you are experiencing a collapsing container.
In this lecture you will learn about the color and background utility. This can be used to add a background color with an automatic contrasting foreground (text) color.
In this lecture you will learn about the colored links utility. With this you can set the color of links in a similar way as you set the text color of elements.
In this lecture you will learn about the ratio helper. Using this helper you can embed videos, iframes and more in a responsive way that maintains their aspect ratio.
In this lecture you will learn about the position utility. With this utility you can set the position of an element fixed to the top or bottom of the viewport.
In this lecture you will learn about the stack helpers. With these helpers you can get easy access to flexbox properties for vertical and horizontal layout. You can use just one stack helper instead of multiple flexbox utilities.
In this lecture you will learn about the visually hidden helpers. These are used to hide elements on the screen while still making them accessible for screen readers.
In this lecture you will learn about the stretched link utility. You can use this to expand the clickable area of a link to its containing block.
In this lecture you will learn about the text truncation utility. With this utility you can truncate long lines of text with an ellipsis.
In this lecture you will learn about the vertical rule helper. This helper can be used to create vertical dividers like the <hr> element.
In this lecture you will learn about background utilities. Using these utilities you can easily set the background color of an element using both contextual color classes as well as a few variations of black and white. You can also add a linear gradient to a background color.
In this lecture you will learn about border utilities. You can use these to quickly style the border and border-radius of an element. This work well for buttons and images as well as other elements.
In this lecture you will learn about color utilities. Using these utilities you can easily set the text color of an element using both contextual color classes as well as a few variations of black and white.
In this lecture you will learn about the display utility. With this you can change the value of the display property in a responsive way. This also includes showing and hiding elements for both the screen and print.
In this lecture you will learn about the flex utility classes. Using these you can easily change for example the direction, alignment, sizing and order of grid columns and various components.
In this lecture you will learn about the float utility. Using this you can float elements to either the left or right side or set the float to none. You can do this across all breakpoints or only for some breakpoints.
In this lecture you will learn about the interaction utility classes. These can change how the user interacts with your content. It covers text selection and pointer events.
In this lecture you will learn about the opacity utility. You can use this to set the opacity of an element.
In this lecture you will learn about the overflow utility. Using this you can control how content overflows an element.
In this lecture you will learn about the position utility. With this you can change how an element is positioned on the page.
In this lecture you will learn about the shadows utility. With this you can add or remove shadows for an element.
In this lecture you will learn about the sizing utility. Using this you can set the width or height of an element relative to the parent or the viewport.
In this lecture you will learn about the spacing utility classes. Using these utility classes you can set the margin and padding of elements responsively for individual sides or multiple sides.
In this lecture you will learn about the text utility classes. These include utilities to adjust the alignment, wrapping, weight, style, line height and text decoration.
In this lecture you will learn about the vertical align utility. With this you can easily set the vertical alignment for inline, inline-block and table cell elements.
In this lecture you will learn about the visibility utility. With this utility you can visually show and hide elements without affecting the layout or the display property.
Learn to customize and extend Bootstrap 5 with Sass, compile with the Koala app, and tailor global options, color, layout, content forms, components, helpers, and utilities.
Learn how to compile sass with the koala app across Windows, Linux, and Mac, set output paths, and choose compressed, compact, expanded, or nested output styles.
You might experience problems when using the Koala App to compile the Sass files of the latest version of Bootstrap 5. If you do so, I suggest you use Scout App as an alternative. It's free to use and very similar to Koala App.
Extend Bootstrap 5 theme colors by generating gray and named color classes, then create blue tints and shades to compare with the default theme.
Learn to customize Bootstrap 5 grid breakpoints by overriding the variables file, then compile and test across breakpoints from 300 to 1500 pixels to see responsive column changes.
Override Bootstrap 5 breadcrumb divider by customizing the breadcrumb divider variable in Sass, switching from slash to a greater-than character, then compile and refresh to view the updated breadcrumb.
Learn to make Bootstrap 5 cards have equal heights by applying the h-100 sizing class and setting card height to 100%, then compile and refresh the browser to verify.
Learn to customize Bootstrap 5 modals by adjusting the top sliding animation and the extra large modal's max width to calc(100% - 1rem), with a 25% scale-in effect.
Master Bootstrap 5 progress component by applying animated stripes and setting animation timing to 0.5 s for a linear, infinite effect.
Adjust bootstrap spinners by changing the spinner animation speed with the speed variable; set to 1.5 s to slow the border and growing spinners.
Extend Bootstrap 5 position utilities by adding 25% and 75% values to top, bottom, start, and end, overriding the position map and validating in the Koala app.
In this lecture you will learn about Bootstrap Icons. You will learn how to download and install them, how to use them in different ways and how to style them.
A quick look at the Portfolio project that we're going to create later. It will be introduced in more detail in section 9.
You will also find a link to an online demo of this project and an online version of the Responsive Previewer. These can also be found in section 9.
A quick look at the Resume and CV Page project that we're going to create later. It will be introduced in more detail in section 10.
You will also find a link to an online demo of this project and an online version of the Responsive Previewer. These can also be found in section 10.
A quick look at the Knowledge Base project that we're going to create later. It will be introduced in more detail in section 11.
You will also find a link to an online demo of this project and an online version of the Responsive Previewer. These can also be found section 11.
A quick look at the Survey project that we're going to create later. It will be introduced in more detail in section 12.
You will also find a link to an online demo of this project and an online version of the Responsive Previewer. These can also be found in section 12.
A quick look at the Landing Page project that we're going to create later. It will be introduced in more detail in section 13.
You will also find a link to an online demo of this project and an online version of the Responsive Previewer. These can also be found in section 13.
A quick look at the Small Business Website project that we're going to create later. It will be introduced in more detail in section 14.
You will also find a link to an online demo of this project and an online version of the Responsive Previewer. These can also be found in section 14.
Learn how to download and install Font Awesome 5, which we will use for icons in some of the projects later in this course.
ABOUT
Bootstrap - the world's most popular front-end frameworks!
This course covers all the different parts of the latest version of the world's most popular front-end framework, Bootstrap 5.2.2 from October 7, 2022. Bootstrap has been used on millions of websites around the world and have been carefully developed to cover a wide range of typical user interfaces.
Web pages built with Bootstrap 5 works across all kinds of devices, browsers and screen sizes while also taking care of accessibility and a clean and modern design.
This course is for the beginner who want to learn Bootstrap 5 from the bottom up. It goes through all the different parts, but each lecture can be watched independently.
After learning about all the different parts you will learn how to customize and extend Bootstrap 5 with Sass. First of all, I will show you how to compile Sass with the Koala app and introduce you to the Bootstrap 5 Sass files. Then I will show you many examples of how you can customize and extend Bootstrap 5 by changing global options as well as changing the settings and styles for color, layout, content, forms, components, helpers and utilities.
Finally, I will walk you through how to create 6 different projects using Bootstrap 5.
PROJECTS
Learn to build the following projects using Bootstrap 5:
Project 1: Portfolio
Project 2: Resume and CV Page
Project 3: Knowledge Base
Project 4: Survey
Project 5: Landing Page
Project 6: Small Business Website
LEARNING STYLE
More than just video lectures
In addition to the video lectures this course contains the following kinds of learning materials:
Bootstrap 5 Learning Kit:
Downloadable ZIP file that works offline. More than 200 source files included.
A custom built learning kit with source code for all parts of Bootstrap 5. Features a reference section with many examples, a practice section, which you can use while learning about Bootstrap 5, and a screencast section for coding along to my screencasts. You can view the source code directly in the browser, copy it to the clipboard and export each example directly to a new CodePen.
38 coding exercises:
More than 200 automatic tests against your code. This is one of the best ways to learn how to code - no downloads or installations required.
5 quizzes
Test your knowledge in the end of each section by taking Multiple Choice Quizzes
WHY THIS COURSE?
Why this course instead of other Bootstrap courses?
Wondering why you should choose this course instead of other Bootstrap courses? This course has the following features that makes it stand out among the rest:
up to date with the latest version of Bootstrap 5 from October 3, 2022: version 5.2.2
more features and extra learning materials including coding exercises, quizzes and a custom Learning Kit
2 hours and 40 lectures teaching how to customize and extend Bootstrap 5 with Sass
most lectures can be watched independently of each other
has been carefully crafted through more than 300 hours of dedicated work
UPCOMING UPDATES
In the next update in in early 2023 I will walk you through how to create more various different projects using Bootstrap 5. You will learn how to build the following projects:
Blog
Online Forum
Ecommerce Website
... and more to come
I will also be adding more practice activities like coding exercises, quizzes and more.
TESTIMONIALS
Don't take my word for it – read what other students are saying about this course:
Superb course. Very comprehensive and clear.
Geoff Wheatley
It could be the best Bootstrap 5 course on Udemy, I strongly recommend it.
Metin Küçük
He's very thorough and easy to follow. I'm enjoying the course.
Dan Rodriguez
I'm quite impressed on the way the instructor presents his example interactively. His tool is great too.
Rufino S. Dauz, Jr.
Explained things in a clear and concise way. Well organized and updated. Fairly quick to answer questions that may arise.
Filipe Abrantes
I think this is one of the best courses for Bootstrap 5 here on Udemy.
Flying Terra
The instructions are clear and easy to follow. I'm always incredulous with downloading to my machine but this worked flawlessly and is very simple.
Geoffrey Laun
This is great, so much work put in here. Thanks!
Jakob Gegeniger
Much better than many others. I like the pace. Many boilerplate codes are written before, so it saves time.
Kaan Yamanyar
Excellent course
Pushkar Dhaker
I'm updating an app from BS 4 to BS 5. Customizing is done a different way in BS 5. There's not a lot of information on how to do this in blogs or YouTube videos. I was very pleased to find this course which covers this. Thank you. Overall the course is excellent.
E D
Clear presentation and good content. This will be a very helpful course.
Aaron Patton
Super... this is what I am looking for...
Pradeep Betty
Great reference for bootstrap. Be sure to watch and listen closely to the lecture on the learning kit. Easy to follow along if you use the Learning Kit.
Charlie Hager
Yes it's amazing!
Moeez Ali
Every detail is worked on. The Learning Kit is a very good reference work.
Wolfgang Preuss
Very comprehensive overview of all aspects of Bootstrap!
Loc Tran
Great course. Highly recommended. In-depth knowledge is explained using really good examples.
Kati Pierson
The course design and delivery is way too good. Once again I'd like to mention the course is flawless.
Chayanam Venkata Ratna Manikanta Sai Gopal
The course is to the point and offers great references. The videos are just the right length.
Devin Boyd
He is really efficient and the material is really well presented. I feel good about this course.
Mica M.
Excellent course!
Ken McClain
A great walk-through of all the bootstrap features will continue to use as a reference.
Elliot Erickson
Very good course. The Bootstrap UI Kit and the projects are of great value. Thanks!
Sandro Massarani
Thorough and Well designed. Not only are all the miriad Bootstrap 5 functionalities described but the web tool with 3 levels of development with inline collapsable code windows make this a "goto" tool for any developer.
Tom Christopher
I like that you work your way through the accompanying document and have mini tests throughout the lessons. It is easier to grasp the content.
– George Ciesinski
This course is great and right to the point
– Islam mostafa abohashim
The Learning Kit makes this course amazing. It definitely will help your understanding of the bootstrap framework.
– Damien Alleyne
Jeppe put in a lot of effort to make sure his students have everything they needed for this course. The Learning Kit and the Customization Kit are the ultimate tools for learning Bootstrap 5. I will always use them for reference in the future. Thanks Mr. Schaumburg Jensen. I really enjoyed your course.
– Michael G. Haight
By far, one of the best courses on Udemy. I enjoyed every bit of it. Detailed, clear, and full of powerful tools and source code, this is the best coding course on Bootstrap - hands down.
– Abdalrahman Shatou
It's a great course that teaches you everything that you need to know about bootstrap 5.
– Erik Tangvik
Very clear explanation.
– Hendrik Jan Jager
Course is an in depth look at Bootstrap CSS. The reference material is excellent (by itself worth the price of the course).
– Almeida Carlos Ferreira Unipessoal, Lda
Very well paced and thought out. I was missing a few key elements regarding the grid system and this cleared everything up.
– Dale Wright
I liked this course very much due to the natural flow of the content
– Md. Nadim Hossain Sonet
well presented and for the price it's really good.
– John James Burke
I'm impressed. Useful information not offered in the competitor's course, resulting in better understanding.
– Pamela Pierce
a great source for Bootstrap 5. I wrote to Jeppe and I receive a response so so fast. I really recommend it.
– Ayşe Keloğlu
good. got deep knowledge.
– Sanu K K
I am so glad I found this course. It is very easy to follow. All the steps along the way are keeping me motivated to move forward through to each next lesson. I wish other courses could be designed like this. The instructor has put a lot of thought and work into this Bootstrap 5 course and it shows. Just sign up for it. You'll be happy you did.
– Jeffrey Williams
I'm a former teacher and techie, and I can say with some authority that this is a very good course, with clear, comprehensive and practical instruction, plus very useful exercises and references. Key metric: Am I learning? Answer Yes, and at good speed!! Thank you for an up-to-date, excellent class. Worth way more than five stars.
– David Straker
Great introduction to bootstrap! Everything is explained well
– Borgar Stensrud
A practical and very clear course, the resources put in place by the trainer provide real added value, and allow you to learn bootstrap in a very professional way. A buy if you want to learn how to use this framework
– Loucas
I did my first pro website with only bootstrap after this course.
– Robert Ouimet
Exactly what I need to start using the Bootstrap framework for developing my own web pages.
– Ed Schultz
I really like the way the course is being taught. I loved the idea of the learning kit since i just need to give a quick look whenever i need to confirm something im not sure about. The way the teacher teachs is straight and i like it since we are not here to lose time. I wrote jeppe for help and I receive a response so so fast. I really recommend it.
– Diego Muralles
Amazing resource for learning bootstrap
– Gustav Frisholm
Great to see how hands on you show how to use bootstrap!
– Stephan Hoeksema
Excellent course!
– Hector Sanchez
Great to see how hands on you show how to use bootstrap!
– Rollie Colby
Very well detailed and very well explained!
– Querino Anschau Junior
Yes, very good. (...) overall this course has been very good and very informative!
– Benjamin Harrison
Excellent course. Learned a lot. Thank you.
– Tim Markle
Très bon cours, pour l'instant tout est ok :)
– Eric Dekams