Trong thiết kế web ngày nay, CSS là yếu tố then chốt giúp tạo nên giao diện đẹp mắt và trải nghiệm người dùng tốt. Với Bootstrap, việc áp dụng và quản lý CSS trở nên dễ dàng hơn rất nhiều nhờ vào hệ thống các lớp (class) được thiết kế sẵn, linh hoạt và dễ sử dụng.
Đọc bài viết này để hiểu rõ về:
- CSS trong Bootstrap là gì?
- Tổng quan về các nhóm lớp CSS trong Bootstrap
- Cách tùy chỉnh CSS trong Bootstrap với CSS Variables và Sass
- Các kỹ thuật tối ưu hóa và quản lý CSS hiệu quả
- Những lỗi phổ biến và lưu ý khi làm việc với CSS trong Bootstrap
Tổng quan về Bootstrap CSS
CSS trong Bootstrap là gì?
Bootstrap là một framework front-end phổ biến, giúp các nhà phát triển xây dựng giao diện web một cách nhanh chóng và hiệu quả. Một phần cốt lõi của Bootstrap chính là hệ thống CSS (Cascading Style Sheets), được thiết kế để cung cấp các lớp (classes) đã được viết sẵn, giúp người dùng dễ dàng áp dụng các kiểu dáng, bố cục và hiệu ứng cho website mà không cần tự viết quá nhiều CSS từ đầu.
CSS trong Bootstrap bao gồm:
- Các class tiện ích (utility classes) cho bố cục, màu sắc, căn chỉnh,…
- Các thành phần UI có sẵn (buttons, forms, tables…)
- Các biến CSS (CSS variables) giúp dễ dàng tùy chỉnh giao diện.
- Hỗ trợ cho các kỹ thuật hiện đại như Flexbox, Grid Layout, Sass,…
Đọc chi tiết: CSS là gì? Hướng dẫn sử dụng hiệu quả CSS để thiết kế web
Vai trò cốt lõi của CSS trong Bootstrap
CSS đóng vai trò then chốt trong toàn bộ hệ thống của Bootstrap. Có thể nói, CSS chính là “xương sống” giúp framework này trở thành công cụ mạnh mẽ để phát triển giao diện hiện đại. Dưới đây là những vai trò cốt lõi của CSS trong Bootstrap:
- Giúp website có giao diện đồng nhất: Nhờ có những quy tắc CSS được viết sẵn, các phần của trang web như tiêu đề, nút bấm, bảng biểu, biểu mẫu… sẽ có kiểu dáng nhất quán, không bị chỗ to chỗ nhỏ, hoặc màu sắc lộn xộn.
- Rút ngắn thời gian làm giao diện: Thay vì phải viết nhiều dòng mã CSS thủ công, người làm web chỉ cần áp dụng các class có sẵn trong Bootstrap vào thẻ HTML, là đã có thể tạo ra giao diện nhanh chóng.
- Hỗ trợ responsive tốt trên mọi thiết bị: Bootstrap CSS được thiết kế với tư duy “mobile-first”, kết hợp với hệ thống breakpoints, giúp giao diện tự động thích ứng với các độ phân giải màn hình khác nhau: từ điện thoại di động, máy tính bảng cho đến desktop.
- Dễ sửa và dễ nâng cấp: Khi muốn chỉnh sửa màu sắc, kiểu chữ hay khoảng cách giữa các phần, chỉ cần thay đổi hoặc thêm bớt một vài lớp CSS là đủ, không cần phải chỉnh sửa quá nhiều mã.
- Giúp website hiển thị tốt trên nhiều trình duyệt: CSS của Bootstrap đã được kiểm thử để đảm bảo các trang web sẽ hiển thị đúng trên các trình duyệt phổ biến, tránh tình trạng lỗi hiển thị khi mở trang web bằng các trình duyệt khác nhau.
Đọc chi tiết: Bootstrap 5 là gì? Những thay đổi nổi bật ở Bootstrap 5
So sánh giữa CSS thuần và CSS Bootstrap
CSS thuần và CSS Bootstrap đều giúp lập trình viên kiểm soát bố cục, màu sắc, kiểu chữ, khoảng cách và khả năng responsive trên trang web. Tuy nhiên, cách làm và hiệu quả thực tế giữa CSS thuần và Bootstrap lại có nhiều điểm khác biệt. Dưới đây là bảng so sánh chi tiết:
| Tiêu chí | CSS thuần | CSS Bootstrap |
| Thời gian phát triển | Cần tự viết từng dòng | Cực nhanh, dùng class có sẵn |
| Sự nhất quán | Phụ thuộc vào lập trình viên | Luôn đồng nhất nhờ dùng chung class |
| Tính linh hoạt | Rất linh hoạt, hoàn toàn tự do | Linh hoạt nhưng trong khuôn mẫu sẵn có |
| Khả năng responsive | Phải tự viết các đoạn CSS cho từng thiết bị | Có sẵn hệ thống responsive dễ dùng |
| Khả năng tái sử dụng, bảo trì | Có thể khó tái sử dụng giữa dự án | Rất dễ tái sử dụng và mở rộng |
Ví dụ: Tạo 1 nút nền màu xanh với chữ trắng, các góc bo tròn và padding đều.
- Khi sử dụng CSS thuần: Phải tự viết các dòng CSS để tạo kiểu cho nút: màu nền, màu chữ, padding, bo tròn…
<button class="btn-green">Nút dùng CSS thuần</button>
<style>
.btn-green {
background-color: #0d6efd;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
}
</style>Kết quả:
- Khi sử dụng Bootstrap CSS: Chỉ cần 2 class có sẵn: .btn (định nghĩa nút) và .btn-primary (nút màu xanh). Không cần viết thêm CSS.
<button class="btn btn-primary">Nút dùng Bootstrap</button>Kết quả:
Hệ thống các nhóm lớp CSS trong Bootstrap
Hệ thống CSS của Bootstrap không chỉ mạnh nhờ tính dễ dùng, mà còn bởi cấu trúc rất rõ ràng. Các class CSS trong Bootstrap được phân chia thành từng nhóm chức năng như: bố cục, màu sắc, typography, UI… Việc nắm được các nhóm này giúp lập trình viên dễ tra cứu, áp dụng và tối ưu giao diện một cách hiệu quả.
Dưới đây là các nhóm CSS chính trong Bootstrap mà bạn nên biết:
| Nhóm CSS | Công dụng | Ví dụ |
| Bố cục & căn chỉnh (Grid & Flexbox) | Tạo layout, chia cột, căn chỉnh phần tử | .row, .col-md-6, .d-flex, .justify-content-center |
| Giao diện (UI Elements) | Định dạng các thành phần như button, dropdown, table | .btn-primary, .dropdown-menu, .table-striped |
| Typography & Text | Kiểu chữ, độ đậm, căn chỉnh văn bản | .h1, .lead, .fw-bold, .text-center |
| Biểu tượng (Icon) | Chèn icon minh hoạ từ bộ Bootstrap Icons | .bi-alarm, .bi-heart-fill |
| Spacing (Padding & Margin) | Điều chỉnh khoảng cách trong / ngoài phần tử | .p-3, .mt-4, .mx-auto |
| Màu sắc & Nền (Colors & Backgrounds) | Đổi màu chữ, màu nền, thêm gradient | .text-primary, .bg-success, .bg-gradient |
Nhóm CSS về bố cục và căn chỉnh (Grid và Flexbox)
Một trong những thế mạnh lớn nhất của CSS trong Bootstrap chính là khả năng giúp lập trình viên dễ dàng sắp xếp và căn chỉnh bố cục của trang web. Bootstrap kết hợp hai công nghệ CSS rất mạnh là Grid System và Flexbox utilities để hỗ trợ việc xây dựng layout:
Grid System
Đây là hệ thống lưới dựa trên 12 cột, cho phép bạn chia khung trang thành các phần theo tỷ lệ mong muốn. Mỗi cột có thể được thiết lập để co giãn hoặc cố định tùy theo kích thước màn hình.
Đọc chi tiết: Bootstrap Grid System là gì: Cách dùng từ cơ bản đến nâng cao
Hình ảnh minh họa về hệ thống cột trong Grid:
Ví dụ, bạn có thể tạo một hàng có hai cột bằng cách dùng .col-6, hoặc ba cột bằng .col-4:
<div class="row">
<div class="bg-secondary border col-6">Cột 1</div>
<div class="bg-secondary border col-6">Cột 2</div>
</div>
<div class="row">
<div class="bg-secondary border col-4">Cột 1</div>
<div class="bg-secondary border col-4">Cột 2</div>
<div class="bg-secondary border col-4">Cột 3</div>
</div>Kết quả:
Flexbox utilities
Ngoài grid, Bootstrap còn hỗ trợ sẵn nhiều lớp CSS giúp điều chỉnh bố cục bằng Flexbox. Với các lớp như .d-flex, .justify-content-center, .align-items-start, bạn có thể căn chỉnh các phần tử theo chiều ngang, chiều dọc, giãn cách giữa các phần tử một cách dễ dàng mà không cần viết Flexbox CSS thủ công.
Ví dụ, sử dụng Flexbox Bootstrap để căn giữa và giãn cách 3 phần tử trong một hàng:
<div class="d-flex justify-content-center gap-3 m-3 border">
<div class="p-3 bg-primary text-white">Khối 1</div>
<div class="p-3 bg-primary text-white">Khối 2</div>
<div class="p-3 bg-primary text-white">Khối 3</div>
</div>Kết quả:
Đọc chi tiết: Flexbox Bootstrap là gì: Hướng dẫn sử dụng chi tiết từ A-Z
Nhóm CSS về giao diện (UI Elements)
Một điểm mạnh nổi bật khác của Bootstrap chính là việc cung cấp sẵn một bộ các thành phần giao diện người dùng (UI Elements) đẹp mắt, dễ dùng, có thể áp dụng ngay chỉ bằng cách thêm class CSS vào thẻ HTML.
Nhờ có các lớp CSS này, người làm web không cần phải tự thiết kế hay tự viết CSS cho những thành phần cơ bản như nút bấm, bảng biểu, biểu mẫu (form), menu dropdown…
Một số thành phần giao diện phổ biến mà Bootstrap cung cấp sẵn như:
Nút bấm (Button)
Bootstrap cung cấp sẵn nhiều kiểu nút khác nhau về màu sắc, kích thước, viền bo góc… Để tạo nút, bạn chỉ cần thêm class .btn kèm với một class variant như .btn-primary, .btn-secondary…
Ví dụ:
<button class="btn btn-primary">Nút chính</button>
<button class="btn btn-secondary">Nút phụ</button>
<button class="btn btn-outline-success">Nút viền xanh</button>
<button class="btn btn-danger btn-lg">Nút lớn màu đỏ</button>Kết quả:
Đọc chi tiết về cách sử dụng Button trong Bootstrap
Dropdown
Bootstrap cung cấp sẵn các kiểu menu dropdown giúp bạn dễ dàng tạo ra các danh sách lựa chọn sổ xuống. Để tạo dropdown, bạn chỉ cần kết hợp các class như .dropdown, .dropdown-toggle và .dropdown-menu.
Ví dụ để tạo ra danh sách menu gồm 3 lựa chọn:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
Chọn mục
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Mục 1</a></li>
<li><a class="dropdown-item" href="#">Mục 2</a></li>
<li><a class="dropdown-item" href="#">Mục 3</a></li>
</ul>
</div>Kết quả:
Đọc chi tiết về cách sử dụng Dropdown Bootstrap
Bảng (Table)
Trong Bootstrap, để tạo một bảng bạn chỉ cần thêm class .table vào thẻ <table> để áp dụng style chuẩn. Ngoài ra, có thể kết hợp thêm các class như .table-striped, .table-hover, .table-bordered… để tạo các hiệu ứng như kẻ dòng, hover, có viền.
Ví dụ để tạo một bảng trong Bootstrap:
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Tên</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>a@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Lê Thị B</td>
<td>b@example.com</td>
</tr>
</tbody>
</table>Kết quả:
Trong đó:
.table: áp dụng style bảng cơ bản.table-striped: kẻ màu nền xen kẽ giữa các dòng.table-hover: khi rê chuột qua dòng sẽ có hiệu ứng hover- Có thể thêm
.table-borderednếu muốn bảng có viền
Đọc chi tiết về cách sử dụng Table Bootstrap
Biểu mẫu (Form)
Bootstrap cung cấp sẵn nhiều class để giúp bạn dễ dàng tạo ra các biểu mẫu (form) đẹp, rõ ràng và dễ sử dụng. Để tạo form, bạn chỉ cần kết hợp các class như .form-control, .form-label, .form-check, .form-select… vào các thẻ HTML tương ứng.
Ví dụ tạo một biểu mẫu trong Bootstrap:
<form>
<div class="mb-3">
<label for="name" class="form-label">Họ và tên</label>
<input type="text" class="form-control" id="name" placeholder="Nhập họ tên">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Nhập email">
</div>
<div class="mb-3">
<label for="country" class="form-label">Quốc gia</label>
<select class="form-select" id="country">
<option>Việt Nam</option>
<option>Hoa Kỳ</option>
<option>Nhật Bản</option>
</select>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">Đồng ý điều khoản</label>
</div>
<button type="submit" class="btn btn-primary">Gửi</button>
</form>Kết quả:
Trong đó:
.form-label: style cho nhãn (label).form-control: style cho ô nhập liệu.form-select: style cho menu chọn (select box).form-check,.form-check-input,.form-check-label: style cho checkbox / radio
Nhóm CSS về typography, text và icon
Trong giao diện web, cách trình bày chữ và biểu tượng đóng vai trò rất quan trọng để tăng tính thẩm mỹ và giúp người đọc dễ theo dõi nội dung. Bootstrap hỗ trợ nhiều class tiện lợi để điều chỉnh kiểu chữ, căn chỉnh văn bản, thay đổi trọng số hoặc thêm biểu tượng minh họa, tất cả đều dễ sử dụng và đồng bộ trên toàn trang. Nhóm CSS này bao gồm:
Tiêu đề và đoạn văn
Các class typography của Bootstrap giúp định dạng các tiêu đề hoặc đoạn văn trở nên rõ ràng, dễ phân cấp nội dung.
Ví dụ, bạn có thể sử dụng .h1 đến .h6 để tạo các cấp độ tiêu đề, hoặc .lead để làm nổi bật một đoạn văn mở đầu:
<h1 class="h1">Tiêu đề chính (h1)</h1>
<h2 class="h2">Tiêu đề phụ (h2)</h2>
<p class="lead">Đoạn giới thiệu nổi bật</p>
<p class="text-muted">Văn bản ghi chú nhẹ</p>Kết quả:
Căn chỉnh văn bản
Bootstrap cũng giúp bạn dễ dàng căn chỉnh vị trí của văn bản chỉ với các class có sẵn. Bạn không cần viết CSS riêng cho việc này. Ví dụ:
<p class="text-start">Căn trái (mặc định)</p>
<p class="text-center">Căn giữa</p>
<p class="text-end">Căn phải</p> Kết quả:
Trong đó:
- .text-start: căn trái (thường là mặc định)
- .text-center: căn giữa đoạn văn
- .text-end: căn phải
Việc căn chỉnh nhanh này rất hữu ích khi bạn muốn thay đổi bố cục từng phần mà không cần chỉnh CSS thủ công.
Độ đậm và kiểu chữ
Khi bạn muốn thay đổi độ đậm, kiểu nghiêng hoặc kiểu chữ của văn bản, Bootstrap cung cấp các class tiện dụng giúp bạn làm việc này ngay trong HTML, bạn có thể áp dụng những class này cho mọi phần tử văn bản, từ tiêu đề, mô tả, đến caption nhỏ:
<p class="fw-bold">Chữ in đậm (font-weight bold)</p>
<p class="fw-light">Chữ mảnh (font-weight light)</p>
<p class="fst-italic">Chữ nghiêng (italic)</p>Kết quả:
Đọc chi tiết: Text Bootstrap: 10+ cách định dạng văn bản hiệu quả với Bootstrap
Biểu tượng (Icon)
Từ phiên bản Bootstrap 5 trở đi, framework không tích hợp sẵn icon bên trong core CSS. Tuy nhiên, nhóm phát triển Bootstrap có cung cấp bộ icon riêng là Bootstrap Icons, có thể tải về hoặc nhúng qua link CDN. Để chèn icon vào giao diện rất đơn giản: bạn chỉ cần dùng thẻ <i> hoặc <span> với class .bi và tên icon.
Ví dụ:
<p><i class="bi bi-alarm"></i> Thông báo báo thức</p>
<p><i class="bi bi-heart-fill text-danger"></i> Yêu thích</p>Kết quả:
Trong đó:
.bi: class gốc của Bootstrap Iconsbi-alarm,bi-heart-fill: tên icon cụ thể- Có thể kết hợp với class màu của Bootstrap (vd:
.text-dangerlà màu đỏ)
Đọc chi tiết về cách sử dụng Bootstrap icon
Nhóm CSS về spacing (padding, margin)
Khoảng cách giữa các phần tử là một phần rất quan trọng để giúp giao diện thông thoáng, dễ nhìn. Thay vì phải tự viết các câu lệnh CSS phức tạp cho margin hoặc padding, Bootstrap cung cấp sẵn một hệ thống class rất linh hoạt để bạn có thể kiểm soát khoảng cách nhanh chóng.
Khoảng cách bên trong (Padding)
Padding là phần khoảng cách giữa nội dung và viền của một phần tử. Bootstrap giúp bạn điều chỉnh padding dễ dàng thông qua các class có sẵn, với cú pháp:
p{side?}-{size}Trong đó:
p: padding{side?}: vị trí muốn áp dụng: t (top), b (bottom), s (start – trái), e (end – phải), x (trái + phải), y (trên + dưới), hoặc không ghi gì là tất cả các phía{size}: từ 0 đến 5, số càng lớn, khoảng cách càng rộng.
Ví dụ:
<div class="border p-3">Padding 3 cho tất cả các phía</div>
<div class="border px-4">Padding trái và phải = 4</div>
<div class="border pt-5 pb-2">Padding trên = 5, dưới = 2</div>Kết quả:
Tìm hiểu chi tiết về Padding Bootstrap
Khoảng cách bên ngoài (Margin)
Margin là phần khoảng cách giữa phần tử này và phần tử khác. Tương tự như padding, Bootstrap cũng hỗ trợ class margin với cú pháp:
m{side?}-{size}Trong đó:
m: margin{side?}và{size}tương tự như padding- Đặc biệt: có thể dùng auto cho margin, thường để căn giữa phần tử.
Ví dụ:
<div class="border m-0">Không có margin (khoảng cách ngoài bằng 0)</div>
<div class="border mt-4 mb-2">Margin trên = 4, dưới = 2</div>
<div class="border mx-auto" style="width: 200px;">Căn giữa (margin auto)</div>Kết quả:
Tìm hiểu chi tiết về Margin Bootstrap
Nhóm CSS về màu sắc và nền (Colors & Backgrounds)
Màu sắc là yếu tố giúp giao diện trở nên sinh động, dễ tạo cảm xúc cho người dùng. Việc sử dụng màu đúng cách còn giúp phân biệt các nhóm nội dung, nhấn mạnh thông tin quan trọng hoặc tạo sự nhất quán cho thương hiệu.
Bootstrap hỗ trợ sẵn một hệ thống class về màu chữ và màu nền rất linh hoạt. Bạn có thể áp dụng ngay cho bất kỳ phần tử nào trong trang mà không cần viết thêm CSS.
Màu chữ (Text colors)
Để thay đổi màu của văn bản, chỉ cần sử dụng các class mà Bootstrap đã cung cấp sẵn như:
.text-primary: Màu chính của giao diện.text-secondary: Màu phụ.text-success: Màu xanh lá – dùng cho thông tin mang ý nghĩa thành công.text-danger: Màu đỏ – dùng cho thông tin mang ý nghĩa cảnh báo, lỗi.text-warning: Màu vàng – dùng cho thông tin mang ý nghĩa chú ý.text-info: Màu xanh da trời – dùng cho thông tin mang ý nghĩa thông tin.text-dark: Màu đen đậm.text-light: Màu xám nhạt (dùng cho nền tối).text-muted: Màu xám nhạt – không nổi bật.text-white: Màu trắng (dùng cho nền tối)
Ví dụ:
<p class="text-primary">Văn bản màu xanh chính (primary)</p>
<p class="text-success">Văn bản màu xanh lá (success)</p>
<p class="text-danger">Văn bản màu đỏ (danger)</p>
<p class="text-warning">Văn bản màu vàng (warning)</p>
<p class="text-muted">Văn bản màu nhạt (muted)</p>Kết quả:
Màu nền (Background colors)
Tương tự như màu chữ, bạn có thể thay đổi màu nền của bất kỳ phần tử nào bằng các class có sẵn trong Bootstrap theo cú pháp:
bg-{theme}Trong đó: theme là các chủ đề màu của Bootstrap như primary, success, warning,…
Ví dụ:
<div class="p-3 bg-primary text-white">Nền xanh + chữ trắng</div>
<div class="p-3 bg-success text-white">Nền xanh lá</div>
<div class="p-3 bg-danger text-white">Nền đỏ</div>Kết quả:
2 cách tùy chỉnh CSS trong Bootstrap
Mặc dù Bootstrap đã cung cấp sẵn rất nhiều class để dùng ngay, nhưng trong thực tế, mỗi website hay ứng dụng đều cần tuỳ chỉnh giao diện cho phù hợp với thương hiệu hoặc yêu cầu riêng. Bootstrap hỗ trợ 2 cách chính để tuỳ chỉnh giao diện bao gồm:
Cách 1: Sử dụng CSS Variables
Từ phiên bản 5 trở lên, Bootstrap đã tích hợp CSS Variables (biến CSS) cho rất nhiều thuộc tính giao diện, giúp việc tuỳ chỉnh trở nên cực kỳ dễ dàng và linh hoạt.
CSS Variables là những giá trị được định nghĩa bằng cú pháp –tên-biến, sau đó có thể sử dụng lại ở bất kỳ chỗ nào trong CSS. Việc này giúp bạn có thể thay đổi màu sắc, kích thước, font, bo góc… mà không cần chỉnh sửa sâu.
Một số nhóm biến phổ biến:
| Nhóm | Ví dụ |
| Màu sắc | –bs-primary, –bs-success, … |
| font chữ, size | –bs-body-font-family, –bs-body-font-size,… |
| Khoảng cách | –bs-border-radius, –bs-gutter-x,… |
| Nền | –bs-body-bg,… |
Ví dụ, Bootstrap định nghĩa rất nhiều biến CSS ngay trong bộ framework như:
:root {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-danger: #dc3545;
--bs-border-radius: 0.375rem;
--bs-body-bg: #fff;
--bs-body-color: #212529;
}Bạn có thể ghi đè các biến này trong file CSS của riêng mình:
:root {
--bs-primary: #ff5722; /* đổi màu chủ đạo thành cam */
--bs-border-radius: 0.5rem; /* đổi bo góc */
}Sau đó toàn bộ các thành phần sử dụng màu chủ đạo (nút .btn-primary, link, alert…) đều sẽ tự động cập nhật theo màu mới.
Cách 2: Tùy chỉnh Bootstrap với Sass
Nếu bạn muốn tuỳ chỉnh sâu hơn giao diện Bootstrap như đổi toàn bộ màu chủ đạo, font chữ, kích thước, khoảng cách, hoặc bỏ bớt các thành phần không dùng để giảm dung lượng file CSS, thì cách tốt nhất là dùng Sass.
Bootstrap được xây dựng dựa trên Sass (một ngôn ngữ CSS mở rộng) giúp quản lý code CSS hiệu quả hơn (với biến, vòng lặp, mixin…). Bootstrap đã cung cấp sẵn mã nguồn .scss để bạn dễ dàng tuỳ chỉnh và biên dịch lại thành file CSS riêng cho project.
Cách tùy chỉnh bằng Sass:
Trong project, bạn sẽ import các file .scss từ Bootstrap, sau đó ghi đè biến Sass trước khi build CSS:
// Ghi đè biến trước
$primary: #ff5722;
$font-family-base: 'Roboto', sans-serif;
$border-radius: 0.75rem;
// Import Bootstrap
@import "bootstrap";Sau đó, dùng công cụ build Sass (như Webpack, Vite, Parcel, hoặc CLI), bạn sẽ tạo ra file CSS hoàn chỉnh (trong đó đã áp dụng các thay đổi theo ý bạn).
- Lưu ý: Chỉ khi sử dụng Bootstrap dưới dạng source Sass (cài qua npm/yarn hoặc tải source về), bạn mới có thể tùy chỉnh bằng Sass. Nếu dùng bản CSS build sẵn (CDN), chỉ có thể tùy chỉnh qua CSS Variables.
Các kỹ thuật tối ưu hóa và quản lý CSS trong Bootstrap
Khi phát triển giao diện với Bootstrap, nếu không quản lý tốt, file CSS có thể bị phình to hoặc gặp xung đột khi kết hợp với các CSS khác. Dưới đây là một số kỹ thuật giúp tối ưu hóa và quản lý CSS hiệu quả hơn:
Các kỹ thuật tối ưu CSS cho hiệu năng
Chỉ import các thành phần cần thiết (nếu dùng bản Sass)
Thay vì import toàn bộ Bootstrap, bạn có thể chỉ import những module cần dùng. Điều này giúp giảm dung lượng file CSS xuất ra.
Ví dụ:
// Chỉ import phần cần dùng
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/buttons";
@import "bootstrap/forms";
@import "bootstrap/utilities";Loại bỏ class không dùng
Trong quá trình phát triển, thường có nhiều đoạn CSS custom, hoặc sử dụng class trong element HTML nhưng về sau không còn dùng nữa hoặc bị ghi đè. Các class này nằm trong file sẽ là “dead code” (rác), làm file to ra mà không có tác dụng gì.
Cách loại bỏ:
- Dùng tool như PurgeCSS hoặc UnCSS để scan ra những class không xuất hiện trong HTML.
- Có thể xóa tay sau khi rà soát.
Dùng CSS Variables để tránh phải khai báo nhiều lần
Kể từ Bootstrap 5, rất nhiều giá trị thiết kế (màu sắc, padding, bo góc, font…) đã được định nghĩa sẵn dưới dạng CSS Variables (biến CSS), ví dụ:
:root {
--bs-primary: #0d6efd;
--bs-border-radius: 0.375rem;
--bs-body-bg: #fff;
--bs-body-color: #212529;
}Khi viết CSS tùy chỉnh, thay vì phải override nhiều lần như:
.btn-primary {
background-color: #ff5722;
}
.alert-primary {
background-color: #ff5722;
}Bạn có thể tùy chỉnh lại giá trị biến:
:root {
--bs-primary: #ff5722;
}Kiểm soát số lượng class lồng nhau
Trong quá trình dùng Bootstrap, nếu lạm dụng quá nhiều class trên cùng 1 phần tử hoặc lồng nhiều lớp div chỉ để căn chỉnh, sẽ làm cho HTML trở nên cồng kềnh, khó đọc và ảnh hưởng đến hiệu năng.
Ví dụ, sử dụng 3 lớp div chỉ để căn giữa và đặt padding, border:
<div class="d-flex justify-content-center align-items-center p-3 bg-light">
<div class="d-flex flex-column justify-content-between h-100 w-100">
<div class="mb-2 p-2 border rounded text-center bg-primary text-white">
Nội dung
</div>
</div>
</div>Cách cải thiện: Chỉ nên dùng các class thật sự cần thiết và giảm bớt số lượng wrapper (div lồng nhau), kết hợp các class cho gọn gàng:
<div class="d-flex justify-content-center align-items-center p-3 bg-primary text-white rounded">
Nội dung
</div>Quản lý xung đột CSS
Khi kết hợp Bootstrap với CSS custom hoặc với các thư viện giao diện khác, rất dễ xảy ra tình trạng xung đột CSS, tức là một số class hoặc thuộc tính bị ghi đè ngoài ý muốn, làm giao diện bị lỗi hoặc không đồng nhất. Dưới đây là 2 cách giúp quản lý và hạn chế xung đột CSS hiệu quả hơn:
Ưu tiên dùng CSS Variables hoặc override có kiểm soát
Trong quá trình phát triển dự án, sẽ có hai nhu cầu tùy chỉnh CSS phổ biến:
- Tùy chỉnh toàn bộ giao diện đồng bộ theo thương hiệu (brand):
Trường hợp này nên ưu tiên sử dụng CSS Variables. Khi đó, toàn bộ hệ thống sẽ tự động cập nhật theo giá trị mới mà không cần phải ghi đè riêng lẻ từng thành phần.
Giả sử website cần đổi màu primary thành màu cam để đồng bộ với brand mới. Thay vì phải override từng class như .btn-primary, .alert-primary, .badge-primary,… bạn chỉ cần cập nhật biến CSS:
:root {
--bs-primary: #ff5722;
}Kết quả: toàn bộ giao diện sẽ tự động đồng bộ theo màu mới, từ nút bấm, alert cho đến badge… mà không cần chỉnh tay từng component.
- Tùy chỉnh riêng cho một component hoặc cho một trang cụ thể:
Trường hợp này nên sử dụng class phụ hoặc CSS scoped theo trang. Cách làm này giúp tránh ảnh hưởng ngoài ý muốn đến các phần khác của hệ thống và dễ bảo trì hơn.
Ví dụ: chỉ riêng trang landing-page cần nút .btn-primary có bo tròn lớn hơn, nhưng không muốn ảnh hưởng đến các trang khác. Bạn có thể thêm class phụ như sau:
<button class="btn btn-primary btn-landing">Đăng ký ngay</button>
<style>
.btn-landing {
border-radius: 20px;
}
</style>Thận trọng khi kết hợp với thư viện UI khác
Khi xây dựng giao diện, bạn có thể cần kết hợp thêm các thư viện UI khác ngoài Bootstrap (ví dụ: Material UI, Tailwind CSS, PrimeVue, Ant Design…). Tuy nhiên, việc kết hợp này rất dễ xảy ra xung đột CSS, đặc biệt là khi các thư viện đó sử dụng các class trùng tên với Bootstrap (ví dụ: .card, .modal, .active, .btn…).
Cách giảm thiểu xung đột:
- Ưu tiên chọn 1 thư viện UI chính cho dự án. Hạn chế sử dụng quá nhiều hệ thống CSS khác nhau.
- Đọc kỹ tài liệu của các UI library khác để tránh dùng class trùng tên với Bootstrap.
Câu hỏi thường gặp về Bootstrap CSS
Tôi nên ghi đè CSS của Bootstrap ở đâu trong dự án?
Khi cần tuỳ chỉnh hoặc ghi đè CSS của Bootstrap, bạn nên thực hiện trong file CSS custom riêng của dự án, đặt sau Bootstrap trong thứ tự import.
- Nếu sử dụng bản Sass, bạn có thể tạo một file như custom.scss hoặc override.scss, và ghi đè các biến Sass hoặc CSS Variables ngay trước khi import Bootstrap. Cách làm này giúp bạn dễ kiểm soát các thay đổi và thuận tiện cho việc bảo trì sau này.
- Nếu dùng bản CSS build sẵn (qua CDN hoặc file .css), bạn nên tạo file custom.css và import sau Bootstrap, đảm bảo nguyên tắc cascade của CSS hoạt động chính xác.
CSS của Bootstrap có làm chậm trang web không?
Việc sử dụng Bootstrap bản đầy đủ có thể khiến file CSS khá lớn, nhất là khi bạn chỉ sử dụng một phần nhỏ các thành phần của framework. Nếu không tối ưu, điều này có thể ảnh hưởng đến tốc độ tải trang, đặc biệt trên thiết bị di động hoặc mạng chậm.
Để cải thiện, bạn nên:
- Chỉ import các thành phần cần thiết khi dùng bản Sass
- Hoặc sử dụng công cụ như PurgeCSS để loại bỏ những class không dùng trước khi đưa lên production
Cách này sẽ giúp bạn tối ưu hóa dung lượng file CSS và cải thiện hiệu năng cho trang web.
Nên dùng Sass hay CSS thuần khi làm việc với Bootstrap?
Tuỳ theo quy mô và nhu cầu của dự án:
- Nếu bạn làm một dự án nhỏ, không cần tuỳ chỉnh nhiều về giao diện, thì việc dùng CSS thuần (qua CDN hoặc file .css) sẽ giúp tiết kiệm thời gian và dễ triển khai.
- Ngược lại, nếu dự án có yêu cầu về tuỳ chỉnh giao diện sâu hơn, cần đồng bộ theo bộ nhận diện thương hiệu, hoặc muốn tối ưu dung lượng CSS, thì bạn nên chọn bản Sass của Bootstrap. Sử dụng Sass giúp bạn có thể thay đổi biến toàn cục, loại bớt những phần không dùng đến, đồng thời dễ dàng mở rộng và kiểm soát cấu trúc CSS trong toàn bộ dự án.
Có cần phải nắm vững HTML và CSS trước khi học Bootstrap không?
Bạn không cần phải giỏi toàn bộ HTM/CSS mới bắt đầu học Bootstrap. Chỉ cần bạn đã có kiến thức cơ bản như hiểu cấu trúc thẻ HTML, biết cách viết class và sử dụng các thuộc tính cơ bản như margin, padding, màu sắc, font, layout là hoàn toàn có thể học và áp dụng Bootstrap hiệu quả rồi.
Thậm chí, việc học Bootstrap sẽ giúp bạn hiểu rõ hơn cách CSS hoạt động, nhờ vào hệ thống các class có sẵn được thiết kế rất hợp lý. Qua đó, bạn sẽ rèn thêm tư duy về thiết kế giao diện và quản lý CSS tốt hơn.
Tổng kết
CSS đóng vai trò cốt lõi giúp Bootstrap trở thành một công cụ mạnh mẽ trong việc xây dựng giao diện web hiện đại. Với hệ thống lớp CSS tiện ích, các thành phần UI được thiết kế sẵn và khả năng tuỳ chỉnh linh hoạt thông qua CSS Variables hoặc Sass, Bootstrap giúp lập trình viên tiết kiệm đáng kể thời gian phát triển, đồng thời đảm bảo giao diện luôn đồng nhất, responsive và dễ bảo trì.
Qua bài viết này, ITviec hy vọng bạn đã có cái nhìn toàn diện hơn về CSS trong Bootstrap, từ cách phân loại nhóm lớp, tuỳ chỉnh giao diện cho đến các kỹ thuật tối ưu hoá và quản lý CSS hiệu quả.
