Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Bootstrap | Bootstrap 5 Course with CSS Bootstrap Practices

Name: Bootstrap | Bootstrap 5 Course with CSS Bootstrap Practices
Rating: 4.6 (24 reviews)

Bootstrap 5 | Learn the most popular CSS Framework Bootstrap with project, build fast, responsive sites with Bootstrap 5

Created byOak Academy, OAK Academy Team

Last updated 7/2026

English

What you'll learn

What is Bootstrap and how to use it?
Creating a web page with Bootstrap 5.
The most used features of Bootstrap from the past to the present and modern Bootstrap 5 features.
Learn and create amazing high quality Bootstrap 5 themes and UIs from scratch
Master every single Bootstrap component
Get a crash course of the Bootstrap Grid System with the theme layout
Learn how to add Website Scrolling Animation to any Bootstrap Component or HTML Element
Bootstrap promotes a mobile-first approach to web design, offering a suite of templates and components that automatically render for use on any device.
Bootstrap is a free frontend web development framework for creating responsive websites.

Course content

5 sections • 39 lectures • 6h 19m total length

Bootstrap 53:01
This lesson will explain what Bootstrap is and its benefits. No code will be written in this section. Topics will be explained through the presentation.

What is Bootstrap?
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
Bootstrap 5 is the newest version of Bootstrap
Project Files0:05
How to Integrate Bootstrap Into Applications13:02
In this lesson we will explain how to integrate Bootstrap into an application.

Bootstrap 5, We can easily get the resources for both approaches from the official website. Let’s begin the discussion with the first approach.
Method 1: Using CDN links – This method of installing Bootstrap is fairly easy but it requires a stable internet connection. It is highly recommended that you follow this method.
Bootstrap, CSS Framework, Bootstrap 5
Step 1: Goto getbootstrap and click Getting Started. There you will find the below CDN links.
Step 2: Copy the links & paste it inside the <head> tag.
Container and Container Fluid in Bootstrap 59:39
In this lesson we will explain what the Container and Container Fluid classes do. We will show how to use them.

Bootstrap Containers
The container class is one of the most important Bootstrap classes.
It provides margins, padding, alignments, and more, to HTML elements.
Bootstrap 5 Typography Review6:58
In this tutorial we will learn the classes we will use with headers.

Bootstrap 5 Typography
Bootstrap typography, including global settings, headings, body text, lists, and more.
Bootstrap Text Features11:31
In this lesson we will learn the classes we will use with fonts. We will show the classes to set their properties such as size and thickness.

Bootstrap 5 Default Settings
Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
Use of Colors in Bootstrap 510:17
In this tutorial we will learn how to work with colors. We will learn how to color the text and use the background color. We will discover Bootstrap's own text classes.

Bootstrap 5 Colors
Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:
Spacing in Bootstrap10:06
In this lesson, we will learn how to use the margin and padding features that we use in CSS with Bootstrap.

Bootstrap 5 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
The classes are used in the format: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl and xxl.
Bootstrap Border8:45
In this lesson we will learn how to create borders with Bootstrap

Bootstrap 5 has a lot of utility/helper classes to quickly style elements without using any CSS code.
Borders
Use the border classes to add or remove borders from an element:
Bootstrap Display9:07
In this lesson, we will learn how to change the structure of our tags using the display property in Bootstrap.

In Bootstrap, the display property controls the layout behavior of elements. Bootstrap provides utility classes like d-none (hide), d-block (display as block), d-inline (display as inline), etc., for responsive display manipulation.
Position Relative & Absolute in Bootstrap10:54
In this lesson, we will learn positioning operations in Bootstrap. First, we will make relative and absolute examples.

Bootstrap 5 Position Values
Bootstrap 5 Position Values offers position utilities for defining the position of elements relative to the viewport’s edge. It supports Fixed, Static, Relative, Absolute, and Sticky positioning, providing helper classes for easy implementation of these properties.
Position Fixed & Sticky in Bootstrap3:24
In this lesson, we will learn positioning operations in Bootstrap.we will make Fixed and Sticky examples.

What is the difference between position:sticky and position:fixed in CSS ?
In CSS, position: sticky and position: fixed both offer elements the ability to stay in a fixed position during scrolling. These two CSS properties, while seemingly similar, have distinct behaviors that can significantly impact the layout and user experience of a webpage. This article will tell you the differences, providing you more understanding of CSS positioning. First, lets see the description of each position values we have then we will start the difference between position sticky and fixed with example and explanation.
Bootstrap Sizing6:26
In this lesson we will learn how to use the width and height properties in Bootstrap.

