Bootstrap 5 Course - The Complete Guide Step by Step (2023)

Focused View

Fatah Gabrial

21:16:16

88 View

01 - Getting Started with Bootstrap 5

001 Introduction to Bootstrap 5.mp4

02:55

002 What you will need.mp4

02:16

003 Hello World.mp4

06:30

004 Bootstrap 5 Document Structure.mp4

01:20

external-links.txt

02 - Layouts in Bootstrap 5

001 Breakpoints in Bootstrap 5.mp4

04:02

002 Containers.mp4

02:28

003 Grid.mp4

06:01

004 Grid Options.mp4

05:32

005 Nesting Rows and Columns.mp4

03:17

006 Column Vertical Alignment.mp4

06:22

007 Column Horizontal Alignment.mp4

05:30

008 Column Wrapping and Column Breaks.mp4

03:28

009 Reordering and Offsetting Columns.mp4

05:38

010 Margin Utilities.mp4

06:34

011 Gutters.mp4

00:49

012 Horizontal Gutters.mp4

05:17

013 Vertical Gutters.mp4

02:06

014 Horizontal and Vertical Gutters.mp4

02:47

03 - Contents in Bootstrap 5

001 Typography.mp4

04:42

002 Inline Text Elements.mp4

05:46

003 Abbreviations and Blockquotes.mp4

05:03

004 Working with Lists.mp4

05:40

005 Images in Bootstrap.mp4

06:20

006 Tables in Bootstrap.mp4

15:36

007 Table Alignment, Nesting and Anatomy.mp4

06:16

008 Figures in Bootstrap.mp4

03:06

04 - Forms in Bootstrap 5

001 Forms in Bootstrap.mp4

05:58

002 Form Control.mp4

13:38

003 Checks and Radios.mp4

11:38

004 Range.mp4

03:34

005 Input Groups.mp4

23:14

006 Floating Labels.mp4

05:07

007 Form Layout.mp4

10:11

008 Horizontal Forms.mp4

06:06

009 Auto Sizing Forms.mp4

07:28

010 Inline Forms.mp4

07:10

011 Form Validation.mp4

08:51

05 - Components in Bootstrap 5

001 Accordions.mp4

10:04

002 Alerts.mp4

06:28

003 Dismissing Alerts.mp4

02:32

004 Badges.mp4

11:37

005 Breadcrumb.mp4

06:46

006 Buttons.mp4

20:54

007 Button Group.mp4

08:14

008 Button Toolbar.mp4

04:59

009 Button Group Alteration.mp4

06:06

010 Card.mp4

12:39

011 Card Sizing.mp4

03:05

012 Card Navigation.mp4

03:44

013 Card Images.mp4

07:38

014 Card Styles.mp4

08:48

015 Carousel.mp4

03:41

016 Carousel Controls.mp4

03:20

017 Carousel Indicators.mp4

03:01

018 Carousel Caption.mp4

03:46

019 Carousel Fade Effect.mp4

02:12

020 Carousel Timing.mp4

02:09

021 Disable Carousel Touch Swiping.mp4

01:13

022 Carousel Dark Variant.mp4

00:49

023 (Bootstrap 5.3 Update) Deprecation of Carousel Dark & The New Method.mp4

03:05

024 Close Button.mp4

02:52

025 (Bootstrap 5.3 Update) Deprecation of btn-close-white & The New Method.mp4

02:04

026 Collapse.mp4

04:19

027 Horizontal Collapse.mp4

02:48

028 Multiple Targets.mp4

04:34

029 Dropdowns.mp4

04:54

030 Split Button.mp4

03:15

031 Dropdown Sizing.mp4

02:19

032 Dark Dropdowns.mp4

01:20

033 (Bootstrap 5.3 Update) Deprecation of Dark Dropdowns & The New Method.mp4

01:59

034 Dropdown Directions.mp4

06:09

035 Dropup and Dropdown Alignment.mp4

07:22

036 Menu Items.mp4

06:25

