The Ultimate Bootstrap Guide - Bootstrap 5 from Scratch

Hướng Dẫn Bootstrap Toàn Tập - Bootstrap 5 Từ Con Số 0

Khóa học từng bước về bố cục, biểu mẫu, thành phần và tiện ích của Bootstrap 5, bao gồm cả các tính năng nâng cao.

4.5

(3,350 đánh giá)

54,622 học viên

Giảng viên

Fatah Gabrial

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 349.000đ -86%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

21.5 giờ video

311 bài giảng

16 bài quiz

8 bài coding

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 30/05/2026

#Bootstrap #Css Frameworks #Frontend Development #Web Development

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

Học cách sử dụng Bootstrap 5 từ đầu với hơn 200 bài học có cấu trúc, hướng dẫn từng bước mọi thành phần và tính năng bố cục chính.

Hiểu hệ thống lưới responsive, breakpoint và cách hoạt động của container trong Bootstrap để xây dựng bố cục web linh hoạt, thân thiện với thiết bị di động.

Xây dựng hoàn chỉnh một bảng điều khiển quản lý nhân viên bằng lưới, card, bảng và các lớp tiện ích của Bootstrap 5 để có trải nghiệm bố cục thực tế.

Tạo một mẫu blog hiện đại sử dụng hệ thống chữ, khoảng cách và tiện ích media object của Bootstrap 5 để thiết kế bố cục nội dung sạch sẽ, rõ ràng.

Thiết kế một mẫu website chuyên nghiệp nhiều trang, hoàn toàn responsive với navbar, hero section, biểu mẫu, footer và các phần tử tương tác.

Thành thạo các thành phần của Bootstrap như nút bấm, cảnh báo, modal, carousel, accordion, badge và navbar thông qua các ví dụ dự án thực hành.

Học cách sử dụng các plugin JavaScript của Bootstrap để thêm dropdown, menu thu gọn, điều hướng offcanvas và các hành vi giao diện động khác.

Làm việc với các lớp tiện ích ưu tiên cho khoảng cách, màu sắc, căn chỉnh, đổ bóng, đường viền và hiển thị responsive mà không cần viết CSS tùy chỉnh.

Tự tin đọc và áp dụng tài liệu chính thức Bootstrap 5, biết khi nào và cách sử dụng từng lớp và thành phần.

Xây dựng giao diện người dùng chuyên nghiệp nhanh hơn bằng cách kết hợp các mẫu Bootstrap có thể tái sử dụng với kỹ thuật bố cục vững chắc học được qua dự án thực tế.

Yêu cầu

Bạn cần có hiểu biết cơ bản về HTML và CSS — không cần nâng cao, chỉ cần thoải mái viết các trang web đơn giản.

Nên có một trình soạn thảo code như VS Code hoặc Sublime Text — chúng ta sẽ viết HTML thực và áp dụng các lớp Bootstrap trong suốt khóa học.

Bạn nên biết cách mở trình duyệt web, lưu file và điều hướng thư mục — nếu đã từng xây dựng một trang tĩnh trước đây, bạn đã sẵn sàng để bắt đầu.

Không cần kiến thức về JavaScript — chúng ta sẽ sử dụng các tính năng JS tích hợp sẵn của Bootstrap như modal và dropdown mà không cần viết script.

Bạn không cần cài đặt bất cứ thứ gì phức tạp — chúng ta sử dụng Bootstrap qua liên kết CDN và giữ quy trình thiết lập đơn giản, dựa trên trình duyệt.

Không cần kinh nghiệm trước với framework hay thư viện nào — khóa học này sẽ hướng dẫn bạn mọi thứ từng bước, từng dự án một.

Cần có kết nối internet để theo dõi các ví dụ trực tiếp, tài liệu Bootstrap và tải tài nguyên khi cần.

Chỉ cần mang theo sự tò mò và tính kiên trì — khóa học này dài, có cấu trúc và chứa đầy giá trị, nhưng chúng ta sẽ cùng nhau tiến từng bước.

Đối tượng phù hợp

Người mới bắt đầu muốn xây dựng website responsive từ đầu bằng Bootstrap 5 mà không cần viết CSS hay JavaScript phức tạp.

Người học frontend đã biết HTML và CSS và muốn làm việc nhanh hơn bằng cách sử dụng hệ thống bố cục, thành phần và tiện ích của Bootstrap.

Lập trình viên web muốn xây dựng các dự án thực tế với Bootstrap 5 và hiểu cách sử dụng toàn bộ framework một cách hiệu quả.