Sizing Bootstrap 5
Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
Bootstrap 5 Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, and 100% by default. Modify those values as you need to generate different utilities here.
Bootstrap Buttons6:49
In this lesson, we will see the classes we can use when creating buttons in Bootstrap. We will see the different types of buttons we can create with Bootstrap

Bootstrap Buttons
Bootstrap provides different styles of buttons:
To achieve the button styles above, Bootstrap has the following classes:
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Using Images Classes in Bootstrap 56:47
In this lesson, we will learn how to use the classes of the img tag in Bootstrap and what they do

Images Bootstrap
images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Responsive images
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Other Bootstrap 5 Features18:10
In this lesson, we will touch on the basic topics that we don't see in Bootstrap. We will go through the topics we will talk about here quickly. Thus, we will explain all the most frequently used features from the basic features.

Bootstrap5 – What are the Latest Features of Bootstrap 5?
From its enhanced utility classes and custom CSS properties to the notable departure from jQuery in favor of vanilla JavaScript, Bootstrap5 presents a leaner, more efficient framework designed to meet the demands of today's web.
Quiz

Bootstrap Grid14:33
In this tutorial, we will start learning the grid structure that we will use to create a page layout in Bootstrap. We will explain the grid system that we need to pay attention to when using this structure.

Bootstrap Grid System
Bootstrap 5 Grid System
Bootstrap5's grid system allows up to 12 columns across the page.
Using Bootstrap Grid Structure on Different Screen Size in Bootstrap11:14
In this lesson, we will explain how to use the grid structure that we will use to create page layout in Bootstrap for different screen sizes.

Grid Options in Bootstrap 5, Bootstrap5, bootstrap
The following table summarizes how the Bootstrap grid system works across multiple devices:
Extra small<768px = .col-xs
Small>=768px = .col-sm
Medium>=992px = .col-md
Large>=1200px = .col-lg-
Aligning Columns and Gutters in Bootstrap18:09
In this lesson, we will learn how to align the columns when we use the grid structure in Bootstrap. Then we will learn the class we will use to create spaces in the grid structure.

Bootstrap 5 Layout Gutters
Gutters are the gaps between the columns in bootstrap’s grid layout. The gutter modifier classes can be used to change the widths of the gutters. There are 3 primary gutter modifier classes that are listed below:
Bootstrap5 Layout Gutter Modifier Classes:
g-*: This class is used to set the width of the gutter.
gx-*: This class is used to set the width of the gutter in the horizontal direction.
gy-*: This class is used to set the width of the gutter in the vertical direction.
Let's Start Using Flex with Bootstrap 59:44
In this tutorial, we will learn the flex structure, one of the features we can use to create a page layout in Bootstrap.

Bootstrap5 Flex
Bootstrap 5 Flex offers utility classes for creating flexible layouts using Flexbox, ensuring responsiveness across screen sizes. To start, wrap desired elements in a flex container with classes like .container or .row. Then, use flex utility classes to control item layout.
Vertical and Horizontal Alignment in Flex Structure in Bootstrap14:09
In this lesson, we will learn how to align the elements in the flex structure horizontally and vertically, which is one of the features we can use to create page layout in Bootstrap.

How to Center an Element Vertical and Horizontal Alignment in Bootstrap 5 ?
We will see how to center an element Vertical and Horizontal Alignment in Bootstrap 5. Creating visually appealing and structured layouts, in web development often involves ensuring control over the alignment of elements. In Bootstrap 5 achieving both vertical and horizontal center alignment for elements is an encountered requirement.
Other Flexbox Features in Bootstrap 57:00
In this lesson, we will explain the features of the flex structure, which is one of the features we can use to create page layout in Bootstrap, that we have not touched on so far.

Flexbox options: Bootstrap 5 includes several Flexbox options that can be used with its utility classes to make it easier to create flexible and responsive layouts. These utilities can quickly add common flexbox properties to your HTML elements, such as flex-direction, justify-content, and align-items.
Bootstrap List Group12:23
In this lesson, we will learn how to work with groups of lists in Bootstrap and the classes we will use to create a layout for them.