037 Menu Alignment.mp4

04:40

038 Dropdown Alignment Options.mp4

06:43

039 Menu Contents.mp4

03:36

040 Dropdown Forms.mp4

04:01

041 Dropdown Options.mp4

04:03

042 Dropdown Auto Close.mp4

02:42

043 List Group.mp4

02:24

044 List Group Links and Buttons.mp4

03:31

045 List Group Flush.mp4

00:51

046 Numbered List.mp4

02:36

047 Horizontal List Groups.mp4

03:06

048 Contextual List Group Classes.mp4

03:11

049 List Group with Badges.mp4

02:08

050 List Group with Custom Content.mp4

02:58

051 List Group Checkboxes and Radios.mp4

02:46

052 List Group JavaScript Tabs.mp4

09:17

053 Modals.mp4

06:08

054 Static Backdrop.mp4

02:02

055 Scrolling Long Content.mp4

01:53

056 Vertically Centered.mp4

00:46

057 Modal Tooltips and Popovers.mp4

06:37

058 Using Grid System In Modal.mp4

01:28

059 Varying Modal Content.mp4

09:47

060 Toggle Between Modals.mp4

06:50

061 Optional Modal Sizes.mp4

03:06

062 Navbar.mp4

04:05

063 (Bootstrap 5.3 Update) The All New bg-body-tertiary.mp4

02:28

064 Navigation Links.mp4

06:05

065 Navbar Dropdown.mp4

03:17

066 Navbar Nested Dropdown.mp4

05:22

067 Navbar Forms.mp4

01:54

068 Navbar Input Group.mp4

00:57

069 Navbar Plain Text.mp4

01:03

070 Navbar Colors.mp4

02:01

071 (Bootstrap 5.3 Update) The Navbar Dark-Mode.mp4

01:55

072 (Bootstrap 5.3 Update) The New Navbar Color.mp4

03:29

073 Navbar Containers.mp4

04:00

074 Navbar Placement.mp4

05:02

075 Navbar Scrolling.mp4

02:15

076 Off Canvas Navbar.mp4

10:57

077 Navs and Tabs.mp4

10:10

078 Nav Flex Utilities.mp4

02:09

079 Nav Tabs and Pills with Dropdown.mp4

04:15

080 Tabs and Pills Behaviors.mp4

12:10

081 Offcanvas In-Depth.mp4

06:58

082 (Bootstrap 5.3 Update) Offcanvas Dark-Mode.mp4

01:58

083 Offcanvas Scrolling.mp4

02:35

084 Offcanvas Placement.mp4

02:33

085 Pagination.mp4

06:15

086 Placeholders.mp4

08:44

087 Popovers In-Depth.mp4

05:46

088 Popover Direction.mp4

01:37

089 Custom Popovers.mp4

03:02

090 Dismiss on Next Click.mp4

01:09

091 Enable Popover On Hover.mp4

00:48

092 Progress Bars.mp4

03:30

093 Progress Bar Height and Background.mp4

01:48

094 Stripes And Animation.mp4

01:10

095 (Bootstrap 5.3 Update) The New Progress Bar.mp4

05:19

096 (Bootstrap 5.3 Update) Progress Bar Height.mp4

01:31

097 (Bootstrap 5.3 Update) Labels and Backgrounds in Progress Bars.mp4

03:44

098 (Bootstrap 5.3 Update) Multiple Stacked Progress Bars.mp4

04:44

099 (Bootstrap 5.3 Update) Stripped and Animated Progress Bars.mp4

02:40

100 Scrollspy.mp4

11:16

101 Spinners.mp4

01:37

102 Growing Spinner.mp4

01:03

103 Spinner Alignment.mp4

04:40

104 Spinner Sizes.mp4

01:54

105 Spinner In Buttons.mp4

02:55

106 Toasts.mp4

16:53

107 Toast Alignment.mp4

02:46

108 Tooltips In-Depth.mp4

03:40

109 Custom Tooltip.mp4

02:32