Chuyên gia hoặc sinh viên muốn tạo dashboard, mẫu giao diện và website sạch sẽ, responsive mà không phụ thuộc vào trình tạo trang (page builder).

Các nhóm trong môi trường doanh nghiệp cần học Bootstrap 5 để tạo mẫu nhanh và xây dựng giao diện người dùng đồng nhất.

Những người tự học lập trình đã thấy các lớp Bootstrap trong dự án nhưng chưa bao giờ học cách framework hoạt động một cách toàn diện.

Nhà thiết kế hoặc người đam mê UI muốn chuyển bản thiết kế thành trang web thực sự hoạt động bằng lưới, thành phần và hệ thống khoảng cách của Bootstrap.

Bất kỳ ai chuẩn bị cho công việc frontend hoặc làm freelance muốn tự tin xây dựng mẫu giao diện và UI sẵn sàng cho sản xuất bằng Bootstrap 5.

Nội dung khóa học

11 phần • 311 bài giảng

1 Giới Thiệu Về Bootstrap 5

2 Những Gì Bạn Cần Chuẩn Bị

3 Hello World

4 Cấu Trúc Tài Liệu Bootstrap 5

1 Breakpoint Trong Bootstrap 5

2 Container

3 Lưới (Grid)

4 Tùy Chọn Lưới

5 Lồng Ghép Hàng và Cột

6 Căn Chỉnh Cột Theo Chiều Dọc

7 Căn Chỉnh Cột Theo Chiều Ngang

8 Xuống Dòng và Ngắt Cột

9 Sắp Xếp Lại và Dịch Chuyển Cột

10 Tiện Ích Margin

11 Khoảng Cách Gutter

12 Gutter Ngang

13 Gutter Dọc

14 Gutter Ngang và Dọc

1 Kiểu Chữ (Typography)

2 Phần Tử Văn Bản Nội Tuyến

3 Chữ Viết Tắt và Trích Dẫn Khối

4 Làm Việc Với Danh Sách

5 Hình Ảnh Trong Bootstrap

6 Bảng Trong Bootstrap

7 Căn Chỉnh, Lồng Ghép và Cấu Trúc Bảng

8 Figure Trong Bootstrap

1 Biểu Mẫu Trong Bootstrap

2 Form Control

3 Checkbox và Radio

4 Range

5 Nhóm Đầu Vào (Input Group)

6 Nhãn Nổi (Floating Label)

7 Bố Cục Biểu Mẫu

8 Biểu Mẫu Ngang

9 Biểu Mẫu Tự Động Điều Chỉnh Kích Thước

10 Biểu Mẫu Nội Tuyến

11 Xác Thực Biểu Mẫu

1 Accordion

2 Cảnh Báo (Alert)

3 Đóng Cảnh Báo

4 Huy Hiệu (Badge)

5 Breadcrumb

6 Nút Bấm (Button)

7 Nhóm Nút

8 Thanh Công Cụ Nút

9 Thay Đổi Nhóm Nút

10 Card

11 Kích Thước Card

12 Điều Hướng Card

13 Hình Ảnh Trong Card

14 Kiểu Dáng Card

15 Carousel

16 Điều Khiển Carousel

17 Chỉ Báo Carousel

18 Chú Thích Carousel

19 Hiệu Ứng Mờ Dần Carousel

20 Thời Gian Carousel

21 Tắt Vuốt Chạm Trên Carousel

22 Biến Thể Carousel Tối

23 (Cập Nhật Bootstrap 5.3) Loại Bỏ Carousel Dark & Phương Pháp Mới

24 Nút Đóng

25 (Cập Nhật Bootstrap 5.3) Loại Bỏ "btn-close-white" & Phương Pháp Mới

26 Thu Gọn (Collapse)

27 Thu Gọn Ngang

28 Nhiều Mục Tiêu

29 Dropdown

30 Nút Tách (Split Button)

31 Kích Thước Dropdown

32 Dropdown Tối

33 (Cập Nhật Bootstrap 5.3) Loại Bỏ Dropdown Tối & Phương Pháp Mới

34 Hướng Dropdown

35 Căn Chỉnh Dropup và Dropdown

36 Mục Menu

37 Căn Chỉnh Menu

38 Tùy Chọn Căn Chỉnh Dropdown

39 Nội Dung Menu

40 Biểu Mẫu Trong Dropdown

41 Tùy Chọn Dropdown