Bootstrap 5 List group
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. List groups are a flexible and powerful component for displaying a series of content. These can be modified and extended to support just about any content within. Use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element.
Bootstrap Form Classes9:17
In this lesson, we will learn the ready-made classes that we will use in form tags in Bootstrap.

Bootstrap5 Form Controls Sizing
Bootstrap 5 Form controls Sizing gives textual form controls on <input>, <select>, and <textarea> elements with custom styles, sizing, focus states, and more.
Bootstrap 5 Form Controls Sizing Classes:
form-control-sm: This class is used to make the size of the form control small.
form-control-lg: This class is used to make the size of the form control large.
Let's Continue Working with Form Elements in Bootstrap 58:58
In this tutorial we will show how to work with form tags in Bootstrap. We will explain how to use the ready-made classes of these tags.

Bootstrap5 Forms Reference
Bootstrap 5 Forms facilitates the different form control styles, layout options, and custom components, in order to generate a wide variety of forms. The complete list of Forms Components is listed below with their brief description.
Bootstrap Other Input Features7:47
In this lesson, we will show other operations we can do with Bootstrap input tags.

Bootstrap5 , Bootstrap , Bootstrap 5, CSS Framework
Input groups play an important role in collecting user information, their likes, and dislikes, feedback, and more. In this era of online business, it has become an integral part of any website to deal with customers. Normal forms are cool but adding customized input groups to it makes it cooler, interactive, and more user-friendly.
Creating Tables With Bootstrap 515:04
In this lesson, we will learn the features we will use when creating tables with Bootstrap.

Bootstrap 5 Responsive Tables
Bootstrap 5 Responsive table is used to make a table responsive in two different categories we can make the table always responsive, or make the table responsive on the basis of the breakpoint.
Bootstrap 5 Responsive Tables:
Table Always Responsive: This is used for horizontal scrolling of the table across all the viewports or specific viewports. To scroll the table horizontally for all the viewports, we can add a class table-responsive.
Table Breakpoint Specific: This s specifically used to scroll the table horizontally on a particular viewport, we can add a class table-responsive-*. This * can be substituted with a particular breakpoint of viewport like sm, md, lg, xl, etc.
Quiz

Bootstrap Features Working With Javascript1:49
In this lesson, we will give an overview of the chapter.
Bootstrap Dropdown10:33
In this lesson, we will learn how to create dropdown menus with Bootstrap.
Bootstrap Modal10:51
In this tutorial, we will learn how to create collapsible fields with Bootstrap. We will cover this topic under modal.
Bootstrap Carousel15:08
In this tutorial, we will learn how to make a carousel with Bootstrap.
Collapse & Accordion in Bootstrap 515:39
In this lesson, we will learn how to create accordions with Bootstrap. At the beginning of the lesson, we will first explain collapse structures. Then we will create an example by combining the two.
Quiz

Bootstrap Project Presentation3:16
In this tutorial, we will introduce the application we will create with Bootstrap.
Navbar14:28
In this tutorial, we will build the navigation part of the application we will create with Bootstrap. Here we will create a section with a different structure according to different screen sizes.
Let’s Start Creating Carousel8:40
In this lesson, we will create the carousel area that will be included in the application we will create with Bootstrap. Here we will create a structure that talks about the trainings and services provided by our company.
Let’s Start Creating the Main Section13:57
In this lesson, we will start creating the largest area of the application we will create with Bootstrap. This will include a section that talks about the features of our company and a section that introduces our teachers. We will use a card structure here. The section we will create here will have a responsive design. Just like the app in general.
Creation of Students and Questions Sections7:10
In this lesson, we will create an application with Bootstrap for students and questions. Here we will make use of dropdown structures.
Creation of Contact and Footer Section14:14
In this tutorial, we will create the last part of the application we will create with Bootstrap. This will include the form and the Footer area.

Requirements

This course is ideal for volunteers who want to become a web developer but don't know how to get started. You don't need to know anything. Just be willing.
We preferred macOs but this is not mandatory. You can prefer to use other Operating Systems.
Having a working computer with 8 GB RAM or higher and internet connection
Desire to learn Web Application Development
Nothing else! It’s just you, your computer, and your ambition to get started today

Description

Hi there,

Welcome to "Bootstrap 5 | Learn the most popular CSS Framework Bootstrap with projects, build fast, responsive sites with Bootstrap 5" course