110 Tooltip Directions.mp4

01:49

111 Html in Tooltip.mp4

01:41

112 Tooltip On Disabled Elements.mp4

01:45

06 - Helpers in Bootstrap 5

001 Clearfix.mp4

01:41

002 Colors and Background.mp4

03:41

003 Colored Links.mp4

01:17

004 (Bootstrap 5.3 Update) Link Utilities.mp4

05:43

005 (Bootstrap 5.3 Update) Focus Rings.mp4

05:06

006 (Bootstrap 5.3 Update) Icon Links.mp4

04:39

007 Ratios.mp4

02:42

008 Positions.mp4

04:18

009 Stacks.mp4

07:23

010 Visually Hidden.mp4

00:46

011 Stretched Link.mp4

02:39

012 Text Truncate.mp4

02:19

013 Vertical Rule.mp4

02:13

07 - Utilities in Bootstrap 5

001 Backgrounds.mp4

01:48

002 (Bootstrap 5.3 Update) Additional Background Colors.mp4

03:42

003 Background Gradients.mp4

00:59

004 Background Opacity.mp4

02:22

005 Borders.mp4

03:53

006 Border Color.mp4

03:06

007 Border Opacity.mp4

01:56

008 Border Width.mp4

01:10

009 Border Radius.mp4

01:49

010 Rounded Border Sizes.mp4

02:15

011 Text Colors.mp4

01:34

012 Text Opacity.mp4

01:39

013 Display Inline and Block.mp4

02:45

014 Hiding Elements.mp4

03:31

015 Display In Print.mp4

02:30

016 Flex.mp4

02:03

017 Flex Direction.mp4

05:41

018 Flex Justify Content.mp4

02:37

019 Flex Align Items.mp4

03:44

020 Flex Align Self.mp4

03:58

021 Flex Fill.mp4

02:39

022 Flex Grow And Shrink.mp4

03:27

023 Flex Auto Margins.mp4

01:17

024 Flex With Align Items.mp4

01:53

025 Flex Wrap.mp4

02:18

026 Flex Order.mp4

03:44

027 Flex Align Content.mp4

03:57

028 Flex Media Object.mp4

03:36

029 Responsive Float.mp4

02:35

030 Interactions.mp4

04:49

031 (Bootstrap 5.3 Update) Link Opacity.mp4

03:46

032 (Bootstrap 5.3 Update) Link Underlines.mp4

05:45

033 (Bootstrap 5.3 Update) Colored Links.mp4

02:26

034 (Bootstrap 5.3 Update) Object Fit.mp4

04:17

035 (Bootstrap 5.3 Update) Responsive Object Fit.mp4

04:49

036 Opacity.mp4

01:17

037 Overflow.mp4

03:02

038 Position.mp4

02:32

039 Position Center Elements.mp4

02:23

040 Position Center Elements Within Edges.mp4

03:39

041 Position Examples Part 1.mp4

08:31

042 Position Example Part 2.mp4

05:17

043 Shadow.mp4

02:01

044 Sizing.mp4

05:28

045 Spacing.mp4

03:55

046 Gap.mp4

01:40

047 Text Alignment.mp4

02:46

048 Text Wrap.mp4

01:30

049 Text Break.mp4

01:04

050 Text Transform.mp4

01:47

051 Font Size.mp4

01:05

052 Font Weights And Italics.mp4

02:31

053 Line Height.mp4

01:34

054 Monoscope.mp4

01:06

055 Reset Color.mp4

01:26

056 Text Decoration.mp4

01:57

057 Vertical Alignment.mp4

03:52

058 Visibility.mp4

00:57

059 (Bootstrap 5.3 Update) The Z-Index.mp4

04:51

060 Bootstrap Icons.mp4

06:29

08 - Project 1 EMS Web with Bootstrap 5

001 Introduction to EMS2.0 Application Project.mp4

03:08

002 Creating the Login Page.mp4

09:04

003 Creating Dash Nav and Brand Logo.mp4

05:59