42 Tự Động Đóng Dropdown

43 Nhóm Danh Sách (List Group)

44 Liên Kết và Nút Trong Nhóm Danh Sách

45 Nhóm Danh Sách Không Viền (Flush)

46 Danh Sách Đánh Số

47 Nhóm Danh Sách Ngang

48 Lớp Ngữ Cảnh Cho Nhóm Danh Sách

49 Nhóm Danh Sách Với Huy Hiệu

50 Nhóm Danh Sách Với Nội Dung Tùy Chỉnh

51 Checkbox và Radio Trong Nhóm Danh Sách

52 Tab JavaScript Với Nhóm Danh Sách

53 Modal

54 Nền Tĩnh (Static Backdrop)

55 Cuộn Nội Dung Dài

56 Căn Giữa Theo Chiều Dọc

57 Tooltip và Popover Trong Modal

58 Sử Dụng Hệ Thống Lưới Trong Modal

59 Thay Đổi Nội Dung Modal

60 Chuyển Đổi Giữa Các Modal

61 Kích Thước Modal Tùy Chọn

62 Thanh Điều Hướng (Navbar)

63 (Cập Nhật Bootstrap 5.3) "bg-body-tertiary" Hoàn Toàn Mới

64 Liên Kết Điều Hướng

65 Dropdown Trong Navbar

66 Dropdown Lồng Ghép Trong Navbar

67 Biểu Mẫu Trong Navbar

68 Nhóm Đầu Vào Trong Navbar

69 Văn Bản Thuần Trong Navbar

70 Màu Sắc Navbar

71 (Cập Nhật Bootstrap 5.3) Chế Độ Tối Cho Navbar

72 (Cập Nhật Bootstrap 5.3) Màu Sắc Navbar Mới

73 Container Cho Navbar

74 Vị Trí Đặt Navbar

75 Navbar Cuộn

76 Navbar Off Canvas

77 Nav và Tab

78 Tiện Ích Flex Cho Nav

79 Tab và Pill Với Dropdown

80 Hành Vi Của Tab và Pill

81 Tìm Hiểu Sâu Về Offcanvas

82 (Cập Nhật Bootstrap 5.3) Chế Độ Tối Cho Offcanvas

83 Cuộn Trong Offcanvas

84 Vị Trí Đặt Offcanvas

85 Phân Trang (Pagination)

86 Placeholder

87 Tìm Hiểu Sâu Về Popover

88 Hướng Popover

89 Popover Tùy Chỉnh

90 Đóng Khi Nhấp Tiếp Theo

91 Kích Hoạt Popover Khi Di Chuột

92 Thanh Tiến Trình (Progress Bar)

93 Chiều Cao và Nền Thanh Tiến Trình

94 Sọc Và Hiệu Ứng Chuyển Động

95 (Cập Nhật Bootstrap 5.3) Thanh Tiến Trình Mới

96 (Cập Nhật Bootstrap 5.3) Chiều Cao Thanh Tiến Trình

97 (Cập Nhật Bootstrap 5.3) Nhãn và Nền Trong Thanh Tiến Trình

98 (Cập Nhật Bootstrap 5.3) Nhiều Thanh Tiến Trình Xếp Chồng

99 (Cập Nhật Bootstrap 5.3) Thanh Tiến Trình Sọc và Có Hiệu Ứng

100 Scrollspy

101 Vòng Quay (Spinner)

102 Vòng Quay Phóng To (Growing Spinner)

103 Căn Chỉnh Vòng Quay

104 Kích Thước Vòng Quay

105 Vòng Quay Trong Nút Bấm

106 Thông Báo (Toast)

107 Căn Chỉnh Toast

108 Tìm Hiểu Sâu Về Tooltip

109 Tooltip Tùy Chỉnh

110 Hướng Tooltip

111 HTML Trong Tooltip

112 Tooltip Trên Phần Tử Bị Vô Hiệu Hóa

1 Clearfix

2 Màu Sắc và Nền

3 Liên Kết Có Màu

4 (Cập Nhật Bootstrap 5.3) Tiện Ích Liên Kết

5 (Cập Nhật Bootstrap 5.3) Vòng Focus (Focus Rings)

6 (Cập Nhật Bootstrap 5.3) Liên Kết Biểu Tượng (Icon Links)

7 Tỷ Lệ (Ratios)

8 Vị Trí (Positions)

9 Xếp Chồng (Stacks)

10 Ẩn Trực Quan (Visually Hidden)

