Mô tả

(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.

Bạn sẽ học được gì

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

Yêu cầu

  • You need to know Basics of HTML5 & CSS3

Nội dung khoá học

10 sections

Getting Started with Bootstrap 5

5 lectures
Introduction to Bootstrap 5
02:55
What you will need
02:16
Hello World
06:30
Bootstrap 5 Document Structure
01:20
Section 1: Quiz
5 questions

Layouts in Bootstrap 5

23 lectures
Breakpoints in Bootstrap 5
04:02
Containers
02:28
Grid
06:01
Grid Coding Exercise
1 question
Grid Options
05:32
Nesting Rows and Columns
03:17
Nesting Rows and Columns Coding Exercise
1 question
Column Vertical Alignment
06:22
Align Items Center Coding Exercise
1 question
Column Horizontal Alignment
05:30
Column Horizonal Alignment Exercise
1 question
Column Wrapping and Column Breaks
03:27
Column Break Coding Exercise
1 question
Reordering and Offsetting Columns
05:38
Column Ordering Coding Exercise
1 question
Move a column with Offset method Coding Exercise
1 question
Margin Utilities
06:34
Margin Utilities Coding Exercise
1 question
Gutters
00:49
Horizontal Gutters
05:17
Vertical Gutters
02:06
Horizontal and Vertical Gutters
02:47
Section 2: Quiz
7 questions

Contents in Bootstrap 5

9 lectures
Typography
04:42
Inline Text Elements
05:46
Abbreviations and Blockquotes
05:03
Working with Lists
05:40
Images in Bootstrap
06:20
Tables in Bootstrap
15:36
Table Alignment, Nesting and Anatomy
06:16
Figures in Bootstrap
03:06
Section 3: Quiz
8 questions

Forms in Bootstrap 5

12 lectures
Forms in Bootstrap
05:58
Form Control
13:38
Checks and Radios
11:38
Range
03:33
Input Groups
23:14
Floating Labels
05:07
Form Layout
10:11
Horizontal Forms
06:06
Auto Sizing Forms
07:28
Inline Forms
07:10
Form Validation
08:50
Section 4: Quiz
7 questions

Components in Bootstrap 5

113 lectures
Accordions
10:04
Alerts
06:28
Dismissing Alerts
02:32
Badges
11:37
Breadcrumb
06:45
Buttons
20:54
Button Group
08:14
Button Toolbar
04:59
Button Group Alteration
06:06
Card
12:39
Card Sizing
03:05
Card Navigation
03:44
Card Images
07:38
Card Styles
08:48
Carousel
03:41
Carousel Controls
03:20
Carousel Indicators
03:01
Carousel Caption
03:46
Carousel Fade Effect
02:12
Carousel Timing
02:09
Disable Carousel Touch Swiping
01:13
Carousel Dark Variant
00:49
(Bootstrap 5.3 Update) Deprecation of Carousel Dark & The New Method
03:05
Close Button
02:52
(Bootstrap 5.3 Update) Deprecation of "btn-close-white" & The New Method
02:04
Collapse
04:19
Horizontal Collapse
02:47
Multiple Targets
04:34
Dropdowns
04:54
Split Button
03:14
Dropdown Sizing
02:19
Dark Dropdowns
01:20
(Bootstrap 5.3 Update) Deprecation of Dark Dropdowns & The New Method
01:59
Dropdown Directions
06:09
Dropup and Dropdown Alignment
07:22
Menu Items
06:25
Menu Alignment
04:40
Dropdown Alignment Options
06:43
Menu Contents
03:36
Dropdown Forms
04:01
Dropdown Options
04:03
Dropdown Auto Close
02:42
List Group
02:24
List Group Links and Buttons
03:31
List Group Flush
00:51
Numbered List
02:36
Horizontal List Groups
03:05
Contextual List Group Classes
03:11
List Group with Badges
02:08
List Group with Custom Content
02:58
List Group Checkboxes and Radios
02:46
List Group JavaScript Tabs
09:17
Modals
06:08
Static Backdrop
02:02
Scrolling Long Content
01:53
Vertically Centered
00:46
Modal Tooltips and Popovers
06:37
Using Grid System In Modal
01:28
Varying Modal Content
09:47
Toggle Between Modals
06:50
Optional Modal Sizes
03:06
Navbar
04:05
(Bootstrap 5.3 Update) The All New "bg-body-tertiary"
02:28
Navigation Links
06:05
Navbar Dropdown
03:17
Navbar Nested Dropdown
05:22
Navbar Forms
01:54
Navbar Input Group
00:57
Navbar Plain Text
01:03
Navbar Colors
02:01
(Bootstrap 5.3 Update) The Navbar Dark-Mode
01:54
(Bootstrap 5.3 Update) The New Navbar Color
03:29
Navbar Containers
04:00
Navbar Placement
05:02
Navbar Scrolling
02:15
Off Canvas Navbar
10:57
Navs and Tabs
10:10
Nav Flex Utilities
02:09
Nav Tabs and Pills with Dropdown
04:15
Tabs and Pills Behaviors
12:10
Offcanvas In-Depth
06:58
(Bootstrap 5.3 Update) Offcanvas Dark-Mode
01:58
Offcanvas Scrolling
02:35
Offcanvas Placement
02:33
Pagination
06:15
Placeholders
08:44
Popovers In-Depth
05:46
Popover Direction
01:37
Custom Popovers
03:02
Dismiss on Next Click
01:09
Enable Popover On Hover
00:48
Progress Bars
03:30
Progress Bar Height and Background
01:48
Stripes And Animation
01:10
(Bootstrap 5.3 Update) The New Progress Bar
05:19
(Bootstrap 5.3 Update) Progress Bar Height
01:31
(Bootstrap 5.3 Update) Labels and Backgrounds in Progress Bars
03:43
(Bootstrap 5.3 Update) Multiple Stacked Progress Bars
04:44
(Bootstrap 5.3 Update) Stripped and Animated Progress Bars
02:40
Scrollspy
11:16
Spinners
01:37
Growing Spinner
01:03
Spinner Alignment
04:40
Spinner Sizes
01:54
Spinner In Buttons
02:54
Toasts
16:53
Toast Alignment
02:46
Tooltips In-Depth
03:40
Custom Tooltip
02:32
Tooltip Directions
01:49
Html in Tooltip
01:41
Tooltip On Disabled Elements
01:45
Section 5: Quiz
26 questions

Helpers in Bootstrap 5

14 lectures
Clearfix
01:41
Colors and Background
03:41
Colored Links
01:17
(Bootstrap 5.3 Update) Link Utilities
05:43
(Bootstrap 5.3 Update) Focus Rings
05:06
(Bootstrap 5.3 Update) Icon Links
04:38
Ratios
02:42
Positions
04:18
Stacks
07:23
Visually Hidden
00:46
Stretched Link
02:39
Text Truncate
02:19
Vertical Rule
02:13
Section 6: Quiz
10 questions

Utilities in Bootstrap 5

61 lectures
Backgrounds
01:48
(Bootstrap 5.3 Update) Additional Background Colors
03:42
Background Gradients
00:59
Background Opacity
02:22
Borders
03:53
Border Color
03:06
Border Opacity
01:56
Border Width
01:10
Border Radius
01:49
Rounded Border Sizes
02:15
Text Colors
01:34
Text Opacity
01:39
Display Inline and Block
02:44
Hiding Elements
03:31
Display In Print
02:30
Flex
02:03
Flex Direction
05:41
Flex Justify Content
02:37
Flex Align Items
03:44
Flex Align Self
03:58
Flex Fill
02:39
Flex Grow And Shrink
03:26
Flex Auto Margins
01:17
Flex With Align Items
01:53
Flex Wrap
02:18
Flex Order
03:44
Flex Align Content
03:57
Flex Media Object
03:36
Responsive Float
02:35
Interactions
04:49
(Bootstrap 5.3 Update) Link Opacity
03:46
(Bootstrap 5.3 Update) Link Underlines
05:45
(Bootstrap 5.3 Update) Colored Links
02:26
(Bootstrap 5.3 Update) Object Fit
04:16
(Bootstrap 5.3 Update) Responsive Object Fit
04:49
Opacity
01:17
Overflow
03:02
Position
02:32
Position Center Elements
02:23
Position Center Elements Within Edges
03:39
Position Examples Part 1
08:31
Position Example Part 2
05:17
Shadow
02:01
Sizing
05:28
Spacing
03:55
Gap
01:40
Text Alignment
02:45
Text Wrap
01:30
Text Break
01:04
Text Transform
01:47
Font Size
01:05
Font Weights And Italics
02:31
Line Height
01:34
Monoscope
01:06
Reset Color
01:26
Text Decoration
01:57
Vertical Alignment
03:52
Visibility
00:56
(Bootstrap 5.3 Update) The Z-Index
04:51
Bootstrap Icons
06:29
Section 7: Quiz
10 questions

Project 1: EMS Web with Bootstrap 5

22 lectures
Introduction to EMS2.0 Application Project
03:08
Creating the Login Page
09:04
Creating Dash Nav and Brand Logo
05:59
Creating the Navbar Toggler
02:08
Creating Navbar Items
02:40
Creating Form Fields for Navbar
04:56
Creating Cards for Dashboard
03:32
Creating Employees List Page
01:59
Creating Employees Page Sidebar
03:37
Creating Employees List Table
07:15
Creating Add Employee Modal
04:49
Creating Add Employee Modal Form
06:49
Creating Details Modal for Employee List
07:07
Creating Edit Details for Employee List
05:04
Creating Delete Modal for Employees List
05:14
Creating Jobs List Page
01:42
Updating the Job List Page
03:27
Creating Job List Table
01:31
Creating Add Job Modal
02:17
Creating Details Modal for Job
02:05
Creating Edit Details for Job Modal
02:52
Creating Delete Modal for Job List
03:43

Project 2: Blog App with Bootstrap 5

20 lectures
Blog Project Introduction
01:21
What's required for Template Building
03:03
Creating the index file
02:18
Creating the Navbar and brand logo
02:31
Creating Navbar Toggler
01:27
Creating Navbar Items
03:00
Creating the search field
02:02
Creating the home banner
06:29
Creating the subscribe modal
06:42
Creating Home Posts Section
05:48
Creating Blog Footer
01:19
Adding Custom Effects to Navbar
02:28
Creating Default Page Header
03:33
Creating Post Loop for Default Page
05:40
Creating Sidebar Subscribe Form
03:00
Creating Categories and Archive Widgets
02:35
Creating Page and Post Content Area
05:00
Creating Comment Form for Posts
03:23
Creating the Search Page
02:06
Linking Everything Together
02:43

Project 3: Real-World Education Project

47 lectures
Introduction to Project
01:51
Setting up Project Folder
01:16
Creating Navbar and Brand
02:56
Creating Navbar Toggler
01:45
Creating Nav Items
03:12
Creating Navbar Search Field
01:42
Creating Navbar Sign-up and Login Buttons
06:50
Creating the Banner Text
05:44
Adding Banner Image
02:24
Creating Site Feature Set
06:43
Creating Course Loop Header
04:38
Creating Course Loop Filter
04:10
Creating Course Loop List Header
02:01
Creating Single Course List Item
07:19
Creating Duplicates of Course Items
00:39
Creating Home Page Content
04:18
Adding Home Content Image
00:47
Creating Subscribe Area
07:23
Creating Main Footer
01:43
Creating Footer Address
02:44
Creating Link Items for Footer
01:42
Creating Social Icons
04:45
Creating Copyright Info
01:44
Creating Sticky Footer
06:19
Creating About Page Header
05:52
Creating About Content Section
03:11
Creating the courses page
04:20
Creating Single Course page and Breadcrumb
05:44
Creating Course Header Description and Meta Data
06:12
Creating Course Meta Data
03:26
Adding Icons to Course Meta Data
05:18
Adding Course Buttons
03:28
Creating Single Course Image
01:33
Creating Single Course Contents
07:02
Creating FAQ Header
02:14
Creating FAQ List
03:18
Creating Post Question Form
04:26
Creating Blog Page and Header
02:17
Creating Blog Posts List
05:01
Creating Blog Sidebar
02:16
Creating Subscribe Modal
05:22
Creating the subscribe form
02:23
Creating Single Post Page
04:38
Creating Contact Page Header
05:07
Creating Contact Page Cards
06:12
Creating Contact Modal
02:39
Linking Everything Together
04:09

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.