004 Creating the Navbar Toggler.mp4

02:08

005 Creating Navbar Items.mp4

02:40

006 Creating Form Fields for Navbar.mp4

04:56

007 Creating Cards for Dashboard.mp4

03:32

008 Creating Employees List Page.mp4

01:59

009 Creating Employees Page Sidebar.mp4

03:37

010 Creating Employees List Table.mp4

07:15

011 Creating Add Employee Modal.mp4

04:49

012 Creating Add Employee Modal Form.mp4

06:49

013 Creating Details Modal for Employee List.mp4

07:07

014 Creating Edit Details for Employee List.mp4

05:04

015 Creating Delete Modal for Employees List.mp4

05:15

016 Creating Jobs List Page.mp4

01:42

017 Updating the Job List Page.mp4

03:27

018 Creating Job List Table.mp4

01:31

019 Creating Add Job Modal.mp4

02:17

020 Creating Details Modal for Job.mp4

02:05

021 Creating Edit Details for Job Modal.mp4

02:52

022 Creating Delete Modal for Job List.mp4

03:43

external-links.txt

09 - Project 2 Blog App with Bootstrap 5

001 Blog Project Introduction.mp4

01:21

002 Whats required for Template Building.mp4

03:03

003 Creating the index file.mp4

02:18

004 Creating the Navbar and brand logo.mp4

02:31

005 Creating Navbar Toggler.mp4

01:27

006 Creating Navbar Items.mp4

03:01

007 Creating the search field.mp4

02:02

008 Creating the home banner.mp4

06:29

009 Creating the subscribe modal.mp4

06:42

010 Creating Home Posts Section.mp4

05:48

011 Creating Blog Footer.mp4

01:20

012 Adding Custom Effects to Navbar.mp4

02:28

013 Creating Default Page Header.mp4

03:33

014 Creating Post Loop for Default Page.mp4

05:40

015 Creating Sidebar Subscribe Form.mp4

03:00

016 Creating Categories and Archive Widgets.mp4

02:35

017 Creating Page and Post Content Area.mp4

05:00

018 Creating Comment Form for Posts.mp4

03:23

019 Creating the Search Page.mp4

02:06

020 Linking Everything Together.mp4

02:43

external-links.txt

10 - Project 3 Real-World Education Project

001 Introduction to Project.mp4

01:51

002 Setting up Project Folder.mp4

01:17

003 Creating Navbar and Brand.mp4

02:57

004 Creating Navbar Toggler.mp4

01:45

005 Creating Nav Items.mp4

03:12

006 Creating Navbar Search Field.mp4

01:42

007 Creating Navbar Sign-up and Login Buttons.mp4

06:50

008 Creating the Banner Text.mp4

05:44

009 Adding Banner Image.mp4

02:24

010 Creating Site Feature Set.mp4

06:43

011 Creating Course Loop Header.mp4

04:38

012 Creating Course Loop Filter.mp4

04:11

013 Creating Course Loop List Header.mp4

02:01

014 Creating Single Course List Item.mp4

07:19

015 Creating Duplicates of Course Items.mp4

00:39

016 Creating Home Page Content.mp4

04:18

017 Adding Home Content Image.mp4

00:47

018 Creating Subscribe Area.mp4

07:24

019 Creating Main Footer.mp4

01:44

020 Creating Footer Address.mp4

02:44

021 Creating Link Items for Footer.mp4

01:42

022 Creating Social Icons.mp4

04:45

023 Creating Copyright Info.mp4

01:44

024 Creating Sticky Footer.mp4

06:19

025 Creating About Page Header.mp4

05:52

026 Creating About Content Section.mp4

03:11

027 Creating the courses page.mp4

04:20

028 Creating Single Course page and Breadcrumb.mp4

05:44

029 Creating Course Header Description and Meta Data.mp4

06:12

030 Creating Course Meta Data.mp4

03:26

031 Adding Icons to Course Meta Data.mp4

05:18

032 Adding Course Buttons.mp4

03:28