11 Liên Kết Kéo Dài (Stretched Link)

12 Cắt Ngắn Văn Bản (Text Truncate)

13 Đường Kẻ Dọc (Vertical Rule)

1 Nền (Backgrounds)

2 (Cập Nhật Bootstrap 5.3) Màu Nền Bổ Sung

3 Nền Gradient

4 Độ mờ nền

5 Đường viền

6 Màu đường viền

7 Độ mờ đường viền

8 Độ dày đường viền

9 Bo góc đường viền

10 Kích thước bo góc

11 Màu chữ

12 Độ mờ chữ

13 Hiển thị Inline và Block

14 Ẩn phần tử

15 Hiển thị khi In

16 Flex

17 Hướng Flex

18 Căn chỉnh nội dung Flex (Justify Content)

19 Căn chỉnh mục Flex (Align Items)

20 Căn chỉnh riêng mục Flex (Align Self)

21 Flex Fill

22 Flex Grow và Shrink

23 Flex với Auto Margins

24 Flex kết hợp Align Items

25 Flex Wrap

26 Thứ tự Flex (Order)

27 Căn chỉnh nội dung Flex (Align Content)

28 Đối tượng Media với Flex

29 Float Responsive

30 Tương tác

31 (Cập nhật Bootstrap 5.3) Độ mờ liên kết

32 (Cập nhật Bootstrap 5.3) Gạch chân liên kết

33 (Cập nhật Bootstrap 5.3) Liên kết có màu

34 (Cập nhật Bootstrap 5.3) Object Fit

35 (Cập nhật Bootstrap 5.3) Object Fit Responsive

36 Độ mờ

37 Overflow

38 Vị trí (Position)

39 Căn giữa phần tử với Position

40 Căn giữa phần tử trong các cạnh

41 Ví dụ về Position - Phần 1

42 Ví dụ về Position - Phần 2

43 Đổ bóng

44 Kích thước

45 Khoảng cách

46 Khoảng cách giữa các mục (Gap)

47 Căn chỉnh văn bản

48 Ngắt dòng văn bản

49 Ngắt từ văn bản

50 Chuyển đổi văn bản

51 Cỡ chữ

52 Độ đậm và kiểu nghiêng của chữ

53 Chiều cao dòng

54 Phông chữ Monospace

55 Đặt lại màu

56 Trang trí văn bản

57 Căn chỉnh dọc

58 Hiển thị (Visibility)

59 (Cập nhật Bootstrap 5.3) Z-Index

60 Biểu tượng Bootstrap

1 Giới thiệu Dự án Ứng dụng EMS2.0

2 Tạo trang Đăng nhập

3 Tạo Thanh điều hướng và Logo thương hiệu

4 Tạo Nút chuyển đổi Thanh điều hướng

5 Tạo các Mục trong Thanh điều hướng

6 Tạo Trường biểu mẫu cho Thanh điều hướng

7 Tạo Thẻ cho Bảng điều khiển

8 Tạo trang Danh sách Nhân viên

9 Tạo Thanh bên cho trang Nhân viên

10 Tạo Bảng Danh sách Nhân viên

11 Tạo Modal Thêm Nhân viên

12 Tạo Biểu mẫu trong Modal Thêm Nhân viên

13 Tạo Modal Chi tiết cho Danh sách Nhân viên

14 Tạo Chỉnh sửa Chi tiết cho Danh sách Nhân viên

15 Tạo Modal Xóa cho Danh sách Nhân viên

16 Tạo trang Danh sách Công việc

17 Cập nhật trang Danh sách Công việc

18 Tạo Bảng Danh sách Công việc

19 Tạo Modal Thêm Công việc

20 Tạo Modal Chi tiết cho Công việc

21 Tạo Chỉnh sửa Chi tiết cho Modal Công việc

22 Tạo Modal Xóa cho Danh sách Công việc

1 Giới thiệu Dự án Blog

2 Yêu cầu để Xây dựng Mẫu

3 Tạo tệp index

4 Tạo Thanh điều hướng và Logo thương hiệu

5 Tạo Nút chuyển đổi Thanh điều hướng

6 Tạo các Mục trong Thanh điều hướng

7 Tạo trường Tìm kiếm

8 Tạo Banner trang chủ

9 Tạo Modal Đăng ký nhận tin

10 Tạo Phần Bài viết Trang chủ

11 Tạo Chân trang Blog

12 Thêm Hiệu ứng Tùy chỉnh vào Thanh điều hướng

13 Tạo Tiêu đề Trang Mặc định

14 Tạo Vòng lặp Bài viết cho Trang Mặc định

15 Tạo Biểu mẫu Đăng ký trên Thanh bên

16 Tạo Widget Danh mục và Lưu trữ

17 Tạo Khu vực Nội dung Trang và Bài viết

18 Tạo Biểu mẫu Bình luận cho Bài viết

19 Tạo trang Tìm kiếm

20 Liên kết Mọi thứ với nhau

1 Giới thiệu Dự án

2 Thiết lập Thư mục Dự án

3 Tạo Thanh điều hướng và Thương hiệu

4 Tạo Nút chuyển đổi Thanh điều hướng

5 Tạo các Mục Điều hướng

6 Tạo Trường Tìm kiếm trên Thanh điều hướng

7 Tạo Nút Đăng ký và Đăng nhập trên Thanh điều hướng

8 Tạo Văn bản Banner

9 Thêm Hình ảnh Banner

10 Tạo Bộ Tính năng của Trang web

11 Tạo Tiêu đề Vòng lặp Khóa học

12 Tạo Bộ lọc Vòng lặp Khóa học

13 Tạo Tiêu đề Danh sách Vòng lặp Khóa học

14 Tạo Mục Danh sách Khóa học Đơn lẻ

15 Tạo Bản sao của các Mục Khóa học

16 Tạo Nội dung Trang chủ

17 Thêm Hình ảnh Nội dung Trang chủ

18 Tạo Khu vực Đăng ký nhận tin

19 Tạo Chân trang Chính

20 Tạo Địa chỉ trong Chân trang

21 Tạo các Mục Liên kết cho Chân trang

22 Tạo Biểu tượng Mạng xã hội

23 Tạo Thông tin Bản quyền

24 Tạo Chân trang Cố định (Sticky)

25 Tạo Tiêu đề Trang Giới thiệu

26 Tạo Phần Nội dung Giới thiệu

27 Tạo trang danh sách khóa học

28 Tạo trang Khóa học Đơn và Thanh điều hướng (Breadcrumb)

29 Tạo Mô tả Tiêu đề và Dữ liệu Meta Khóa học

30 Tạo Dữ liệu Meta Khóa học

31 Thêm Biểu tượng vào Dữ liệu Meta Khóa học

32 Thêm Nút cho Khóa học

33 Tạo Hình ảnh Khóa học Đơn

34 Tạo Nội dung Khóa học Đơn

35 Tạo Tiêu đề Câu hỏi Thường gặp (FAQ)

36 Tạo Danh sách Câu hỏi Thường gặp

37 Tạo Biểu mẫu Đăng Câu hỏi

38 Tạo Trang Blog và Tiêu đề

39 Tạo Danh sách Bài viết Blog

40 Tạo Thanh bên Blog

41 Tạo Modal Đăng ký nhận tin

42 Tạo biểu mẫu đăng ký

43 Tạo Trang Bài viết Đơn

44 Tạo Tiêu đề Trang Liên hệ

45 Tạo Thẻ cho Trang Liên hệ

46 Tạo Modal Liên hệ

47 Liên kết Mọi thứ với nhau

Giới thiệu khóa học

Learn Bootstrap 5 the Right Way — Build Real Responsive UI Projects

Hey there! If you’re ready to speed up your front-end workflow and stop writing endless CSS from scratch — you’re in the right place.

This is a complete Bootstrap 5 course for beginners, packed with 200+ lessons and built around real projects. Whether you're a student, self-learner, or part of a professional dev team — this course will teach you how to use Bootstrap properly, one layout at a time.

Why Learn Bootstrap 5?

Bootstrap is the most popular front-end framework in the world — and for good reason. It helps you build mobile-friendly, professional-looking websites without reinventing the wheel.

But to really use Bootstrap well, you need more than just a cheat sheet. You need real structure, real practice, and real UI builds.

That’s what this course delivers.

What You’ll Build Inside This Course

Over 200+ lectures, you’ll learn every key component, utility, and layout technique — and apply them in real-world projects, including:

A responsive Employee Management Dashboard with tables, cards, and charts
A clean and flexible Blog Template with media objects and custom sections
A fully designed Multi-page Professional Website Template with navbars, hero sections, contact forms, and more

Along the way, you’ll master Bootstrap’s grid system, breakpoints, forms, modals, offcanvas, navs, and dozens of other layout tools — all with a focus on real usability.

By the End, You’ll Be Able To: