Bootstrap là gì? Hướng dẫn Bootstrap cơ bản cho người mới

Bạn đã học HTML và CSS. Nhưng tự xây dựng layout từ đầu thật mất thời gian — chắc hẳn bạn đã từng cảm thấy như vậy. Với Bootstrap, bạn có thể rút ngắn thời gian đó một cách đáng kể.

Bootstrap là gì? Đây là bộ công cụ UI mã nguồn mở được các kỹ sư của Twitter phát triển. Bootstrap gồm HTML, CSS và JavaScript, cho phép bạn sử dụng các component (thành phần) đã được thiết kế sẵn chỉ bằng cách thêm tên class vào HTML.

Bài viết này sẽ bao quát toàn bộ kiến thức cần thiết cho người mới: định nghĩa Bootstrap, cách cài đặt, hệ thống Grid, các component chính và so sánh Bootstrap với Tailwind CSS.

Nếu bạn chưa nắm vững HTML cơ bản, hãy đọc bài giới thiệu HTML trước rồi quay lại đây.

Bootstrap là gì?

Định nghĩa đơn giản

Bootstrap là bộ công cụ UI (UI toolkit) front-end mã nguồn mở, được cấu thành từ HTML, CSS và JavaScript.

Ví von dễ hiểu nhất là bộ LEGO. LEGO không yêu cầu bạn tự tạo hình dạng từ đầu — bạn ghép các mảnh có sẵn để nhanh chóng tạo ra những hình phức tạp. Bootstrap cũng vậy: các "mảnh ghép" như nút (button), thanh điều hướng (navbar), thẻ (card) đều đã được chuẩn bị sẵn, chỉ cần thêm tên class vào HTML là dùng được.

Điểm nổi bật nhất là bạn có thể tạo ra giao diện trông chuyên nghiệp mà không cần tự viết một dòng CSS nào.

Lịch sử phát triển

Bootstrap ra đời năm 2011, được Mark Otto và Jacob Thornton — hai kỹ sư của Twitter — tạo ra như một công cụ phát triển nội bộ. Sau khi được đón nhận tốt trong nội bộ, Bootstrap được công bố dưới dạng mã nguồn mở trên GitHub vào tháng 8 cùng năm.

Lịch sử các phiên bản như sau:

Bootstrap 2 (2012): Thêm hỗ trợ responsive design
Bootstrap 3 (2013): Thiết kế lại hoàn toàn theo hướng mobile-first
Bootstrap 4 (2018): Áp dụng toàn diện Flexbox và Sass
Bootstrap 5 (2021 — hiện tại): Loại bỏ jQuery, chuyển sang Vanilla JS

Theo dữ liệu từ W3Techs tháng 4/2026, 16,0% tổng số website trên thế giới sử dụng Bootstrap. Đây là framework đã được kiểm chứng qua việc ứng dụng tại các công ty hàng đầu như Cloudflare, Spotify, Samsung, PayPal và BBC.

Bootstrap 5 — Phiên bản mới nhất

Phiên bản hiện hành là v5.3.8 (tính đến tháng 4/2026). So với Bootstrap 4, có hai thay đổi chính:

Loại bỏ jQuery: Chuyển sang Vanilla JavaScript thuần túy. Giảm một thư viện cần tải, hiệu suất được cải thiện
Thêm breakpoint xxl: Hỗ trợ màn hình ≥1400px với lớp xxl, tăng cường khả năng thích ứng với màn hình lớn

Với dự án mới, hãy luôn sử dụng Bootstrap 5.

Tại sao nên dùng Bootstrap?

Tiết kiệm thời gian

Nếu tự viết CSS từ đầu, chỉ riêng việc thiết kế một nút bấm đã tốn nhiều thời gian. Màu sắc khi hover, style khi focus, xử lý responsive… có hàng đống thứ cần nghĩ tới.

Bootstrap giải quyết tất cả những điều đó chỉ bằng các class CSS.

Tư duy ở đây là: "Xây nhà không cần tự nung gạch." Vật liệu (component) đã có sẵn — việc của bạn chỉ là lắp ráp.

Responsive mặc định