033 Creating Single Course Image.mp4

01:33

034 Creating Single Course Contents.mp4

07:02

035 Creating FAQ Header.mp4

02:14

036 Creating FAQ List.mp4

03:18

037 Creating Post Question Form.mp4

04:26

038 Creating Blog Page and Header.mp4

02:17

039 Creating Blog Posts List.mp4

05:01

040 Creating Blog Sidebar.mp4

02:16

041 Creating Subscribe Modal.mp4

05:22

042 Creating the subscribe form.mp4

02:23

043 Creating Single Post Page.mp4

04:38

044 Creating Contact Page Header.mp4

05:07

045 Creating Contact Page Cards.mp4

06:12

046 Creating Contact Modal.mp4

02:39

047 Linking Everything Together.mp4

04:09

external-links.txt

Description

Build 3 Live Real-World Projects with the Latest Bootstrap 5 CSS Framework. Complete In-Depth Training on Bootstrap 5

What You'll Learn?

You will learn the Latest Bootstrap v5.2 Framework
Build Bootstrap 5 EMS front-end App (Project)
Build Bootstrap 5 Blog App (Project)
Build Bootstrap 5 Educational Website (Project)
Complete Bootstrap Implementation into any website
You will learn Responsive Web Site Designing
You will learn to Build customized Bootstrap 5 Web Apps
You will learn different Breakpoints in Bootstrap 5
You will learn how to use Bootstrap 5 Containers
You will Bootstrap 5 Grid system
You will learn to create responsive images, tables and typography
You will learn to create customized Bootstrap 5 Forms
You will learn all the Bootstrap 5 components like, Badge, Breadcrumb, Buttons, Button group, Card, and much more
You will learn to build a complete Bootstrap 5 Based website

Who is this for?

Anyone who is interested to learn Bootstrap 5

Anyone who wants to become a web designer

Anyone who wants to become a web developer

Anyone who wants to learn responsive web designing

What You Need to Know?

You need to know Basics of HTML5 & CSS3

More details

