1. Bootstrap là gì?

Bootstrap là một framework CSS, HTML và JS mã nguồn mở, được phát triển bởi Twitter, giúp thiết kế giao diện web nhanh chóng, nhất quán và responsive (tự thích ứng trên mọi thiết bị).
Ưu điểm của Bootstrap:

  • Thiết kế responsive tự động.
  • Cung cấp các component sẵn có: button, form, navbar, modal, carousel…
  • Hỗ trợ cross-browser.
  • Dễ dàng tích hợp với JavaScript.

Link: https://getbootstrap.com

2. Các phiên bản của Bootstrap

Hiện tại, các phiên bản phổ biến là:

Phiên bản Năm phát hành Đặc điểm nổi bật
Bootstrap 3 2013 Grid 12 cột, responsive, thiết kế mobile-first
Bootstrap 4 2018 Flexbox, card, cải thiện responsive, SCSS thay vì Less
Bootstrap 5 2021 -> 2025 Loại bỏ jQuery, CSS Custom Properties, cải thiện utilities, dễ dàng tích hợp với JS thuần
Lưu ý: Năm 2025, Bootstrap 5 là phiên bản được khuyên dùng vì hiện đại, nhẹ, và tương thích tốt với các dự án mới.

3. Cách cài đặt Bootstrap

3.1. Cài đặt trực tiếp từ CDN

Chèn vào <head> của file HTML:

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
3.2. Cài đặt bằng NPM (dành cho dự án Node.js)
npm install bootstrap

Sau đó import trong file JS hoặc SCSS:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

4. Cấu trúc cơ bản của Bootstrap

4.1. Grid System (Hệ thống lưới)

Bootstrap dùng 12 cột để chia bố cục:

<div class="container">
  <div class="row">
    <div class="col-md-6">Cột 1</div>
    <div class="col-md-6">Cột 2</div>
  </div>
</div>

4.2. Typography (Kiểu chữ)

<h1 class="display-1">Tiêu đề lớn</h1>
<p class="lead">Đoạn văn nổi bật</p>

4.3. Components (Các thành phần sẵn có)

  • Button

<button class="btn btn-primary">Click Button</button>
  • Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
</nav>
  • Card
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Tiêu đề Card</h5>
    <p class="card-text">Mô tả ngắn</p>
  </div>
</div>

4.4. Utilities (Các tiện ích nhanh)

  • Margin & Padding: m-3, p-2
  • Text: text-center, text-primary
  • Background: bg-success, bg-light

5. Ví dụ đầy đủ một trang HTML dùng Bootstrap 5

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">MySite</a>
</nav>

<div class="container mt-5">
  <div class="row">
    <div class="col-md-6">
      <h1 class="display-4">Chào mừng đến với Bootstrap!</h1>
      <p class="lead">Bạn có thể tạo giao diện đẹp nhanh chóng với các component sẵn có.</p>
      <button class="btn btn-primary">Bắt đầu</button>
    </div>
    <div class="col-md-6">
      <img src="https://via.placeholder.com/400" class="img-fluid" alt="Responsive">
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

6. Kết luận

  • Bootstrap là công cụ không thể thiếu cho các lập trình viên frontend.
  • Phiên bản Bootstrap 5 là chuẩn mới nhất 2025, nhẹ và hiện đại.
  • Từ grid, components, utilities, đến JS plugins, bạn có thể xây dựng giao diện web responsive chỉ trong vài phút.