Bootstrap được thiết kế theo hướng mobile-first. Nghĩa là chỉ cần dùng hệ thống Grid, bạn đã có layout tự động thích ứng với smartphone, tablet và desktop.

Điều này đặc biệt quan trọng ở thị trường Việt Nam, nơi hơn 70% người dùng Web truy cập qua smartphone. Responsive không còn là tùy chọn — đó là yêu cầu bắt buộc.

Bootstrap được dùng ở đâu?

Trong ngành IT Việt Nam, nhu cầu về Bootstrap rất cao:

Dự án outsource: Nhiều dự án nhận từ Nhật Bản và các nước phương Tây yêu cầu cụ thể Bootstrap
Chương trình đào tạo: Các trung tâm IT lớn như FUNiX, Aptech, BTEC FPT đều đưa Bootstrap vào giảng dạy
Thị trường freelance: Kỹ năng Bootstrap thường xuyên xuất hiện trong yêu cầu tuyển dụng trên TopDev và Việt Freelancer
Hệ thống nội bộ và trang quản trị: Bootstrap là tiêu chuẩn thực tế (de facto standard) cho các hệ thống nội bộ doanh nghiệp vừa và nhỏ

Thành thạo Bootstrap giúp bạn trở thành ứng viên sẵn sàng làm việc ngay khi xin việc hoặc nhận dự án.

Cài đặt Bootstrap — 2 cách đơn giản nhất

Cách 1: Dùng CDN (khuyến nghị cho người mới)

Dùng CDN (Content Delivery Network) cho phép bạn thử Bootstrap mà không cần tải file hay cấu hình. Chỉ cần thêm 2 dòng vào file HTML:

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Trang web với Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
          crossorigin="anonymous">
  </head>
  <body>
    <h1>Xin chào Bootstrap!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
            crossorigin="anonymous"></script>
  </body>
</html>

Về bootstrap.bundle.min.js: Phiên bản bundle đã bao gồm sẵn Popper.js. Nếu bạn dùng các component JavaScript như Dropdown, Modal, Tooltip, chỉ cần tải một file này là đủ.

Cách 2: Cài bằng npm

Với các dự án dùng build tool như Vite, cài qua npm là cách được khuyến nghị.

npm install bootstrap@5.3.8

Để tích hợp với Vite, thực hiện theo các bước sau.

Nhúng Sass của Bootstrap vào src/scss/styles.scss:

@import "bootstrap/scss/bootstrap";

Import vào src/js/main.js:

import '../scss/styles.scss'
import * as bootstrap from 'bootstrap'

Với dự án dùng Vite, phiên bản npm được khuyến nghị vì dễ tùy chỉnh theme qua biến (variable) Sass hơn.

Bootstrap Grid System là gì?

Container, Row, Column

Hệ thống Grid của Bootstrap sử dụng cấu trúc 12 cột (column) dựa trên Flexbox, với 3 tầng lớp:

container (khung ngoài — giới hạn chiều rộng tổng thể)
  └── row (hàng — tạo dãy ngang)
        └── col-* (cột — chứa nội dung thực tế)

container = tường ngoài của ngôi nhà (giới hạn chiều rộng nội dung)
row = kệ tủ (sắp xếp các phần tử theo chiều ngang)
col-* = ngăn kệ (xác định độ rộng từng cột)

Độ rộng cột được tính trên hệ thống 12 phần:

col-6 = nửa chiều rộng (6/12)
col-4 = một phần ba chiều rộng (4/12)
col-3 = một phần tư chiều rộng (3/12)
col = không có số, tự động chia đều

Lưu ý: Nếu tổng số cột col-* vượt quá 12, phần thừa sẽ tự động xuống dòng mới.

Breakpoint trong Bootstrap

Breakpoint là ngưỡng chiều rộng màn hình mà CSS chuyển đổi cách hiển thị. Bootstrap có 6 cấp breakpoint:

Breakpoint	Class suffix	Màn hình	Container max-width
Extra small	(không có)	<576px	Không (100%)
Small	`sm`	≥576px	540px
Medium	`md`	≥768px	720px
Large	`lg`	≥992px	960px
Extra large	`xl`	≥1200px	1140px
Extra extra large	`xxl`	≥1400px	1320px

xxl được thêm mới trong Bootstrap 5, cho phép hỗ trợ màn hình lớn và màn hình 4K.