Bootstrap 5 | Learn the most popular CSS Framework Bootstrap with projects, build fast, responsive sites with Bootstrap 5

Bootstrap is a powerful, extensible, and feature-packed frontend toolkit. Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap promotes a mobile-first approach to web design, offering a suite of templates and components that automatically render for use on any device. Bootstrap 5 is the newest version of Bootstrap.

Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enaeble global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.

Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.

Apply any of our included utility classes to our components to customize their appearance.

Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.

In this course, you will learn to develop a website with Bootstrap 5 from scratch.

If you are thinking to start to learn Bootstrap 5 , this course is the best match for you.

We have explained Bootstrap 5 from beginner to all levels. We have explained all the topics as simple as possible with examples, slides, and diagrams.

We have created a lot of projects while explaining the subjects. Because we believe that applied educations are much more useful than other teaching methods.

Let's talk about the course curriculum now.

In the first part of the course we will learn how to do basic CSS features with Bootstrap. These are the basic properties used in text properties, colors, images and buttons. We will also learn how to integrate Bootstrap into an application. In part 2 we will learn how to create page layouts. We will learn how to use grid and flex structures with Bootstrap 5. In this section, we will learn how to work with list elements and form tags. In the last lesson of our section, we will work with tables. In the third part of the course, we will learn how to use the JavaScript-triggered features of Bootstrap. We will not cover all topics here. We will explain step by step how to make features like dropdown, modal, and carousel. Actually, we don't need to explain them one by one. We can take the codes directly from the document page and use them. But when you want to make changes to existing structures, we will do these operations one by one in this section so that you can learn which class does what. In the last part of our course, we will develop an application to consolidate all we have learned. This will be the website of an educational institution. To learn all this and more, you can take the course now.

No Previous Knowledge is needed!

You don’t need to have previous knowledge about Bootstrap 5. This course will take you from a beginner to a more advanced level with hands-on examples.

You will be confident in using Bootstrap 5, and if you ever get stuck, we will be there to help.

Learn by doing!

So we have made this course as simple as possible in order to take you through step by step so you can feel confident and get a truly good understanding of how to utilize Bootstrap 5. In this course, we will be teaching Bootstrap 5 by creating various projects.

In this tutorial you will learn;

How to create Web Site with Bootstrap 5
Most important Bootstrap 5 topics.
How to create responsive designs for websites
How to easily build the largest and most advanced web site using Bootstrap 5

What is Bootstrap?

Bootstrap is a popular and free open-source CSS framework designed to create responsive, mobile-first websites. It offers pre-built components like buttons, forms, navigation bars, and more, along with a grid system for layout

What can we do using Bootstrap 5?

Bootstrap 5 is a popular front-end framework that allows you to create responsive and mobile-first websites quickly. It provides a wide array of tools, components, and utilities for building modern web applications. Here are some key things you can do with Bootstrap 5:

1. Responsive Layouts

Grid System: Bootstrap 5 has a powerful 12-column grid system that helps create complex layouts that adjust seamlessly across different screen sizes (e.g., mobile, tablet, desktop).
Responsive Utilities: Utilities for handling visibility, alignment, spacing, and more based on the screen size.

2. Pre-built Components

Bootstrap 5 comes with a variety of pre-built components that can be customized:

Navbar: Fully responsive navigation bars that collapse on smaller screens.
Cards: Flexible and extensible content containers with multiple variations.
Buttons: Different styles, sizes, and functionalities (e.g., outline, block-level, disabled).
Forms: Accessible and responsive form controls with validation features.
Modals: Interactive dialog boxes for user actions or alerts.
Dropdowns, Alerts, Badges, Carousels, Progress Bars, and more.

3. Customizable Styling

Themes: Use built-in themes or customize your own by adjusting variables like colors, fonts, and spacing.
Utilities API: Customize spacing, sizing, typography, backgrounds, borders, and more without writing custom CSS.

4. JavaScript Plugins

Interactive Components: Components like modals, tooltips, popovers, and carousels can be enhanced with JavaScript for interactivity.
No jQuery Dependency: Bootstrap 5 no longer relies on jQuery, making it faster and easier to use with modern JavaScript frameworks like React, Vue, or Angular.

5. Icons

Bootstrap Icons: A separate icon library that integrates seamlessly with Bootstrap components.

6. Accessibility

Bootstrap 5 is designed with accessibility in mind, following ARIA standards to ensure components are usable by everyone.

