💡Lỗi hay gặp khi dùng Bootstrap

Khi dùng Bootstrap, đặc biệt là các phiên bản phổ biến như 4 hoặc 5, có một số lỗi thường gặp mà nhiều dev hay vấp phải. 

Dưới đây là tổng hợp chi tiết kèm nguyên nhân và cách khắc phục:

1️⃣ CSS hoặc JS không hoạt động

Triệu chứng: Các class của Bootstrap không áp dụng được, các component như modal, dropdown không chạy.
Nguyên nhân:

  • Chưa nhúng đúng file CSS hoặc JS.

  • Thứ tự nhúng sai: JS của Bootstrap cần jQuery (với BS4) và Popper.js trước.

  • Phiên bản không tương thích giữa CSS và JS.

Cách khắc phục:

  • Kiểm tra link CDN hoặc file local.

  • Với Bootstrap 4:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

  • Với Bootstrap 5: không cần jQuery, chỉ cần Popper nếu dùng tooltip/popover.

2️⃣ Layout bị “vỡ” hoặc không responsive

Triệu chứng: Grid không đúng, cột không đều, menu mobile không hiện.
Nguyên nhân:

  • Không dùng .container hoặc .row đúng cách.

  • Quên col-* hoặc mix lẫn grid cũ/ mới.

  • Dùng container cứng thay vì container-fluid khi cần.

Cách khắc phục:

  • Luôn bọc .row trong .container hoặc .container-fluid.

  • Cột phải đặt class col-* cụ thể.

<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>

3️⃣ Modal, dropdown, collapse không hoạt động

Triệu chứng: Click button nhưng modal không mở hoặc collapse không bung ra.
Nguyên nhân:

  • Quên nhúng JS hoặc nhúng sai thứ tự.

  • Bootstrap 5: sử dụng data-toggle thay vì data-bs-toggle.

  • JS bị lỗi từ script khác gây cản trở.

Cách khắc phục:

  • Dùng đúng attribute:

    • BS4: data-toggle="modal"

    • BS5: data-bs-toggle="modal"

4️⃣ Z-index hoặc hiển thị bị lỗi

Triệu chứng: Dropdown, modal bị che bởi các phần tử khác.
Nguyên nhân: CSS custom override hoặc container có overflow: hidden hoặc position: relative.

Cách khắc phục:

  • Kiểm tra CSS override.

  • Với modal hoặc dropdown, đặt position và z-index đúng.

  • Sử dụng .modal hoặc .dropdown-menu của Bootstrap chuẩn.

5️⃣ Không update icon / image đúng kích thước

Triệu chứng: Image vượt quá container, icon không đúng.
Nguyên nhân:

  • Quên class responsive .img-fluid.

  • Icon cũ, fontawesome chưa nhúng.

Cách khắc phục:

<img src="image.jpg" class="img-fluid" alt="Responsive image">

6️⃣ Conflicting CSS với framework khác

Triệu chứng: Styling Bootstrap bị lỗi khi dùng với Tailwind, Material, hoặc CSS riêng.
Nguyên nhân: Class trùng tên hoặc reset CSS khác.

Cách khắc phục:

  • Dùng namespace cho CSS custom.

  • Kiểm tra thứ tự import CSS (Bootstrap trước custom).

7️⃣ Version mismatch

Triệu chứng: Code Bootstrap cũ không chạy trên BS5, hoặc ngược lại.
Nguyên nhân: Component hoặc class đã bị đổi tên (ví dụ: .ml-auto → .ms-auto).

Cách khắc phục: Luôn kiểm tra migration guide khi nâng cấp Bootstrap.

💡 Tip chung:

  • Dùng DevTools để kiểm tra class và console JS lỗi.

  • Đọc kỹ tài liệu Bootstrap theo version bạn đang dùng.

  • Tránh copy-paste code cũ nếu nâng version Bootstrap.

Nếu muốn, tôi có thể làm cho bạn bảng checklist 15 lỗi Bootstrap hay gặp kèm code mẫu khắc phục, dễ tra cứu khi lập trình.