Description
(June 2023 - Update) Updated Bootstrap Section to Bootstrap 5.3
The course is now updated with the latest version of Bootstrap 5.3 with Dark mode, new progress element and more.
(Updated to Bootstrap 5.2)
Bootstrap is a popular framework designed for the building and development of responsive web applications. With Bootstrap 5, the framework has more UI elements and comes with more advanced features. More than a million websites use Bootstrap and their framework for front-end development.
In this course, you will learn Bootstrap 5 from scratch to an advanced level. You will learn to build 3 Live Real-World projects with the latest Bootstrap 5 CSS framework. We will go through the Bootstrap 5 documentation step by step and learn how to use the UI elements.
Now, before you can get started, you need to have some prerequisites for this course. Although this Bootstrap 5 course covers everything from scratch. You need some skills to get started.
You need to have some skills in HTML5 & CSS3 and you should be able to build some websites with HTML and CSS. If not, thatâ€™s ok, but you still need to know some basics of HTML and CSS.
You should know how Classes and IDs work in CSS because classes and IDs are what are used to build websites with Bootstrap 5. Make sure to have some basic idea of what CSS classes and IDs mean.
You also need to have some skills in JavaScript, although itâ€™s not required in this course much. It is still a good idea to have some skills in JavaScript. Because Bootstrap 5 uses JavaScript at its main core to work with web interactions, like dropdown menus, modals, and other UI elements.
So, hereâ€™s what you will learn throughout the course.
In section 1, you will learn what the Bootstrap 5 Framework is, and you will learn the basic structure of the Bootstrap 5 Basic webpage.
In section 2, you will learn the breakpoints in the Bootstrap 5 grid system, and the types of containers available, and you will also learn how to work with the Bootstrap 5 grid for multiple devices. Including how-to columns inside the grid. You will learn how to align columns vertically, and horizontally, wrap columns, offset, and also re-ordering them. You will learn about margin utilities, gutters, and both horizontal gutters and vertical gutters.
In section 3, you will learn about Bootstrap 5 main contents, in which you will learn about the Typography of Bootstrap 5. You will learn how to use images inside Bootstrap 5, how to create and use Tables within Bootstrap 5 and you will also learn how to create and work with Figures in Bootstrap 5.
In section 4, you will learn how to work with forms and form elements in Bootstrap 5. As a start, you will learn how to create a basic login form with Bootstrap 5 cards and form controls. You will learn to use ways of implying custom and in-built CSS. Also, you will learn to set up and style the form layout within the Bootstrap 5 page.
In section 5, you will learn about the components in Bootstrap 5. You will learn how to use Bootstrap 5â€™s Dismissible alerts, create badges, use Breadcrumbs in Bootstrap 5, create and align Buttons and Button groups within Bootstrap 5, and so much more.
In section 6, you will learn about helpers in Bootstrap 5. you will learn about clearfix, colors, and background, colored links, ratios, positions, stacks, visually hiding elements, stretching links, truncating text, and vertical rule.
In section 7, you will learn about Utilities in Bootstrap 5. This part includes every minor and major detail about all the utilities available in Bootstrap 5.2
Next, you will learn to create and customize Bootstrap 5 cards, create carousels, make collapsible panels, and add data to make it look more original and real-time.
Then you will learn about dropdowns and list groups, you will learn to create popup modals and create and manage simple and complex navigation systems within Bootstrap 5.
Once we get to know about the navigation systems, you will then learn how to create pagination and pop-overs. Next, you will learn how to work with progress bars and work with scroll spy.
Creating Employee Management System with Bootstrap 5
In this project, you will learn how to create a complete Employee management system or an EMS web app with Bootstrap 5. This project will be the front-end of the EMS apps, which consists of, a Login page, dashboard, a form page to create employee data, and another form page to manage or update the employee data all in Bootstrap 5.
Building a Blog Application System with Bootstrap 5
One of the most commons thing on the internet you can always find is a blog. Here in this project, we are going to build a complete blog application with Bootstrap 5. Our blog app will have banner sections to display hero images, cards to display category information, a footer section to display additional info about the blog, and posts and pages to display all kinds of articles. We will also create a comment system with Bootstrap 5 form elements.
Real-World Educational Website Project with Bootstrap 5
As we get some advanced knowledge of Bootstrap 5 by building different types of projects, we will proceed to build an educational website that is going to be live on the web.
The idea of building different types of projects with Bootstrap 5 is to give to a practice of developing web applications and building your skills in web development to master the front-end development of a web with bootstrap 5.
I hope you guys will enjoy the course, See you in class.
Who this course is for:
Anyone who is interested to learn Bootstrap 5
Anyone who wants to become a web designer
Anyone who wants to become a web developer
Anyone who wants to learn responsive web designing

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, my name is Fatah Gabrial and I am a Graphic Designer, Web Designer, Web Developer, and SEO Enthusiast. I have been teaching Graphic Design, Web Design, and Web Development to my students since 2010, and I have helped more than 1000’s students to build their careers, and I have helped more than 100’s students to set up their businesses.I am a Freelancer and I work on many projects from time to time. I share my projects with my students with my client's consent of course so that my students can have a Real-Time experience of how the Real-World Projects work. This helps my students to crack almost any interviews.I love to code, and I love to design more than anything. I also love to adapt to new technologies, which also helps me in learning some new stuff, which I can share with my students later on.In addition, I have worked with many technologies, like WordPress, Adobe Photoshop, HTML5, CSS3, JavaScript, ES6+, jQuery, Angular, React, Python, and Django. I also work with some marketing and optimization techniques like SEO – Search Engine Optimization, Digital Marketing, and Social Media Marketing.Here at Udemy, I am going to share all my skills with you guys. I love to create courses for you so that you guys can master all the technologies as I have done throughout my experience.I am always here and available in the Q & A Section, so you can get in touch with me anytime on Udemy, My Social Media Profiles, or my Website.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.