Ví dụ layout 3 cột responsive

Chỉ cần kết hợp class col-12 col-md-4, layout sẽ tự động chuyển đổi theo chiều rộng màn hình:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <p>Cột 1</p>
    </div>
    <div class="col-12 col-md-4">
      <p>Cột 2</p>
    </div>
    <div class="col-12 col-md-4">
      <p>Cột 3</p>
    </div>
  </div>
</div>

col-12 có nghĩa là full width (1 cột) trên smartphone, còn col-md-4 có nghĩa là chia 3 phần đều nhau trên tablet trở lên (≥768px). Không cần viết một dòng JavaScript hay media query nào — chỉ kết hợp class là có layout responsive hoàn chỉnh.

Các Component phổ biến của Bootstrap

Button

Nút bấm chỉ cần kết hợp class btn với btn-{variant}:

<button type="button" class="btn btn-primary">Xác nhận</button>
<button type="button" class="btn btn-danger">Xóa</button>
<button type="button" class="btn btn-outline-secondary">Hủy</button>

<button type="button" class="btn btn-primary btn-lg">Lớn</button>
<button type="button" class="btn btn-primary btn-sm">Nhỏ</button>

Có 8 biến thể (variant) màu sắc: primary (xanh dương), secondary (xám), success (xanh lá), danger (đỏ), warning (vàng), info (xanh nhạt)... Phiên bản viền ngoài (outline) dùng btn-outline-{variant}.

Card

Card là component đa năng dùng được trong nhiều trường hợp: danh sách bài viết có thumbnail, danh mục sản phẩm, hiển thị hồ sơ cá nhân, v.v.

<div class="card" style="width: 18rem;">
  <img src="anh-san-pham.jpg" class="card-img-top" alt="Ảnh sản phẩm">
  <div class="card-body">
    <h5 class="card-title">Tên sản phẩm</h5>
    <p class="card-text">Mô tả ngắn về sản phẩm này.</p>
    <a href="#" class="btn btn-primary">Xem chi tiết</a>
  </div>
</div>

Navbar

Nhờ class navbar-expand-lg, trên desktop menu hiển thị ngang, còn trên mobile tự động chuyển thành menu hamburger. Không cần viết một dòng JavaScript nào.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>

    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <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="#">Khóa học</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên hệ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Chỉ cần thiết lập đúng các thuộc tính HTML data-bs-toggle và data-bs-target, JS của Bootstrap sẽ tự động xử lý việc đóng/mở menu hamburger.

Modal

Điểm mấu chốt là sự tương ứng giữa data-bs-toggle="modal", data-bs-target="#myModal" và id="myModal". Hộp thoại popup hoạt động mà không cần viết một dòng JavaScript nào.

<button type="button" class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#myModal">
  Mở hộp thoại
</button>

<div class="modal fade" id="myModal" 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"
                aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Bạn có chắc muốn thực hiện hành động này không?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
                data-bs-dismiss="modal">Hủy</button>
        <button type="button" class="btn btn-primary">Xác nhận</button>
      </div>
    </div>
  </div>
</div>

Quan trọng là data-bs-target="#myModal" của nút và id="myModal" của Modal phải khớp với nhau.

Alert

Chỉ cần thêm class alert-dismissible, bạn đã có thanh thông báo kèm nút đóng:

<div class="alert alert-success" role="alert">
  Đăng ký thành công! Kiểm tra email của bạn.
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Chú ý!</strong> Hãy kiểm tra thông tin trước khi gửi.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Bootstrap vs Tailwind CSS — Nên học cái nào?

So sánh chi tiết

Tiêu chí	Bootstrap 5	Tailwind CSS
Phong cách	Component-based	Utility-first
Độ khó học	Thấp	Trung bình – Cao
Tính tự do thiết kế	Trung bình	Cao
Style mặc định	Phong phú (dùng ngay)	Tối giản (tự thiết kế)
Bundle size	~200KB (CDN)	Nhỏ hơn (với PurgeCSS)
JavaScript tích hợp	Có (Modal, Dropdown…)	Không
Phù hợp với	Người mới, dự án nhanh, outsource	Dự án SPA, thiết kế riêng
Phổ biến tại VN	Rất phổ biến (outsource, bootcamp)	Đang tăng (startup, frontend hiện đại)