7. Utility-First Approach

Use utility classes to handle styling directly in the HTML, reducing the need for custom CSS and making styling quicker and more consistent.

8. RTL Support

Right-to-left (RTL) support for languages that read from right to left.

9. Customizing and Extending

Use SASS for customizing Bootstrap’s source files, adjusting variables, and creating a unique design system.

Bootstrap 5 is a versatile tool that can be used to build anything from simple landing pages to complex web applications with a consistent and polished design.

Is it hard to learn Bootstrap 5?

Bootstrap 5 is generally considered easy to learn, especially if you have some basic knowledge of HTML, CSS, and JavaScript. Here are a few reasons why learning Bootstrap 5 can be straightforward:

1. Extensive Documentation

Bootstrap 5 has detailed and well-organized documentation, which includes examples, explanations, and code snippets for all components and features. This makes it easy to find information and learn as you go.

2. Consistent Structure

Bootstrap follows a consistent naming convention and structure, so once you learn a few classes and components, it becomes easier to understand the rest.

3. Pre-built Components

With many pre-built components, you can quickly create functional and responsive layouts without writing much custom code. This allows you to focus more on learning how things work rather than building everything from scratch.

4. Large Community and Resources

Since Bootstrap is widely used, there are many tutorials, courses, forums, and community resources available to help you learn and troubleshoot.

5. Utility Classes

Bootstrap 5 emphasizes utility-first design, meaning you can apply common styling directly in your HTML using utility classes. This reduces the need for writing custom CSS, making it easier to learn and implement designs.

6. Gradual Learning Curve

You can start with basic layouts and components, then gradually explore more advanced features like custom themes, responsive design, and JavaScript plugins.

If you're familiar with HTML and CSS, you should be able to start building responsive web pages with Bootstrap 5 fairly quickly. Even if you're new to web development, Bootstrap's structure and resources make it an accessible starting point.

What is the difference between CSS and Bootstrap?

Have you ever wondered about the differences between CSS and Bootstrap? While CSS provides the foundation for web styling, offering unlimited customization, Bootstrap simplifies web development with ready-to-use components, trading some of CSS's flexibility for speed and consistency.

Is tailwind better than Bootstrap?

Tailwind gives you more freedom to design things your way, while Bootstrap has lots of ready-to-use parts that make building websites quicker. If you really care about making your site look just right, Tailwind might be better. But if you need to get a website up fast, Bootstrap could save you a lot of time.

At the end of the course

By the end of the course, You will be able to start building your own website using Bootstrap5 .

Why would you want to take this course?

Our answer is simple: The quality of teaching

OAK Academy, based in London, is an online education company that offers courses in IT, Software, Design, and Development in Turkish, English, and Portuguese. The academy provides over 4,000 hours of video lessons on the Udemy platform.

When you enroll, you will feel the OAK Academy`s seasoned developers' expertise

Video and Audio Production Quality

All our content is created/produced as high-quality video/audio to provide you with the best learning experience.

You will be,

· Seeing clearly

· Hearing clearly

· Moving through the course without distractions

You'll also get:

Lifetime Access to The Cours

Fast & Friendly Support in the Q&A section

Udemy Certificate of Completion Ready for Download

Dive in now into;

Welcome to "Bootstrap 5 | Learn the most popular CSS Framework Bootstrap with projects, build fast, responsive sites with Bootstrap 5" course

Bootstrap 5 | Learn the most popular CSS Framework Bootstrap with projects, build fast, responsive sites with Bootstrap 5

We offer full support, answering any questions.

See you on the other side!

Who this course is for:

Anyone who wants to learn to Bootstrap 5.
Programmers who are interested in building websites with Bootstrap 5.
Anyone who has no previous Web Development coding experience but wants to become an expert
A total beginner, with a curious mind and wants to be a web developer
Anyone planning a job transformation and wants to become a web developer

Bootstrap | Bootstrap 5 Course with CSS Bootstrap Practices

What you'll learn

Explore related topics

Course content

Bootstrap 5 Fundamentals16 lectures • 2hr 15min

Bootstrap 5 Advanced11 lectures • 2hr 8min

Bootstrap Features Working With JavaScript5 lectures • 54min

Bootstrap 5 Project6 lectures • 1hr 2min

Extra1 lecture • 1min

Requirements

Description

Who this course is for: