Trong giao diện web hiện đại, Bootstrap vẫn là “bộ khung” đáng tin cậy để bạn dựng layout nhanh, đồng bộ giao diện, và đảm bảo responsive trên mọi thiết bị. Dù có nhiều lựa chọn mới như Tailwind hay Chakra UI, Bootstrap vẫn được ưa chuộng nhờ dễ học, ổn định và phù hợp cho cả người mới lẫn dự án thực tế.
Bài này giúp bạn học Bootstrap theo các chủ đề sau:
- Các tính năng cơ bản của Bootstrap & so sánh với Tailwind
- Cách cài đặt nhanh bằng CDN (và tùy chọn nâng cao)
- Những khái niệm nền tảng: grid system, flexbox, responsive, utilities, icons
- Các components cơ bản & nâng cao hay dùng nhất
- Tips học nhanh + bài tập để thực hành
Bootstrap là gì? Ai nên học Bootstrap?
Bootstrap là một framework front-end phổ biến, giúp xây dựng các trang web responsive và tối ưu hóa cho thiết bị di động. Nó cung cấp sẵn các thành phần CSS, JavaScript và các lớp tiện ích, cho phép tạo giao diện người dùng hiện đại và đồng nhất một cách nhanh chóng:
- Hệ thống lưới responsive linh hoạt, hỗ trợ thiết kế ưu tiên trên thiết bị di động
- Cung cấp đa dạng các thành phần UI như nút bấm, modal và thanh điều hướng
- Tích hợp sẵn các tiện ích giúp tối ưu kiểu chữ, khoảng cách và khả năng hiển thị responsive
- Cho phép tùy chỉnh linh hoạt thông qua các biến Sass và cấu hình của Bootstrap
Xem thêm phần giới thiệu chi tiết về Bootstrap là gì?
Ai nên học Bootstrap?
Việc học Bootstrap mang lại nhiều lợi ích nếu:
- Bạn muốn tiết kiệm thời gian khi dựng layout hoặc tạo các thành phần UI phổ biến
- Bạn là người mới bắt đầu học front-end vì Bootstrap dễ tiếp cận
- Bạn muốn dùng framework tương thích cao với các framework như React, Vue, hoặc Laravel
- Bạn muốn học một framework có cộng đồng lớn và tài liệu chính thức rõ ràng, giúp việc học dễ dàng hơn
- Bạn muốn có lợi thế khi xin việc, đặc biệt là các dự án startup hoặc hệ thống quản trị nội bộ, vẫn sử dụng Bootstrap vì tốc độ triển khai nhanh và khả năng mở rộng dễ dàng
- Bạn muốn nắm chắc nền tảng HTML/CSS và rút ngắn thời gian học các framework UI hiện đại sau này
Hướng dẫn cài đặt Bootstrap
Có nhiều cách để bắt đầu với Bootstrap, tuỳ vào mục tiêu học hay dự án của bạn. Dưới đây là những cách phổ biến nhất:
Cài đặt nhanh bằng CDN
CDN (Content Delivery Network) giúp bạn tích hợp Bootstrap nhanh chóng mà không cần tải về hoặc cài đặt. Chỉ cần thêm các liên kết sau vào phần <head> và trước thẻ đóng </body> của tập tin HTML:
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<!-- Bootstrap 5 Bundle (gồm Popper) - đặt trước </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Xem chi tiết hướng dẫn tại Bootstrap CDN: Cách tích hợp nhanh Bootstrap vào dự án
Cài đặt bằng npm hoặc Yarn
Nếu bạn đang phát triển ứng dụng bằng Node.js, có thể cài đặt Bootstrap thông qua npm với lệnh sau:
npm install bootstrapSau khi cài đặt, bạn có thể sử dụng Bootstrap bằng cách import:
require('bootstrap');Nếu bạn sử dụng Yarn thay vì Npm, có thể cài đặt Bootstrap bằng lệnh:
yarn add bootstrap3. Cài đặt trong framework khác
Ngoài 2 cách cài đặt bên trên, Bootstrap còn có thể được cài đặt thông qua các framework, nền tảng như:
- Ruby on Rails: gem ‘Bootstrap’
- PHP/Laravel: composer require twbs/bootstrap
- .Net: Install-Package bootstrap
Đọc hướng dẫn chi tiết cho từng môi trường tại bài: Hướng dẫn cài đặt Bootstrap
Học Bootstrap bước 1: Hiểu những khái niệm quan trọng
Những khái niệm nền tảng dưới đây là “xương sống” của Bootstrap, giúp bạn hiểu cách bố cục, căn chỉnh và xây dựng giao diện web chuẩn mực.
Grid system
Grid system là hệ thống chia cột linh hoạt giúp bạn tạo bố cục responsive chỉ bằng class HTML mà không cần viết CSS. Bootstrap chia trang web thành 12 cột, cho phép bạn tuỳ ý chia tỷ lệ như .col-6, .col-md-4, .col-lg-3…
Nhờ grid, bạn có thể dễ dàng sắp xếp nội dung cho mọi màn hình, từ điện thoại đến desktop.
Xem hướng dẫn chi tiết: Bootstrap Grid System là gì: Cách dùng từ cơ bản đến nâng cao
Flexbox
Flexbox (viết tắt của Flexible Box Layout) là mô hình bố cục hiện đại giúp sắp xếp, căn chỉnh và phân chia không gian giữa các phần tử trong cùng một container một cách linh hoạt.
Trong Bootstrap, Flexbox đã được tích hợp sẵn thông qua hệ thống utility classes, giúp bạn thao tác nhanh mà không cần viết CSS thủ công. Với vài class đơn giản, bạn có thể:
- Biến phần tử thành flex container bằng .d-flex hoặc .d-inline-flex
- Căn chỉnh nội dung theo trục chính và trục phụ với .justify-content-* và .align-items-*
- Kiểm soát thứ tự hiển thị (.order-*) hoặc khả năng co giãn linh hoạt (.flex-grow-*, .flex-shrink-*)
- Dễ dàng áp dụng responsive layout theo breakpoint như .d-flex, .flex-row, .flex-column trên md, lg, xl
Hình ảnh ví dụ về Flex trong Bootstrap
Tìm hiểu chi tiết Flexbox Bootstrap là gì: Hướng dẫn sử dụng chi tiết từ A-Z
Responsive design
Responsive design giúp giao diện hiển thị tối ưu trên mọi kích thước màn hình từ điện thoại, máy tính bảng đến desktop. Bootstrap áp dụng triết lý mobile-first, nghĩa là ưu tiên thiết kế cho màn hình nhỏ trước rồi mở rộng dần cho màn hình lớn thông qua các breakpoint (sm, md, lg, xl, xxl).
Dưới đây là bảng tổng hợp các breakpoint mặc định trong Bootstrap:
| Tên gọi | Ký hiệu | Kích thước tối thiểu |
| Extra small (rất nhỏ) | xs | <576px (tự động áp dụng, không cần khai báo) |
| Small (nhỏ) | sm | ≥576px |
| Medium (vừa) | md | ≥768px |
| Large (lớn) | lg | ≥992px |
| Extra large (rất lớn) | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Một số tiện ích responsive phổ biến trong Bootstrap như:
- Ẩn/hiện phần tử: .d-none, .d-md-block, .d-lg-flex
- Thay đổi hướng flex: .flex-column, .flex-md-row
- Điều chỉnh khoảng cách: .mt-3, .mt-md-0
Xem thêm bài hướng dẫn chi tiết Responsive trong Bootstrap
Học Bootstrap bước 2: Utilities cơ bản (Text, Color, Border, Margin, Padding)
Utilities là nhóm class nhỏ gọn giúp bạn tinh chỉnh giao diện nhanh mà không cần viết CSS riêng. Chúng kiểm soát hầu hết các yếu tố giao diện như văn bản, màu sắc, khoảng cách, viền, hiển thị, v.v.
Dưới đây là những nhóm utilities cơ bản mà bạn nên nắm vững:
1. Text (Định dạng văn bản)
Bootstrap cung cấp nhiều class để định dạng văn bản như căn lề, in đậm, viết hoa hoặc thay đổi màu chữ.
Một số class thường dùng:
- Căn lề trái, giữa, phải: .text-start, .text-center, .text-end
- Độ đậm chữ: .fw-bold, .fw-light
- Định dạng chữ hoa/thường: .text-uppercase, .text-lowercase, .text-capitalize
Ví dụ:
<p class="text-center fw-bold text-uppercase">Văn bản giữa, in đậm và viết hoa</p>
Đọc chi tiết về Text Bootstrap: 10+ cách định dạng văn bản hiệu quả với Bootstrap
2. Color (Màu sắc)
Bootstrap hỗ trợ hệ thống màu sắc chuẩn dựa trên theme color bao gồm:
| Tên chủ đề | Màu sắc hiển thị | Ý nghĩa |
| primary |  | Màu chính (primary color) đại diện cho thương hiệu hoặc hành động chính trong giao diện. Ví dụ: Nút chính “Đăng ký”, “Mua ngay”, link nổi bật, CTA (Call to Action) |
| secondary |  | Dùng cho những phần không quan trọng bằng màu chính hoặc bổ trợ. Ví dụ: Nút “Huỷ”, “Bỏ qua”, Label phụ, mô tả trạng thái nhỏ |
| success |  | Báo hiệu điều gì đó diễn ra đúng hoặc thành công. Ví dụ: Alert thông báo gửi form thành công, Badge xác nhận (“Đã thanh toán”, “Hợp lệ”), Icon check |
| danger |  | Cảnh báo lỗi nghiêm trọng, hành động xóa, hoặc thao tác không thể hoàn tác. Ví dụ: Thông báo lỗi, invalid form, nút xoá tài khoản, viền hoặc chữ báo lỗi |
| warning |  | Cảnh báo người dùng về một điều cần lưu ý, chưa phải lỗi. Ví dụ: Badge trạng thái “Sắp hết hạn”, Tooltip hoặc form cần kiểm tra lại |
| info |  | Cung cấp thông tin hỗ trợ, trung lập, không tích cực hay tiêu cực. Ví dụ: Alert thông báo hệ thống, message từ admin, label mô tả trạng thái |
| light |  | Tạo vùng nền nhẹ nhàng cho phần nội dung. Ví dụ: làm màu nền background, card, modal sáng. |
| dark |  | Dùng khi muốn tạo nhấn mạnh, làm nổi nội dung sáng trên nền tối. Ví dụ: Header, footer màu tối, Modal nền đen |
Bạn có thể thay đổi màu chữ và màu nền dễ dàng bằng .text-* hoặc .bg-*. Ví dụ:
<p class="text-success">Màu chữ xanh lá (success)</p>
<div class="bg-warning text-dark p-2">Nền vàng (warning)</div> 
Tìm hiểu thêm về Bootstrap Color: Cách sử dụng hệ thống màu trong Bootstrap
3. Border (Viền & bo góc)
Nhóm Border utilities trong Bootstrap giúp bạn thêm, bỏ hoặc định dạng viền của phần tử mà không cần CSS thủ công. Bạn có thể áp dụng viền toàn phần, chỉ trên một cạnh, thay đổi màu viền, hoặc bo tròn góc dễ dàng.
Một số class thường dùng:
- Thêm viền cho phần tử: .border
- Loại bỏ viền: .border-0, .border-top-0, .border-bottom-0
- Thay đổi màu viền: .border-primary, .border-success
- Bo góc: .rounded, .rounded-circle, .rounded-pill
Ví dụ:
<div class="border border-primary rounded p-3">
Box có viền xanh và bo góc nhẹ
</div>
Xem hướng dẫn chi tiết Border Bootstrap là gì? 10+ cách thiết kế viền đẹp với Bootstrap
4. Margin (Khoảng cách bên ngoài)
Margin utilities giúp bạn tạo không gian giữa các phần tử để bố cục thông thoáng và dễ nhìn hơn. Bootstrap dùng quy ước .m (margin toàn phần), .mt (trên), .mb (dưới), .ms (trái), .me (phải) với giá trị từ 0–5.
Ví dụ:
<div class="mt-3 mb-4">
Box có khoảng cách trên 3 và dưới 4
</div> 
Xem thêm Margin Bootstrap là gì: Cách sử dụng margin trong Bootstrap A-Z
5. Padding (Khoảng cách bên trong)
Padding là khoảng cách bên trong một phần tử, giữa nội dung (content) và viền (border) của phần tử đó. Nói cách khác, padding giống như một lớp đệm bao quanh nội dung để nó không bị dính sát vào viền.
Trong Bootstrap, padding utilities giúp điều chỉnh khoảng cách giữa nội dung và viền của phần tử. Cách đặt tương tự margin nhưng sử dụng .p thay vì .m. Bạn có thể dùng .p-*, .pt-*, .pb-*, .ps-*, .pe-*, .px-*, .py-* để linh hoạt điều chỉnh.
Ví dụ:
<div class="p-4 bg-light border rounded">
Box có padding 4, giúp nội dung thoáng hơn
</div>
Bạn có thể xem chi tiết Padding Bootstrap là gì: Sử dụng padding trong Bootstrap hiệu quả
6. Icon trong Bootstrap
Bootstrap Icon là thư viện icon (biểu tượng) dạng vector (SVG) mã nguồn mở, được phát triển bởi nhóm tác giả của Bootstrap và ra mắt chính thức vào năm 2020 – đánh dấu lần đầu tiên Bootstrap có một thư viện biểu tượng riêng biệt. Bootstrap Icon được thiết kế để đồng bộ với Bootstrap 5.
Bạn có thể dùng icon cho button, navbar, form, hay bất kỳ thành phần nào chỉ bằng cách thêm class .bi và tên biểu tượng.
Ví dụ thêm icon trong Button:
<button class="btn btn-primary">
<i class="bi bi-download"></i> Tải xuống
</button>
Ngoài ra, Bootstrap Icon còn hỗ trợ thay đổi kích thước bằng .fs-* và màu sắc bằng .text-*, giúp đồng bộ hoàn hảo với giao diện.
Xem chi tiết cách sử dụng Bootstrap Icon: Cách cài đặt và sử dụng hiệu quả trong dự án web
Học Bootstrap bước 3: Các thành phần cơ bản (Components)
Một trong những thế mạnh lớn nhất của Bootstrap chính là hệ thống components dựng sẵn, giúp bạn tạo ra giao diện đẹp, đồng nhất và tương thích trên mọi thiết bị mà không cần viết CSS hay JavaScript phức tạp. Nhờ đó, lập trình viên có thể tập trung vào logic và nội dung, thay vì mất thời gian căn chỉnh giao diện.
Dưới đây là những thành phần cơ bản và được sử dụng nhiều nhất trong hầu hết các dự án web, mà người mới nên nắm vững đầu tiên:
Button
Button là một trong những thành phần phổ biến nhất trong mọi giao diện web, dùng để kích hoạt hành động như gửi form, mở modal, tải file, hoặc điều hướng trang. Bootstrap cung cấp sẵn hệ thống class để định dạng cho màu sắc, kích thước, viền và trạng thái (active, disabled) của một button.
Một số class thường dùng:
- Định dạng và màu nút: .btn, .btn-primary, .btn-outline-*
- Kích thước button: .btn-sm, .btn-lg
- Quản lý trạng thái button: .disabled
Ví dụ:
<button class="btn btn-primary">Đăng ký ngay</button>
<button class="btn btn-outline-success">Xem thêm</button>
Ngoài ra, Bootstrap còn hỗ trợ tạo Button với icon, hoặc Group Button, phù hợp với nhiều yêu cầu về giao diện khác nhau.
Đọc thêm về Button Bootstrap là gì? Cách sử dụng Button và Button Group
Navbar (Thanh điều hướng)
Navbar là khu vực điều hướng chính của website, thường nằm ở đầu trang và giữ vai trò quan trọng trong trải nghiệm người dùng.
Bootstrap giúp bạn dễ dàng tạo thanh menu có thể co giãn linh hoạt, hoạt động tốt trên cả desktop lẫn mobile với các thành phần chính bao gồm:
- Khởi tạo cấu trúc navbar và responsive: .navbar, .navbar-expand-lg
- Tùy chỉnh màu sắc navbar: .navbar-light, .navbar-dark, .bg-*
- Bổ sung logo và liên kết điều hướng: .navbar-brand, .nav-link
Ví dụ:
<nav class="navbar navbar-expand-lg bg-light">
<a class="navbar-brand" href="#">MySite</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">Trang chủ</a>
<a class="nav-link" href="#">Liên hệ</a>
</div>
</nav>
Xem thêm về Navbar Bootstrap: Hướng dẫn tạo Header chuyên nghiệp cho web
Footer (Chân trang)
Footer là khu vực nằm cuối trang, thường chứa thông tin bản quyền, liên kết mạng xã hội hoặc form đăng ký nhận tin. Bootstrap không có component “footer” riêng, nhưng bạn có thể dễ dàng tạo bằng cách kết hợp Grid system + Utilities.
Cách sử dụng:
- Sử dụng .container, .row, .col-* để chia bố cục
- Kết hợp với .bg-*, .text-*, .py-* để màu nền, chữ và khoảng cách
Ví dụ:
<footer class="bg-dark text-light py-4">
<div class="container text-center">
© 2025 MyCompany — All rights reserved.
</div>
</footer>Mặc dù không nằm ở vị trí nổi bật như header, nhưng footer lại đóng một vai trò rất quan trọng trong trải nghiệm người dùng (UX). Nó giúp tổ chức thông tin rõ ràng, tăng sự chuyên nghiệp cho website và hỗ trợ điều hướng ở phần cuối trang, nơi mà người dùng thường dừng lại sau khi xem xong nội dung chính.
Đọc thêm về Cách xây dựng Footer chuyên nghiệp bằng Bootstrap
Card (Thẻ nội dung)
Card (hay còn gọi là “thẻ nội dung”) là một thành phần quen thuộc trong giao diện web, được thiết kế theo dạng hộp chữ nhật có thể chứa nhiều loại nội dung khác nhau: tiêu đề, văn bản, hình ảnh, danh sách, liên kết, nút bấm….
Bootstrap cung cấp sẵn component Card để giúp bạn có ngay một card đẹp mắt, thống nhất với toàn bộ hệ thống thiết kế chỉ với vài class sẵn có.
Cấu trúc cơ bản của Bootstrap Card:
- Các phần tử chính tạo nên card: .card, .card-body, .card-title, .card-text
- Chèn ảnh phía trên Card: .card-img-top
- Gộp nhiều card cùng hàng: .card-group
Ví dụ:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Sản phẩm A</h5>
<p class="card-text">Mô tả ngắn gọn về sản phẩm.</p>
<a href="#" class="btn btn-primary">Mua ngay</a>
</div>
</div>
Đọc thêm về Cách xây dựng thẻ nội dung chuyên nghiệp với Bootstrap Card
Badge (Nhãn nhỏ)
Badge (nhãn hiển thị) là một thành phần nhỏ trong giao diện web, thường dùng để hiển thị thông tin phụ ngắn gọn như số lượng, trạng thái hoặc nhãn phân loại.
Bootstrap đã cung cấp sẵn một component badge với đầy đủ tính năng, giúp bạn tiết kiệm công sức mà vẫn đảm bảo giao diện chuyên nghiệp:
- Nhanh chóng: chỉ cần vài dòng class (.badge, bg-*, rounded-pill…) là có thể tạo ngay một badge đẹp mắt
- Đồng bộ giao diện: badge kế thừa hệ thống màu sắc, font chữ và spacing từ Bootstrap, đảm bảo nhất quán trên toàn bộ website
- Dễ tùy chỉnh: có sẵn nhiều biến thể màu, dạng pill (bo tròn), hoặc mở rộng dễ dàng bằng CSS riêng
- Thân thiện responsive: badge tự động co giãn theo cỡ chữ hoặc button chứa nó, không cần viết thêm media query
Ví dụ về Bootstrap Badge:
<h2>Tiêu đề bài viết <span class="badge badge-sm bg-danger">New</span></h2>
Để sử dụng thành thạo Bootstrap Badge, bạn có thể đọc thêm về Badge Bootstrap: Hướng dẫn toàn tập kèm ví dụ thực tế
Dropdown (Menu thả xuống)
Dropdown là một thành phần giao diện trong Bootstrap cho phép hiển thị các lớp phủ theo ngữ cảnh, thường là danh sách các liên kết hoặc nút hành động. Dropdown được thiết kế để có thể bật/tắt thông qua thao tác nhấp chuột.
Đây là thành phần thường thấy trong Navbar, form hoặc bảng điều khiển. Ví dụ về cách xây dựng Bootstrap Dropdown:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
<li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
<li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
</ul>
</div>Kết quả:
Table (Bảng dữ liệu)
Table (bảng) là một cấu trúc HTML dùng để hiển thị dữ liệu dưới dạng hàng và cột, giống như bảng tính Excel. Mỗi bảng bao gồm các phần cơ bản như:
- <table>: Thẻ chính để khai báo bảng
- <tr> (table row): Đại diện cho một hàng
- <th> (table heading): Tiêu đề của cột
- <td> (table data): Dữ liệu trong bảng
Trong Bootstrap, việc tạo bảng (table) trở nên dễ dàng và đẹp mắt chỉ với một vài class đơn giản. Các bảng được hỗ trợ mặc định với giao diện gọn gàng, rõ ràng, dễ đọc, và bạn có thể mở rộng hoặc tùy chỉnh thêm theo nhu cầu.
Một số class tạo bảng trong Bootstrap thông dụng bạn nên nắm:
| Class | Mô tả |
| .table | Class cơ bản để định dạng bảng Bootstrap, thêm khoảng cách và kiểu chữ dễ đọc hơn |
| .table-striped | Thêm màu nền xen kẽ giữa các hàng, giúp dữ liệu dễ phân biệt |
| .table-hover | Tô sáng hàng khi người dùng rê chuột (hover) |
| .table-bordered | Thêm viền xung quanh toàn bảng và từng ô dữ liệu |
| .table-responsive | Cho phép bảng cuộn ngang khi hiển thị trên màn hình nhỏ, tránh tràn nội dung. Thường bao bọc ngoài bảng |
Ví dụ kết hợp:
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>Tên sản phẩm</th>
<th>Trạng thái</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Áo thun nam</td>
<td>Đang bán</td>
</tr>
<tr>
<td>2</td>
<td>Áo sơ mi nữ</td>
<td>Hết hàng</td>
</tr>
</tbody>
</table>
</div>Hiển thị:
Đọc chi tiết về cách sử dụng Table Bootstrap: Chi tiết cách tạo và tùy chỉnh bảng với Bootstrap
Form (Biểu mẫu)
Form Bootstrap là tập hợp các class CSS được Bootstrap cung cấp sẵn để giúp bạn xây dựng form một cách nhanh chóng. Thay vì phải viết lại từng dòng CSS cho input, label, select…, bạn chỉ cần thêm các class như .form-control, .form-label, .form-select, .form-check,… là đã có một giao diện chuyên nghiệp, dễ sử dụng và thân thiện với người dùng.
Việc sử dụng Form Bootstrap sẽ giúp:
- Xây dựng giao diện nhanh chóng
- Đồng nhất phong cách giữa các trình duyệt
- Có sẵn responsive, dễ dàng với các thiết bị khác nhau
- Tùy biến linh hoạt theo nhu cầu dự án
Ví dụ về form đăng nhập xây dựng bằng Bootstrap:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Kết quả:
Xem chi tiết về Thực hành tạo form Bootstrap từ cơ bản đến nâng cao
Học Bootstrap bước 4: Các thành phần nâng cao
Sau khi đã nắm vững nhóm cơ bản, bạn nên học thêm các component nâng cao để tạo trải nghiệm tương tác và hiện đại hơn cho website.
Modal (Hộp thoại nổi)
Modal là một hộp thoại bật lên nằm trên cùng giao diện, dùng để hiển thị nội dung chi tiết, cảnh báo, hoặc xác nhận hành động. Bootstrap giúp tạo modal nhanh chóng bằng vài class và thuộc tính dữ liệu (data-bs-toggle, data-bs-target) mà không cần code JS phức tạp.
Ví dụ:
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Mở Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Xác nhận hành động</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Bạn có chắc muốn tiếp tục không?</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
<button class="btn btn-danger">Đồng ý</button>
</div>
</div></div>
</div>Kết quả:
Ngoài ra, Modal hỗ trợ các kích thước (.modal-sm, .modal-lg, .modal-xl) để đáp ứng nhiều nhu cầu và chế độ cuộn (.modal-dialog-scrollable).
Xem thêm về Modal Bootstrap là gì: Hướng dẫn sử dụng từ cơ bản đến nâng cao
Carousel (Slider)
Carousel là thành phần giúp hiển thị nhiều hình ảnh hoặc nội dung trong cùng một vị trí theo dạng trình chiếu (slideshow). Thay vì dàn trải nội dung dài, carousel giúp gom gọn thông tin vào một khu vực và cho phép người dùng xem lần lượt từng mục bằng thao tác chuyển slide hoặc tự động chạy.
Trong Bootstrap, Carousel là component dựng sẵn, hỗ trợ đầy đủ tính năng như chuyển slide tự động, nút điều hướng, chấm chỉ báo và caption cho từng ảnh, giúp bạn tạo slider nhanh, chuẩn và đồng bộ mà không cần code từ đầu.
Hình ảnh minh họa về Carousel Bootstrap
Đọc nội dung chi tiết về Hướng dẫn sử dụng Carousel Bootstrap chi tiết kèm ví dụ
Pagination (Phân trang)
Pagination giúp chia nhỏ nội dung dài thành nhiều trang, giúp tăng tốc độ tải và trải nghiệm người dùng. Bootstrap hỗ trợ class .pagination, .page-item, .page-link để tạo thanh phân trang đồng nhất và dễ chỉnh kích thước.
Ví dụ về pagination trong Bootstrap:
<nav aria-label="Pagination example">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><span class="page-link">Trước</span></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><span class="page-link">2</span></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
</nav>Kết quả:
Đọc chi tiết Pagination Bootstrap là gì: Cách phân trang hiệu quả với Bootstrap
Tooltip (Gợi ý nhanh)
Tooltip (gợi ý nổi bật) là những hộp thoại nhỏ xuất hiện khi người dùng di chuột (hover) hoặc tập trung (focus) vào một phần tử, nhằm hiển thị thông tin bổ sung ngắn gọn, ví dụ như hướng dẫn sử dụng, nhãn biểu tượng hoặc trạng thái nút.
Bootstrap cung cấp component Tooltip mạnh mẽ và dễ triển khai, giúp bạn nhanh chóng tích hợp tooltip vào giao diện web mà không cần viết thêm nhiều CSS hoặc JavaScript thủ công.
Ví dụ về sử dụng Tooltip trong Bootstrap:
<button class="btn btn-secondary" data-bs-toggle="tooltip" title="Lưu lại thay đổi">
<i class="bi bi-save"></i>
</button>
<script>
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach(t => new bootstrap.Tooltip(t));
</script>Kết quả:
Lưu ý, bạn cần chủ động kích hoạt tooltip bằng JavaScript. Đây là cơ chế opt-in, nghĩa là Bootstrap không tự khởi tạo tooltip để đảm bảo hiệu năng.
Xem hướng dẫn chi tiết Tooltip Bootstrap: Hướng dẫn cách hiển thị thông tin bổ sung
Accordion (Nội dung thu gọn/mở rộng)
Accordion giúp tổ chức nhiều đoạn nội dung theo dạng thu gọn, rất phù hợp cho FAQ, hướng dẫn hoặc danh sách chi tiết. Khi mở một mục, các mục còn lại có thể tự động đóng lại.
Trong Bootstrap, toàn bộ cấu trúc, class, hiệu ứng và hành vi của accordion đã được định nghĩa sẵn. Lập trình viên chỉ cần sử dụng các class như .accordion, .accordion-item, .accordion-button, .accordion-collapse cùng với data-bs-toggle và data-bs-target là có ngay một accordion hoàn chỉnh.
Ví dụ:
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Bootstrap là gì?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">Bootstrap là framework front-end giúp dựng UI nhanh...</div>
</div>
</div>
</div>Kết quả:
Tìm hiểu chi tiết về Cách sử dụng Accordion Bootstrap
Scrollbar (Thanh cuộn tùy chỉnh)
Trong hệ thống của Bootstrap, việc làm việc với scrollbar được hỗ trợ dưới hai hình thức chính:
- Các lớp tiện ích (Utilities Classes): Bootstrap định nghĩa sẵn bốn class .overflow-auto, .overflow-hidden, .overflow-visible và .overflow-scroll để bạn có thể áp dụng nhanh mà không cần viết CSS thủ công
- Tích hợp trong các component: Một số thành phần của Bootstrap như Modal, Offcanvas, Dropdown và Table đã được thiết kế để xử lý tình huống nội dung tràn, kèm cơ chế hiển thị scrollbar khi cần
Điều này giúp nhà phát triển tiết kiệm thời gian triển khai, đảm bảo sự đồng bộ về giao diện, đồng thời giảm thiểu lỗi so với cách viết CSS tùy ý cho từng trường hợp.
Một số class tiện ích để thao tác với Scrollbar Bootstrap:
| Class | Công dụng |
| .overflow-auto | Hiển thị thanh cuộn khi nội dung vượt khung |
| .overflow-hidden | Ẩn toàn bộ nội dung vượt khung, không tạo ra thanh cuộn |
| .overflow-visible | Hiển thị nội dung tràn ra khỏi khung, không tạo thanh cuộn |
| .overflow-scroll | Luôn bật vùng cuộn (dù ít nội dung) |
Đọc thêm về cách tùy chỉnh Scrollbar trong Bootstrap
Các bí kíp để học Bootstrap hiệu quả
Học Bootstrap không chỉ dừng ở việc nhớ class, components, mà quan trọng hơn là biết cách kết hợp, tùy chỉnh và áp dụng vào thực tế. Dưới đây là một vài mẹo giúp bạn học nhanh hơn và làm chủ framework này hiệu quả.
Tùy chỉnh CSS/Theme để giao diện không “một màu”
Một trong những điểm mạnh nhất của Bootstrap là khả năng tùy chỉnh linh hoạt. Bạn không cần phải giữ nguyên giao diện mặc định, mà hoàn toàn có thể:
- Ghi đè CSS: Viết class riêng để tùy chỉnh màu sắc, font hoặc border mà vẫn tận dụng hệ thống sẵn có của Bootstrap.
- Sử dụng biến Sass: Nếu bạn cài đặt Bootstrap qua npm hoặc source Sass, có thể override các biến như $primary, $font-size-base, $btn-border-radius để đổi giao diện toàn hệ thống.
- Kết hợp Utilities API: Bootstrap 5 hỗ trợ định nghĩa utilities riêng, giúp bạn thêm class tuỳ biến mà không phải viết lại nhiều CSS.
Đọc thêm về Bootstrap CSS là gì: Cách áp dụng và quản lý CSS với Bootstrap
Thực hành song song với bài tập mẫu
Học lý thuyết sẽ rất nhanh quên nếu không thực hành. Bạn có thể luyện tập thực hành Bootstrap thông qua việc xây dựng một trang web nhỏ, ví dụ bài tập dưới đây:
- Tạo một Landing Page gồm Navbar, Hero section, Card sản phẩm, và Footer.
- Áp dụng các utilities như màu sắc, khoảng cách, text, border, để làm quen với class.
- Thử thêm components nâng cao như Modal, Carousel hoặc Tooltip để hiểu cách hoạt động.
- Sau cùng, tối ưu lại bố cục bằng Grid và Flexbox để trang hiển thị chuẩn responsive.
Ví dụ hình ảnh hiển thị:
Đáp án:
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-light border-bottom mb-4">
<div class="container">
<a class="navbar-brand fw-bold text-primary" href="#">MyBrand</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Trang chủ</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sản phẩm</a></li>
<li class="nav-item"><a class="nav-link" href="#">Liên hệ</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<header class="py-5 bg-light text-center">
<div class="container">
<h1 class="fw-bold mb-3">Học Bootstrap hiệu quả</h1>
<p class="lead text-secondary mb-4">Dựng giao diện responsive nhanh, đẹp và đồng nhất</p>
<a href="#" class="btn btn-primary btn-lg">Bắt đầu ngay</a>
</div>
</header>
<!-- Card section -->
<section class="container py-5">
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Grid System</h5>
<p class="card-text">Chia bố cục linh hoạt với 12 cột và breakpoint responsive.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Xem chi tiết</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Components</h5>
<p class="card-text">Button, Navbar, Modal – có sẵn và dễ tuỳ chỉnh.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Xem chi tiết</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Utilities</h5>
<p class="card-text">Dùng class sẵn để chỉnh nhanh màu sắc, margin, padding...</p>
<a href="#" class="btn btn-outline-primary btn-sm">Xem chi tiết</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-light text-center py-3">
<p class="mb-0">© 2025 MyBrand. All rights reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Sử dụng nguồn tài liệu uy tín
Để học Bootstrap một cách nhanh chóng và đúng hướng, bạn hãy ưu tiên những nguồn tài liệu chính thống và cập nhật thường xuyên như:
- Trang chủ Bootstrap: https://getbootstrap.com/docs. Đây là nguồn tài liệu chính thức, đầy đủ ví dụ và demo về Bootstrap
- MDN Web Docs: Tìm hiểu sâu hơn về các nguyên tắc CSS mà Bootstrap dựa trên thông qua MDN Docs.
- Các kênh Youtube: Một số playlist dạy học Bootstrap 5 nổi tiếng trên Youtube như Bootstrap CSS Framework – Full Course for Beginners (FreeCodeCamp), Bootstrap Tutorial for Beginners ( EJ Media) giúp bạn thực hành dựng giao diện thực tế
- ITviec Blog: Nơi tổng hợp các bài hướng dẫn cụ thể cho từng thành phần trong Bootstrap như Button Bootstrap, Dropdown Bootstrap, Tooltip Bootstrap, Modal Bootstrap, Table Bootstrap
Các câu hỏi thường gặp về lộ trình học Bootstrap
Nên học Bootstrap hay Tailwind?
Trong quá trình học front-end, bạn sẽ có thể bắt gặp hai cái tên quen thuộc là Bootstrap và Tailwind CSS. Cả hai đều là framework hỗ trợ xây dựng giao diện nhanh chóng, tuy nhiên hướng tiếp cận lại hoàn toàn khác nhau.
Bootstrap tập trung cung cấp sẵn các thành phần UI hoàn chỉnh như button, card, form, navbar,… còn Tailwind lại đi theo triết lý “utility-first” – cho phép bạn tự tạo mọi thứ từ các class nhỏ. Dưới đây là bảng so sánh nhanh giữa hai framework này:
| Tiêu chí | Bootstrap | Tailwind CSS |
| Mục tiêu | Dựng nhanh giao diện UI hoàn chỉnh | Tùy biến chi tiết từng thành phần theo ý muốn |
| Cách sử dụng | Dùng các class component có sẵn (.btn, .card, .navbar) | Dùng utility class (px-4, text-lg, bg-blue-500) |
| Độ linh hoạt | Cao (có thể ghi đè hoặc mở rộng qua Sass variables) | Rất cao (tự tạo style riêng từ utilities) |
| Khả năng tiếp cận | Dễ cho người mới, cấu trúc rõ ràng | Cần thời gian làm quen cú pháp và cách kết hợp class |
| Trường hợp sử dụng | Dự án nhỏ–trung bình, cần giao diện nhanh và đồng nhất | Dự án lớn, yêu cầu thiết kế độc đáo hoặc hệ thống design riêng |
Việc hiểu được điểm khác biệt giữa hai framework này sẽ giúp bạn chọn đúng công cụ phù hợp với mục tiêu học tập hoặc dự án của mình.
Xem thêm bài viết so sánh chi tiết về Tailwind vs Bootstrap để hiểu rõ ưu nhược điểm của từng framework.
Học Bootstrap có cần giỏi HTML/CSS trước không?
Khi học Bootstrap, bạn không nhất thiết phải giỏi HTML/CSS, nhưng bạn cần nắm chắc nền tảng kiến thức cơ bản.
Bootstrap được xây dựng dựa trên CSS, vì vậy nếu bạn hiểu cách hoạt động của các thuộc tính như display, margin, padding, flexbox hay grid, bạn sẽ học Bootstrap rất nhanh.
Tuy nhiên, mặc dù Bootstrap giúp bạn tối ưu tốc độ viết code giao diện, nhưng nó không thay thế việc hiểu CSS. Nói cách khác, Bootstrap là công cụ hỗ trợ, còn CSS vẫn là “cốt lõi” giúp bạn hiểu sâu và tuỳ chỉnh được mọi thứ.
Bootstrap 5 khác gì Bootstrap 4?
Bootstrap 5 được xem là bước chuyển mình lớn nhất kể từ khi framework ra đời, với mục tiêu hiện đại hơn, nhẹ hơn và linh hoạt hơn. Dưới đây là những thay đổi đáng chú ý nhất:
- Loại bỏ jQuery: Tất cả các thành phần (Modal, Dropdown, Tooltip, v.v.) giờ đây hoạt động hoàn toàn bằng JS thuần, giúp giảm kích thước và tăng hiệu năng
- Ngừng hỗ trợ Internet Explorer: Bootstrap 5 tập trung vào trình duyệt hiện đại (Chrome, Edge, Firefox, Safari), loại bỏ các đoạn code tương thích IE
- Cải tiến Grid System: Thêm breakpoint mới xxl cho màn hình lớn, loại bỏ no-gutters, thay bằng g-*, gx-*, gy-* để quản lý khoảng cách linh hoạt hơn
- Bổ sung Component mới: Offcanvas (menu trượt), Accordion hiện đại hơn, Cải tiến Toast, Modal, Carousel
Đọc thêm về Bootstrap 5 là gì? Những thay đổi nổi bật ở Bootstrap 5
Có nên học Bootstrap trước Tailwind không?
Câu trả lời là nên, đặc biệt nếu bạn đang ở giai đoạn học front-end từ đầu. Bootstrap là framework hướng cấu trúc (structure-first), trong khi Tailwind là framework hướng tiện ích (utility-first). Vì vậy, việc học Bootstrap trước giúp bạn:
- Hiểu được bố cục giao diện, tư duy responsive, và cách tổ chức component – nền tảng quan trọng để học bất kỳ framework CSS nào khác
- Làm quen với class tiện ích như .text-center, .p-4, .bg-primary, giúp chuyển sang Tailwind nhanh hơn
- Tạo sản phẩm thật ngay từ sớm: từ landing page, dashboard, đến blog, mà không cần lo về thiết kế quá nhiều
- Đặc biệt, Bootstrap vẫn được sử dụng phổ biến trong môi trường doanh nghiệp và các dự án nội bộ, nên việc thành thạo nó vẫn là một điểm cộng lớn trong hồ sơ nghề nghiệp.
Tổng kết
Bootstrap là một framework front-end mạnh mẽ và phổ biến hàng đầu hiện nay, giúp lập trình viên xây dựng giao diện web nhanh chóng, chuẩn responsive và dễ mở rộng. Việc nắm vững kiến thức về Bootstrap không chỉ giúp bạn tăng tốc quá trình phát triển giao diện, mà còn nâng cao khả năng làm việc nhóm và cơ hội nghề nghiệp trong môi trường công nghệ hiện đại.
Với lộ trình học Bootstrap mà ITviec tổng hợp, hi vọng bạn có thể xây dựng cho mình một kế hoạch học tập chi tiết, thực hành hiệu quả, và từng bước làm chủ công cụ giao diện tuyệt vời này.