Bootstrap — Ưu và nhược điểm

Ưu điểm:

Chi phí học tập thấp. Tên class trực quan, tài liệu đầy đủ
Các component như Button, Card, Navbar dùng được ngay
Nhu cầu cao trong thị trường outsource và freelance Việt Nam, dễ trở thành ứng viên sẵn sàng làm việc ngay
Giảm đáng kể lượng code JavaScript cần viết (component hoạt động qua thuộc tính HTML)

Nhược điểm:

UI mặc định khá mạnh, khiến các trang dùng Bootstrap có xu hướng trông giống nhau
Bundle size của phiên bản CDN khoảng 200KB, bao gồm cả các style không dùng tới
Mức độ tự do thiết kế không cao bằng Tailwind

Kết luận — Nên học cái nào?

Với người mới học, khuyến nghị học Bootstrap trước, Tailwind sau.

Nên nắm vững khái niệm layout và component với Bootstrap trước, rồi mới chuyển sang xây dựng thiết kế riêng với Tailwind — đây là lộ trình nâng cấp tự nhiên nhất. Hãy dùng Bootstrap để cảm nhận "CSS framework là gì", sau đó mở rộng tự do thiết kế với Tailwind.

Xét theo góc độ xin việc và nhận dự án freelance tại Việt Nam, thành thạo Bootstrap trước là con đường ngắn nhất để trở thành ứng viên sẵn sàng làm việc ngay.

Nếu muốn tìm hiểu thêm về Tailwind CSS, hãy đọc bài Tailwind CSS là gì.

Bootstrap phù hợp với dự án nào? Bước tiếp theo

Khi nào nên dùng Bootstrap

Bootstrap là lựa chọn tối ưu trong các trường hợp sau:

Bạn vừa học HTML và CSS, muốn nhanh chóng tạo ra giao diện
Dự án cần hoàn thiện prototype hoặc sản phẩm trong thời gian ngắn
Hệ thống nghiệp vụ hoặc trang quản trị ưu tiên tính năng hơn thiết kế
Dự án outsource hoặc freelance tại Việt Nam (khách hàng thường chỉ định Bootstrap)
Học theo chương trình bootcamp hoặc khóa học online của FUNiX, Aptech, v.v.

Kiến thức cần có trước khi học Bootstrap

Đây là những kiến thức nền cần thiết trước khi học Bootstrap:

Kiến thức bắt buộc:

HTML: Thẻ (tag), thuộc tính (attribute), cấu trúc trang cơ bản
CSS: Selector, box model, cách styling cơ bản
Flexbox: Hệ thống Grid của Bootstrap dựa hoàn toàn trên Flexbox, hiểu cơ bản sẽ giúp bạn nắm nhanh hơn

Kiến thức hữu ích thêm:

JavaScript cơ bản: Hữu ích nếu bạn muốn tùy chỉnh Modal hay Dropdown. Tuy nhiên, để sử dụng các component cơ bản thì không cần viết JavaScript

Lộ trình học Bootstrap đề xuất

Thực hiện theo các bước sau để học hiệu quả nhất:

Tạo trang HTML đầu tiên với CDN, thử dùng Button và Alert
Xây dựng layout responsive với hệ thống Grid (container / row / col-*)
Tích hợp các component như Navbar, Card, Button vào trang thực tế
Thử nghiệm interaction với Modal và Form
Tham khảo tài liệu chính thức tại getbootstrap.com để khám phá thêm component

Câu hỏi thường gặp (FAQ)

Bootstrap có miễn phí không?

Hoàn toàn miễn phí. Bootstrap là dự án mã nguồn mở theo giấy phép MIT, có thể sử dụng tự do kể cả trong các dự án thương mại.

Bootstrap có cần học JavaScript không?

Với mức sử dụng cơ bản thì gần như không cần viết JavaScript. Các component động như Modal hay Dropdown hoạt động tự động nhờ JS của Bootstrap, chỉ cần viết đúng các thuộc tính HTML như data-bs-toggle.