✨ made by AI

Google Account Video Purchases 478/2 Hai Bà Trưng, Phường Tân Định, Quận 1, Thành phố Hồ Chí Minh, Việt Nam

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

🌈 Tự Động Highlight Code Trong Blogger

Phần style pre code { white-space: pre-wrap; word-break: break-word; } .code-wrapper { position: relative; } .copy-button { position: absolute; top: 8px; right: 8px; background: #444; color: #fff; border: none; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; cursor: pointer; opacity: 0.7; z-index: 9; } .copy-button:hover { opacity: 1; } Chèn trước thẻ đóng head Code nhiều dòng hay 01 dòng xài giống nhau: const msg = "Xin chào Tiến sĩ M!"; console.log(msg); Code 01 dòng: document.querySelector() Thẻ nào quá phức tạp thì xài như sau: < pre class = "language-js" data-keep-markup >   < code >     Nội dung...   </ code > </ pre > Chèn trước thẻ đóng body < b : if cond = ...
Đọc thêm

🧭CRUD CHUẨN LARAVEL

Errors log: Cài  Laravel  trên host nhưng k phù hợp  php  version Dùng lệnh  artisan  trong  Terminal  nhưng chưa đứng trong thư mục chứa source  Laravel Lỗi  ABCController not found  khi chạy artisan -> do thiếu khai báo namespace ở đầu file web.php Dưới đây là 👉 LỘ TRÌNH 3 NGÀY – CRUD CHUẨN LARAVEL Thiết kế cho người đã có nền tảng lập trình , học để làm thật , không lan man. 🧭 MỤC TIÊU SAU 3 NGÀY ✔ Hiểu chuẩn luồng Laravel ✔ Tự tay xây CRUD hoàn chỉnh ✔ Code đọc được – mở rộng được – không bừa ✔ Sẵn sàng làm app nội bộ / dashboard / CMS 📅 NGÀY 1 – NỀN TẢNG & CRUD CƠ BẢN (80%) ⏱️ ~2–3 giờ 🎯 Mục tiêu ngày 1 Hiểu luồng MVC Làm CRUD chạy được Không cần đẹp – chỉ cần đúng 🧩 1️⃣ Tạo project CRUD mẫu Ví dụ: Post (id, title, content, status) php artisan make:model Post -mcr ➡️ Tạo: Model: app/Models/Post.php Migration Controller resource 🧱 2️⃣ Migration – Tạo bảng Gõ đoạn code sau để tạo bảng trong file databa...
Đọc thêm

🚀01 giờ học cách sử dụng Developer Console

Nếu chỉ có 1 giờ để học cách sử dụng Developer Console (trong Chrome, Edge, Brave...), thì đây là lộ trình cấp tốc và thực chiến, đủ để: ✅ Kiểm tra lỗi ✅ Thử nghiệm code JavaScript ✅ Lấy dữ liệu từ DOM ✅ Giả lập thay đổi giao diện 🚀 LỘ TRÌNH 1 GIỜ SỬ DỤNG CONSOLE 🧱 BƯỚC 1: MỞ CONSOLE (1 phút) Cách mở nhanh : Chuột phải → Inspect → Chọn tab Console Hoặc dùng phím tắt: Windows/Linux : Ctrl + Shift + I rồi Ctrl + ~ macOS : Cmd + Option + I 🔍 BƯỚC 2: ĐỌC & GHI LOG (5 phút) Hành động Câu lệnh Ghi log ra console console.log("Hello, Tiến sĩ M!"); Cảnh báo console.warn("Cẩn thận!") Báo lỗi console.error("Đây là lỗi") In ra object/table console.table(document.links) 👉 Mẹo : Dùng console.clear() để xóa màn hình console. 🌐 BƯỚC 3: TRUY CẬP DOM & LẤY DỮ LIỆU (10 phút) Mục tiêu Câu lệnh Lấy 1 phần tử document.querySelector('h1') Lấy nhiều phần tử document.querySelector...
Đọc thêm