Tuy nhiên, "không cần kiến thức JavaScript" là điều không hoàn toàn đúng. Nếu bạn muốn tùy chỉnh component hoặc thao tác động qua API, có kiến thức JavaScript sẽ là lợi thế lớn.

Bootstrap 4 và Bootstrap 5 khác nhau ở điểm gì?

Có hai điểm khác biệt chính:

Loại bỏ jQuery: Bootstrap 4 yêu cầu jQuery, Bootstrap 5 thì không (chuyển sang Vanilla JS)
Thêm breakpoint xxl: Bổ sung xxl cho màn hình ≥1400px

Với dự án mới, hãy luôn sử dụng Bootstrap 5.

Bootstrap có tương thích với React hay Vue không?

Có các thư viện wrapper (bao bọc) chính thức và không chính thức:

React: react-bootstrap (hỗ trợ Bootstrap 5)
Vue: bootstrap-vue-next
Angular: ng-bootstrap

Tuy nhiên, khi còn là người mới, cách đơn giản và dễ học nhất là dùng phiên bản CDN kết hợp HTML thuần. Việc tích hợp với framework nên để sau khi bạn đã nắm vững kiến thức cơ bản.

Tổng kết

Dưới đây là tóm tắt những gì bạn đã học trong bài viết này:

Bootstrap là gì: Bộ công cụ UI mã nguồn mở do kỹ sư Twitter tạo ra. 16% website toàn cầu sử dụng
Đặc điểm của Bootstrap 5: Không cần jQuery (chuyển sang Vanilla JS), bổ sung breakpoint xxl
Cài đặt: Phiên bản CDN chỉ cần thêm 2 dòng. Dự án Vite nên dùng phiên bản npm
Hệ thống Grid: 12 cột, dựa trên Flexbox. Chỉ cần kết hợp class như col-12 col-md-4 là có layout responsive hoàn chỉnh
Component: Button, Card, Navbar, Modal, Alert và nhiều hơn nữa — tất cả dùng được chỉ bằng cách thêm class
Bootstrap vs Tailwind: Người mới nên học Bootstrap trước rồi mới đến Tailwind — đây là lộ trình mượt mà nhất

Cách nhanh nhất để bắt đầu là thêm Bootstrap vào file HTML của bạn qua CDN và thử nghiệm ngay. Vòng lặp viết code và kiểm tra kết quả trên trình duyệt sẽ giúp bạn cảm nhận được Grid và component rất nhanh.

Bước tiếp theo:

Tailwind CSS là gì — So sánh Bootstrap và Tailwind qua code thực tế
Responsive Design là gì — Hiểu sâu hơn về cơ chế responsive của Bootstrap
Flexbox CSS — Nắm vững Flexbox — nền tảng của hệ thống Grid Bootstrap

Bootstrap là gì? Hướng dẫn Bootstrap cơ bản cho người mới

Bootstrap là gì?

Định nghĩa đơn giản

Lịch sử phát triển

Bootstrap 5 — Phiên bản mới nhất

Tại sao nên dùng Bootstrap?

Tiết kiệm thời gian

Responsive mặc định

Bootstrap được dùng ở đâu?

Cài đặt Bootstrap — 2 cách đơn giản nhất

Cách 1: Dùng CDN (khuyến nghị cho người mới)

Cách 2: Cài bằng npm

Bootstrap Grid System là gì?

Container, Row, Column

Breakpoint trong Bootstrap

Ví dụ layout 3 cột responsive

Các Component phổ biến của Bootstrap

Button

Card

Navbar

Modal

Alert

Bootstrap vs Tailwind CSS — Nên học cái nào?

So sánh chi tiết

Bootstrap — Ưu và nhược điểm

Kết luận — Nên học cái nào?

Bootstrap phù hợp với dự án nào? Bước tiếp theo

Khi nào nên dùng Bootstrap

Kiến thức cần có trước khi học Bootstrap

Lộ trình học Bootstrap đề xuất

Câu hỏi thường gặp (FAQ)

Bootstrap có miễn phí không?

Bootstrap có cần học JavaScript không?

Bootstrap 4 và Bootstrap 5 khác nhau ở điểm gì?

Bootstrap có tương thích với React hay Vue không?

Tổng kết

Về tác giả

Khóa học liên quan