Top 30+ câu hỏi phỏng vấn Bootstrap từ cơ bản đến nâng cao

Nội dung bài viết

Bootstrap là một CSS framework mạnh mẽ, trợ thủ đắc lực trong các dự án phát triển web responsive. Việc hiểu rõ và sử dụng thành thạo Bootstrap không chỉ giúp bạn biết dùng class có sẵn để tạo giao diện, mà còn phản ánh cách bạn hiểu tư duy bố cục, cách tổ chức CSS, và quản lý UI nhất quán trong dự án. Do đó đây là một trong những kỹ năng được đánh giá cao trong các buổi phỏng vấn Front-end.

Đọc bài viết này để được hướng dẫn trả lời:

Các câu hỏi phỏng vấn Bootstrap ở mức cơ bản (Beginner)
Các câu hỏi phỏng vấn Bootstrap ở mức trung cấp (Intermediate)
Các câu hỏi phỏng vấn Bootstrap nâng cao (Advanced)

Phỏng vấn Bootstrap cần chuẩn bị gì?

Các nhóm câu hỏi phỏng vấn Bootstrap thường gặp

Khi phỏng vấn về Bootstrap, nhà tuyển dụng không chỉ muốn biết bạn có nhớ class cần sử dụng hay không, mà họ muốn đánh giá tư duy front-end tổng thể, bao gồm khả năng xây dựng giao diện, hiểu nguyên lý responsive, và cách tùy chỉnh hệ thống thiết kế cho phù hợp với dự án thực tế.

Nhìn chung, các câu hỏi thường được chia thành ba cấp độ:

Cấp độ cơ bản (Beginner): Kiểm tra mức độ hiểu biết về Bootstrap, cách sử dụng framework, hệ thống lưới (grid system), breakpoints, utility classes, và các component phổ biến
Cấp độ trung cấp (Intermediate): Tập trung vào khả năng tùy chỉnh, kết hợp component, và xử lý layout phức tạp
Cấp độ nâng cao (Advanced): Đánh giá kinh nghiệm chuyên sâu trong việc tối ưu hiệu năng, xử lý xung đột CSS, tổ chức theme, hoặc tích hợp Bootstrap với các framework khác (React, Vue…)

Hiểu biết cơ bản về Bootstrap

Bootstrap là một framework front-end mã nguồn mở được phát triển bởi Twitter, ra đời nhằm giúp các lập trình viên xây dựng giao diện web nhanh chóng, thống nhất và dễ mở rộng.

Bootstrap cung cấp sẵn hệ thống lưới (grid system), thành phần giao diện (components), và các lớp tiện ích (utilities) được thiết kế để hoạt động tốt trên mọi kích thước màn hình.

Nhờ cấu trúc chặt chẽ và tài liệu rõ ràng, Bootstrap giúp rút ngắn đáng kể thời gian phát triển, chỉ với vài dòng class, bạn đã có thể dựng giao diện chuẩn responsive mà không cần viết lại nhiều CSS thủ công.

Các lợi ích nổi bật của Bootstrap

Tăng tốc độ phát triển giao diện: Với hàng trăm component sẵn có (form, button, navbar, modal…), bạn có thể dựng nguyên layout hoàn chỉnh chỉ trong vài giờ
Đảm bảo tính nhất quán trong thiết kế: Tất cả các phần tử đều tuân theo cùng một hệ thống spacing, màu sắc, typography, giúp giao diện đồng bộ và dễ bảo trì
Dễ tùy chỉnh và mở rộng: Bootstrap cho phép override SCSS variables để tạo theme riêng theo màu thương hiệu của dự án.
Tăng điểm cộng trong phỏng vấn Front-end: Nhiều nhà tuyển dụng muốn thấy ứng viên hiểu không chỉ cách dùng class, mà còn cách tổ chức layout hợp lý, xử lý responsive, custom component và tối ưu performance
Hỗ trợ làm việc nhóm hiệu quả: Khi các thành viên cùng dùng Bootstrap, quy ước class và style thống nhất giúp code dễ đọc, dễ review và dễ mở rộng sau này

Câu hỏi phỏng vấn Bootstrap – Cấp độ Cơ bản (Beginner)

Bootstrap là gì?

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ó bao gồm các thành phần CSS và JavaScript được thiết kế sẵn như hệ thống lưới (Grid System), form, button, navbar, modal… giúp lập trình viên tạo giao diện web một cách nhanh chóng, đồng nhất mà không cần viết quá nhiều CSS thủ công.

Phiên bản mới nhất của Bootstrap (v5) đã loại bỏ hoàn toàn jQuery, sử dụng vanilla JavaScript và hỗ trợ CSS Variables, mang đến hiệu năng tốt hơn, khả năng tùy biến cao và dễ dàng tích hợp với các framework hiện đại như React, Vue hoặc Next.js.

Những tính năng nổi bật của Bootstrap?

Một số tính năng nổi bật giúp Bootstrap trở thành framework được sử dụng phổ biến nhất:

Responsive Design: Tự động điều chỉnh bố cục theo kích thước màn hình thông qua hệ thống breakpoints
Grid System: Cấu trúc 12 cột dựa trên Flexbox, dễ dàng chia layout và căn chỉnh phần tử
Component phong phú: Cung cấp nhiều thành phần UI có sẵn như card, navbar, modal, carousel, dropdown…
Utility Classes: Nhiều lớp tiện ích sẵn có giúp định dạng nhanh (màu sắc, khoảng cách, căn chỉnh, hiển thị)
Tùy chỉnh linh hoạt: Cho phép thay đổi biến SCSS, màu sắc, font chữ, spacing để tạo theme riêng
Hỗ trợ JavaScript Components: Dễ dàng thêm các hiệu ứng động như collapse, tooltip, toast, mà không cần viết JS phức tạp.

Đọc chi tiết: Bootstrap là gì? 7 tính năng cần biết trong Bootstrap

Làm thế nào để tích hợp Bootstrap vào dự án?

Có hai cách phổ biến để tích hợp Bootstrap vào dự án web:

Sử dụng CDN: Thêm liên kết CDN của CSS và JS Bootstrap vào thẻ <head> và cuối thẻ <body> của file HTML. Đây là cách nhanh chóng, phù hợp cho prototype hoặc trang web nhỏ

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Cài đặt bằng npm hoặc Yarn: Nếu dự án đang phát triển ứng dụng bằng Node.js, có thể cài đặt Bootstrap thông qua npm, cách này giúp dễ dàng tùy chỉnh theme và build lại Bootstrap theo nhu cầu. Thực hiện với lệnh sau:

npm install bootstrap

Sau khi cài đặt, sử dụng Bootstrap bằng cách import:

require('bootstrap');

Nếu dự án sử dụng Yarn thay vì Npm, có thể cài đặt Bootstrap bằng lệnh:

yarn add bootstrap

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

Hệ thống lưới (grid system) của Bootstrap hoạt động như thế nào?

Hệ thống lưới của Bootstrap dựa trên Flexbox và chia bố cục trang thành 12 cột. Chúng ta có thể sử dụng từng cột riêng lẻ hoặc gộp nhiều cột lại để tạo độ rộng lớn hơn.

Ví dụ: có thể dùng 12 cột mỗi cột chiếm 1 phần, hoặc 4 cột mỗi cột chiếm 3 phần, miễn sao tổng bằng 12.

 <div class="row">
   <div class="col-4">Cột 1</div>
   <div class="col-8">Cột 2</div>
 </div>

Bootstrap Grid cũng hỗ trợ breakpoints (col-sm-*, col-md-*, col-lg-*) để điều chỉnh bố cục theo kích thước màn hình, giúp giao diện luôn responsive và nhất quán trên mọi thiết bị.

Sự khác nhau giữa .container và .container-fluid là gì?

Trong Bootstrap, cả .container và .container-fluid đều được dùng để định nghĩa vùng chứa (container) cho nội dung, nhưng cách hoạt động của chúng khác nhau về độ rộng hiển thị:

.container: có độ rộng cố định theo từng breakpoint (sm, md, lg, xl, xxl). Khi màn hình lớn hơn, container sẽ tự động giãn ra nhưng vẫn giới hạn trong khung đọc dễ nhìn
.container-fluid: luôn chiếm toàn bộ chiều ngang (100% width) của màn hình ở mọi kích thước, phù hợp cho layout full-width hoặc các phần nền kéo dài toàn trang.

Tóm lại, chúng ta nên dùng .container cho nội dung chính cần căn giữa, còn .container-fluid khi muốn bố cục tràn toàn màn hình như banner, header hoặc background section.

Các breakpoint mặc định trong Bootstrap là gì?

Trong Bootstrap, breakpoint là các mốc kích thước màn hình được dùng để thay đổi bố cục hoặc kiểu hiển thị (responsive design).

Bootstrap tuân theo triết lý mobile-first, nghĩa là giao diện được thiết kế tối ưu cho màn hình nhỏ trước, sau đó mở rộng dần cho thiết bị lớn hơn thông qua các breakpoint dựa trên min-width.

Các breakpoint mặc định:

Tên gọi	Ký hiệu	Kích thước tối thiểu
Extra small (rất nhỏ)	–	<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

Làm sao để làm hình ảnh responsive trong Bootstrap (classes nào)?

Để hình ảnh tự động co giãn theo kích thước phần tử cha và giữ đúng tỉ lệ, Bootstrap cung cấp class .img-fluid. Class này gán thuộc tính max-width: 100% và height: auto, giúp ảnh không vượt quá khung chứa.

Ví dụ:

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

Đọc chi tiết: Responsive trong Bootstrap: Hướng dẫn từ cơ bản đến nâng cao

Component là gì? Kể tên một vài component phổ biến trong Bootstrap

Component là các thành phần giao diện (UI components) được Bootstrap xây dựng sẵn, giúp tạo nhanh các phần tử thường gặp trong website mà không cần viết CSS hoặc JS từ đầu.

Một số component phổ biến trong Bootstrap:

Button: tạo nút nhấn với các kiểu dáng và màu sắc khác nhau
Navbar: thanh điều hướng chính của trang
Card: khối nội dung có ảnh, tiêu đề và mô tả
Modal: hộp thoại bật lên
Dropdown: menu thả xuống
Carousel: trình chiếu ảnh hoặc nội dung
Alert: thông báo trạng thái như thành công hoặc lỗi (.alert-success, .alert-danger)

Các component này giúp tăng tốc độ phát triển và đảm bảo giao diện đồng nhất, đặc biệt hữu ích trong các dự án có nhiều trang hoặc module.

Utility class trong Bootstrap là gì? Ví dụ các utility thường dùng

Utility class là các lớp CSS ngắn gọn, được thiết kế để thực hiện một chức năng cụ thể, giúp định dạng nhanh phần tử mà không cần viết thêm CSS tùy chỉnh.

Một số nhóm utility phổ biến:

Chức năng	Class ví dụ
Căn chỉnh	`text-center`, `mx-auto`, `d-flex justify-content-center`
Khoảng cách	`mt-3`, `mb-4`, `px-2`, `py-3`
Màu sắc	`text-muted`, `text-white`, `bg-primary`, `bg-light`
Hiển thị	`d-none`, `d-block`, `d-md-flex`
Bo góc / Viền	`rounded`, `border`, `border-0`

Những điểm mới chính của Bootstrap 5 so với Bootstrap 4?

Bootstrap 5 mang đến nhiều cải tiến lớn so với Bootstrap 4, tập trung vào hiệu năng, tính linh hoạt và khả năng mở rộng. Dưới đây là các điểm thay đổi đáng chú ý:

Tính năng	Bootstrap 4	Bootstrap 5
jQuery Dependency	Cần jQuery để chạy các component JS	Đã loại bỏ jQuery, sử dụng vanilla JavaScript hoàn toàn
Grid System	Dựa trên các class .row và .col-*	Bổ sung .g-* để điều chỉnh gutter, cải thiện hệ thống grid linh hoạt hơn
Flexbox	Dựa trên Flexbox layout	Cải thiện hỗ trợ Flexbox và thêm nhiều utility class mới
Form Controls	Custom form control yêu cầu jQuery	Thiết kế lại form controls, kiểu dáng đồng nhất, không phụ thuộc jQuery
Card Columns	Sử dụng .card-columns để bố trí thẻ	Đã loại bỏ .card-columns, thay bằng bố cục dựa trên CSS Grid
Colors	Bảng màu giới hạn	Mở rộng bảng màu đa dạng hơn, hỗ trợ nhiều sắc độ và biến thể màu sắc

Đọc chi tiết: Bootstrap 5 là gì? Những thay đổi nổi bật ở Bootstrap 5

Câu hỏi phỏng vấn Bootstrap – Cấp độ Trung cấp (Intermediate)

Trong Bootstrap, modal được tạo bằng cách kết hợp HTML cấu trúc sẵn và thuộc tính kích hoạt (data attributes) hoặc JavaScript API.

Modal gồm ba phần chính:

Nút kích hoạt (button hoặc a): sử dụng data-bs-toggle=“modal” và data-bs-target=“#id” để mở modal tương ứng
Thẻ .modal: phần tử bao toàn bộ modal, có thuộc tính id trùng với giá trị trong data-bs-target
Cấu trúc bên trong: gồm .modal-dialog, .modal-content, và các phần con như .modal-header, .modal-body, .modal-footer

Khi người dùng click nút kích hoạt, Bootstrap sẽ tự động khởi tạo và hiển thị modal mà không cần viết thêm JavaScript. Ví dụ:

<!-- Nút mở modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 Open Modal
</button>


<!-- Cấu trúc modal -->
<div id="exampleModal" class="modal fade" tabindex="-1" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">Thông báo</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     </div>
     <div class="modal-body">
       <p>Nội dung của modal được hiển thị tại đây.</p>
     </div>
     <div class="modal-footer">
       <button class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
       <button class="btn btn-primary">Xác nhận</button>
     </div>
   </div>
 </div>
</div>

Đọc chi tiết: Modal Bootstrap là gì: Hướng dẫn sử dụng từ cơ bản đến nâng cao

Trong Bootstrap, Dropdown là thành phần cho phép hiển thị danh sách tùy chọn khi người dùng nhấn vào nút hoặc liên kết.

Dropdown hoạt động dựa trên JavaScript của Bootstrap và Popper.js, giúp định vị menu tự động sao cho không bị che khuất hoặc tràn khỏi màn hình.

Có 2 cách để kích hoạt dropdown:

Kích hoạt bằng data-attribute (không cần viết JavaScript): Khi người dùng nhấn vào phần tử có data-bs-toggle=“dropdown”, Bootstrap sẽ tự động hiển thị menu tương ứng
Kích hoạt bằng JavaScript API (khi cần điều khiển thủ công): Bạn có thể tạo đối tượng new bootstrap.Dropdown(element) và gọi các phương thức như .show(), .hide(), hoặc .toggle()

Đọc chi tiết: Dropdown Bootstrap là gì: Hướng dẫn cách dùng chi tiết cho người mới

Làm thế nào để làm table responsive trong Bootstrap?

Trong Bootstrap, table responsive được xử lý bằng cách bọc bảng trong một khung cuộn ngang. Khi màn hình nhỏ, khung này tự thêm horizontal scroll để bảng không vỡ layout. Có hai cách dùng chính:

.table-responsive: luôn cho phép cuộn ngang trên màn hình hẹp
Theo breakpoint: chỉ bật cuộn dưới một mốc nhất định, ví dụ .table-responsive-md (cuộn ở < md), tương tự có -sm, -lg, -xl, -xxl

Carousel trong Bootstrap được triển khai ra sao?

Carousel trong Bootstrap được dùng để tạo slideshow tự động cho hình ảnh hoặc nội dung. Để sử dụng, lập trình viên chỉ cần:

Bọc các phần tử slide trong thẻ có class .carousel và .carousel-inner
Mỗi slide được khai báo bằng .carousel-item, trong đó có thể chứa ảnh hoặc text
Thêm các thuộc tính data-bs-ride=“carousel” để bật tự động chạy và data-bs-interval để điều chỉnh thời gian chuyển slide

Ngoài ra, Bootstrap cũng hỗ trợ nút điều hướng (next/prev) và chấm chỉ báo (indicators) để người dùng điều khiển thủ công. Carousel hoạt động hoàn toàn bằng Bootstrap JavaScript, không cần jQuery, và tương thích tốt với cả desktop lẫn thiết bị di động.

Làm thế nào để căn giữa (center) một phần tử khối (block) trong Bootstrap?

Trong Bootstrap, có nhiều cách để căn giữa một phần tử khối (block element) tùy theo ngữ cảnh:

Căn giữa theo chiều ngang

Dùng class tiện ích mx-auto (margin left/right auto).

Áp dụng khi phần tử có display: block và có độ rộng xác định (width hoặc w-*).

Ví dụ: một div hoặc button muốn nằm giữa container thì chỉ cần thêm mx-auto.

Căn giữa theo chiều dọc và ngang (flexbox)

Đặt phần tử trong một container có d-flex, rồi dùng justify-content-center (ngang) và align-items-center (dọc).

Cách này hiệu quả nhất khi muốn phần tử nằm chính giữa khối cha, cả theo trục X và Y.

Đọc chi tiết: Flexbox Bootstrap là gì: Hướng dẫn sử dụng chi tiết từ A-Z

Căn giữa text hoặc inline elements

Dùng text-center để căn giữa nội dung văn bản hoặc các phần tử inline bên trong

Làm thế nào để tùy chỉnh style Bootstrap bằng CSS ghi đè hoặc SASS?

Trong thực tế, có hai cách phổ biến để tùy chỉnh giao diện Bootstrap, tùy theo mức độ can thiệp và quy mô dự án:

Ghi đè bằng CSS thông thường

Đây là cách nhanh và dễ thực hiện. Bạn chỉ cần import file CSS tùy chỉnh sau file Bootstrap để các quy tắc của mình được ưu tiên. Ví dụ, nếu muốn thay màu của nút .btn-primary, bạn có thể định nghĩa lại selector .btn-primary trong stylesheet của mình.

Tuy nhiên, bạn cần tránh dùng !important và chỉ ghi đè những phần thực sự cần, để dễ bảo trì về sau.

Dùng SASS để tùy biến toàn diện

Bootstrap được xây dựng trên SASS nên bạn có thể thay đổi các biến gốc (variables) như $primary, $border-radius, $font-family-base trước khi import Bootstrap. Khi đó, toàn bộ component sẽ tự động áp dụng theme mới đồng bộ, chuyên nghiệp hơn.

Trong Bootstrap 5, bạn cũng tận dụng CSS variables (--bs-*) để đổi theme hoặc tạo dark mode một cách linh hoạt mà không cần build lại toàn bộ.

Làm thế nào để loại bỏ các component không dùng nhằm giảm kích thước file CSS/JS?

Để giảm dung lượng khi sử dụng Bootstrap trong dự án, có thể áp dụng các phương pháp sau:

Giảm kích thước CSS

Selective import: Không import toàn bộ Bootstrap. Thay vì @import “bootstrap”, chỉ import những module cần thiết như:

@import "functions";
@import "variables";
@import "mixins";
@import "grid";
@import "buttons";
@import "forms";
@import "utilities";

Vô hiệu hóa các tính năng không dùng: Sử dụng các biến cấu hình trong Bootstrap như $enable-shadows, $enable-gradients, $enable-rounded,… để loại bỏ phần CSS tương ứng
Giới hạn utilities: Tùy chỉnh $utilities trong file cấu hình SASS để chỉ build các utility class cần thiết (ví dụ spacing, display, colors,…)
Sử dụng PurgeCSS hoặc LightningCSS: Sau khi build, chạy công cụ này để xóa các class Bootstrap không được sử dụng trong HTML, Vue, React,…

Giảm kích thước JavaScript

Import theo component: Không dùng bootstrap.bundle.min.js nếu không cần tất cả component. Thay vào đó, chỉ import những phần cần thiết. Các bundler như Webpack, Vite hoặc Rollup sẽ tự động tree-shake các phần không dùng. Ví dụ:

import Collapse from 'bootstrap/js/dist/collapse';
import Modal from 'bootstrap/js/dist/modal';

Lazy load: Tải component Bootstrap bằng dynamic import khi người dùng thực sự cần (ví dụ khi mở modal lần đầu)
Bỏ Popper nếu không cần: Tooltip và Dropdown cần Popper, nhưng các component khác thì không

Sử dụng form trong Bootstrap thế nào?

Form là một trong những thành phần quan trọng nhất của website, thường được dùng cho các chức năng như đăng ký, đăng nhập hoặc gửi phản hồi. Bootstrap hỗ trợ sẵn nhiều mẫu form giúp tạo giao diện nhanh và đồng nhất mà không cần viết CSS thủ công.

Các bước để tạo một form cơ bản:

Bước 1:

Thêm liên kết CDN của Bootstrap vào phần <head> của tài liệu HTML để có thể sử dụng các class Bootstrap (bỏ qua nếu dự án của bạn đã có Bootstrap)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Bước 2:

Trong phần <body>, tạo thẻ <form> và thêm các phần tử nhập liệu (input, select, textarea, button) kèm theo class của Bootstrap như .form-label, .form-control, .form-check. Mỗi trường nhập liệu nên được đặt trong một <div class=“mb-3”> để tạo khoảng cách giữa các thành phần.

Ví dụ:

 <form>
   <div class="mb-3">
     <label for="email" class="form-label">Email address</label>
     <input type="email" class="form-control" id="email" placeholder="Enter your email">
   </div>
   <div class="mb-3">
     <label for="password" class="form-label">Password</label>
     <input type="password" class="form-control" id="password" placeholder="Enter password">
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
 </form>

Đọc chi tiết: Form Bootstrap là gì: Thực hành tạo form từ cơ bản đến nâng cao

Cách dùng spacing utilities (margin / padding) kết hợp với các breakpoint thế nào?

Bootstrap cung cấp hệ thống spacing utilities giúp điều chỉnh margin (khoảng cách ngoài) và padding (khoảng cách trong) một cách linh hoạt mà không cần viết CSS. Các class này tuân theo cú pháp:

{property}{sides}-{breakpoint?}-{size}

Trong đó:

{property}: m (margin) hoặc p (padding)
{sides}: t (top), b (bottom), s (start), e (end), x (left & right), y (top & bottom), hoặc không ghi (áp dụng cho tất cả)
{breakpoint} (tùy chọn): sm, md, lg, xl, xxl
{size}: giá trị từ 0 đến 5, tương ứng với bội số của $spacer trong Bootstrap

Ví dụ:

mt-3 = margin-top: 1rem
px-4 = padding trái/phải: 1.5rem
mb-md-5 = margin-bottom = 3rem từ breakpoint md trở lên
p-lg-0 = bỏ toàn bộ padding từ màn hình lớn (lg) trở lên

Scrollspy plugin là gì? Giải thích cách dùng trong Bootstrap

Scrollspy là plugin của Bootstrap giúp theo dõi vị trí cuộn (scroll position) của người dùng và tự động cập nhật trạng thái active cho các liên kết trong thanh điều hướng (navbar hoặc list group).

Nói cách khác, khi người dùng cuộn đến một phần nội dung cụ thể, Scrollspy sẽ tự động làm nổi bật (highlight) liên kết tương ứng, giúp người dùng biết mình đang ở đâu trong trang.

Scrollspy có thể được triển khai theo 2 dạng:

Vertical Scrollspy: theo dõi cuộn dọc, thường dùng với thanh điều hướng ở cạnh trái hoặc trên cùng
Horizontal Scrollspy: theo dõi cuộn ngang, ít phổ biến hơn, dùng cho layout đặc biệt có cuộn ngang

Cách sử dụng:

Gắn thuộc tính data-bs-spy=“scroll” vào phần tử cần theo dõi (thường là <body> hoặc <div> chứa nội dung)
Sử dụng data-bs-target=“#id” để liên kết đến navbar hoặc danh sách mục tiêu cần cập nhật trạng thái
Mỗi phần nội dung trong trang phải có id tương ứng với href của liên kết trong thanh điều hướng

Ví dụ:

 <body data-bs-spy="scroll" data-bs-target="#navbar-example" tabindex="0">
   <nav id="navbar-example" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
     <a class="nav-link" href="#section1">Phần 1</a>
     <a class="nav-link" href="#section2">Phần 2</a>
   </nav>
    <div id="section1" style="height:500px;">Nội dung phần 1</div>
   <div id="section2" style="height:500px;">Nội dung phần 2</div>
 </body>

Câu hỏi phỏng vấn Bootstrap – Cấp độ Nâng cao (Advanced)

Xử lý xung đột CSS giữa Bootstrap và CSS custom của bạn như thế nào?

Khi sử dụng Bootstrap cùng với CSS tùy chỉnh, xung đột thường xảy ra do trùng selector hoặc độ ưu tiên (specificity). Để xử lý hiệu quả, cần tuân theo một số nguyên tắc sau:

1. Kiểm soát thứ tự nạp CSS: Luôn nạp file Bootstrap trước, và nạp CSS tùy chỉnh sau. Điều này giúp quy tắc của bạn có ưu tiên cao hơn và dễ dàng ghi đè các style mặc định.

2. Tăng độ đặc hiệu selector: Nếu một class Bootstrap vẫn ghi đè CSS custom, có thể tăng độ đặc hiệu selector bằng cách:

Gắn thêm lớp cha cụ thể, ví dụ:

 .custom-theme .btn-primary { background-color: #0056b3; }

Tránh dùng !important trừ khi bất khả kháng, vì nó làm giảm khả năng bảo trì lâu dài.

3. Dùng SASS để override đúng cách: Bootstrap hỗ trợ SASS variables, có thể thay đổi các biến như $primary, $font-size-base, $border-radius trước khi import Bootstrap. Cách này giúp đồng bộ style mà không cần ghi đè bằng CSS thủ công.

4. Sử dụng namespace hoặc prefix riêng: Trong các dự án lớn, nên thêm prefix cho class custom, ví dụ: .app-btn, .app-card để tránh trùng với class của Bootstrap như .btn hoặc .card.

Có thể lazy-load các component JS của Bootstrap không?

Bootstrap 5 dùng ES modules (vanilla JS) nên hoàn toàn có thể tách gói (code-split) và lazy-load theo nhu cầu để giảm JS ban đầu. Cách tiếp cận thường dùng là:

Import theo component (thay vì bootstrap.bundle toàn bộ): chỉ tải Modal, Collapse, Tooltip,… khi thật sự dùng, bundler (Vite/Webpack/Rollup) sẽ tree-shake phần còn lại
Dynamic import theo tương tác: tải component khi người dùng bấm nút mở modal/lần đầu thấy carousel. Có thể kích bằng IntersectionObserver (khi phần tử vào viewport) hoặc sau tương tác
Prefetch/preload thông minh: prefetch khi idle/hover để giảm độ trễ tương tác đầu tiên (first-use)
Popper là phụ thuộc có điều kiện: chỉ Tooltip/Dropdown/Popover cần Popper. Nếu lazy-load các component này, nạp kèm Popper (hoặc dùng bootstrap.bundle riêng cho chúng)
SPA/SSR frameworks: dùng cơ chế dynamic import/route-level splitting (vd. Next.js dynamic()), tắt SSR cho component tương tác nếu cần

Bootstrap đảm bảo tương thích với các trình duyệt cũ như thế nào?

Bootstrap được thiết kế theo hướng “progressive enhancement”, nghĩa là các trình duyệt hiện đại sẽ được tận dụng tối đa tính năng mới, trong khi các trình duyệt cũ vẫn hiển thị được nội dung cơ bản dù có thể thiếu một số hiệu ứng hoặc tiện ích. Trong đó:

Từ Bootstrap 5, framework ngừng hỗ trợ Internet Explorer 10 và 11, do các trình duyệt này không tương thích với Flexbox và CSS variables
Bootstrap 5 yêu cầu trình duyệt hỗ trợ ES6, Flexbox, và CSS Custom Properties (như Chrome ≥ 60, Firefox ≥ 60, Safari ≥ 12, Edge ≥ 79)
Với các tính năng không được hỗ trợ (như CSS variable hoặc position: sticky), Bootstrap vẫn hiển thị bố cục cơ bản mà không làm vỡ giao diện.
Một số component chỉ mất hiệu ứng phụ (transition, animation), nhưng nội dung và layout vẫn truy cập được.

Từ phiên bản Bootstrap 5, framework đã loại bỏ hoàn toàn jQuery và chuyển sang sử dụng Vanilla JavaScript (ES6). Điều này ảnh hưởng trực tiếp đến cách khởi tạo và điều khiển các component JavaScript như Modal, Tooltip, Collapse, Dropdown,… bao gồm:

1. Khởi tạo component

Trước đây (Bootstrap 4), các component được gọi thông qua jQuery, ví dụ:

$('#myModal').modal('show');

Trong Bootstrap 5, mọi thứ hoạt động bằng class JavaScript thuần, chẳng hạn:

const modal = new bootstrap.Modal(document.getElementById('myModal'));
modal.show();

Các data attributes (data-bs-toggle, data-bs-target, data-bs-dismiss) vẫn được hỗ trợ nên có thể dùng mà không cần viết JavaScript.

2. Xử lý sự kiện (events)

Bootstrap 5 không còn hỗ trợ $(element).on(…) của jQuery. Thay vào đó, sử dụng DOM event listener thông thường:

element.addEventListener('shown.bs.modal', () => {
  console.log('Modal hiển thị thành công!');
});

3. Phụ thuộc Popper

Một số component như Tooltip, Popover, Dropdown vẫn cần Popper.js để định vị chính xác vị trí hiển thị. Popper đã được tích hợp sẵn trong file bootstrap.bundle.min.js khi bạn cài đặt.

4. Ưu điểm khi loại bỏ jQuery

Giảm dung lượng file JS tổng thể
Cải thiện hiệu năng và khả năng tree-shaking khi build
Dễ tích hợp hơn với các framework hiện đại như React, Vue hoặc Angular

Bootstrap có hỗ trợ “dark mode” gốc không? Nếu không, bạn sẽ làm thế nào để thêm chế độ tối cho Bootstrap?

Từ phiên bản Bootstrap 5.3, framework đã hỗ trợ dark mode gốc thông qua hệ thống color mode sử dụng CSS variables.

1. Cách kích hoạt dark mode trong Bootstrap 5.3+

Chỉ cần thêm thuộc tính data-bs-theme=“dark” vào thẻ <html> hoặc <body>, toàn bộ giao diện sẽ tự động chuyển sang chế độ tối:

<body data-bs-theme="dark">

Ngoài ra, có thể dùng data-bs-theme=“auto” để Bootstrap tự chuyển chế độ dựa trên cài đặt hệ thống (light/dark)

2. Trường hợp sử dụng Bootstrap cũ (trước 5.3)

Nếu đang dùng phiên bản cũ không có dark mode gốc, có thể thêm chế độ tối bằng một trong hai cách:

Cách 1: Tạo CSS custom override, định nghĩa lại các màu nền (background-color), màu chữ (color) và viền (border-color) trong một class .dark-mode hoặc selector[data-theme=“dark”].
Cách 2: Sử dụng biến SASS, định nghĩa lại các biến $body-bg, $body-color, $primary,… trong một file SCSS riêng cho theme tối, sau đó build thành file CSS thứ hai (bootstrap-dark.css) và hoán đổi khi người dùng bật dark mode.

Khi nào chỉ cần CSS của Bootstrap mà không cần JavaScript?

Bootstrap gồm hai phần chính: CSS (giao diện & bố cục) và JavaScript (tương tác & hành vi động). Trong nhiều trường hợp, chỉ cần phần CSS là đủ để xây dựng giao diện mà không cần tải thêm file JS, giúp trang web nhẹ và tải nhanh hơn. Dưới đây là một số trường hợp:

Khi chỉ sử dụng phần bố cục và style cơ bản: Các thành phần như Grid system, Typography, Buttons, Forms, Cards, Tables, Utilities (spacing, color, alignment, display, flex, v.v.) đều hoạt động hoàn toàn bằng CSS
Khi không cần các component tương tác: Các component như Modal, Dropdown, Collapse, Carousel, Tooltip, Popover, Offcanvas yêu cầu JavaScript để hoạt động. Nếu dự án không dùng các component này, có thể bỏ qua bootstrap.bundle.min.js
Khi framework khác đã xử lý phần tương tác: Trong các dự án dùng React, Vue, Angular,…, phần tương tác thường được viết bằng logic riêng, không cần Bootstrap JS. Trong trường hợp này, chỉ giữ lại CSS để dùng class và layout có sẵn.

Những vấn đề hiệu năng cần lưu ý khi dùng Bootstrap là gì?

Bootstrap giúp phát triển giao diện nhanh, nhưng nếu sử dụng không hợp lý, có thể gây tăng dung lượng, chậm tải và render không tối ưu. Dưới đây là các vấn đề hiệu năng thường gặp và cách khắc phục:

Dung lượng CSS và JS quá lớn

Mặc định bootstrap.min.css và bootstrap.bundle.min.js chứa toàn bộ component, kể cả những phần không dùng.
Giải pháp: chỉ nên import các module SCSS cần thiết (selective import) và sử dụng PurgeCSS để loại bỏ class không được dùng trong HTML/JS

Sử dụng quá nhiều class tiện ích (utility classes)

Dùng quá nhiều class lặp lại có thể làm HTML cồng kềnh, khó đọc và ảnh hưởng hiệu suất render.
Giải pháp: gom nhóm class bằng custom CSS hoặc sử dụng SASS mixin khi có thể.

Không tối ưu hình ảnh và tài nguyên kèm theo

Bootstrap chỉ xử lý giao diện, nhưng hình ảnh, icon, font… vẫn ảnh hưởng lớn đến tốc độ tải.
Giải pháp: nén ảnh, dùng WebP, preload font, và tận dụng Bootstrap Icons CDN thay vì tải thủ công.

Không bật minify hoặc gzip khi build production

Nhiều dự án quên tối ưu build → CSS/JS bị giữ nguyên định dạng.
Giải pháp: luôn minify và nén file bằng gzip hoặc brotli trước khi deploy.

Overriding CSS quá nhiều

Ghi đè quá nhiều class Bootstrap bằng CSS custom khiến browser phải render lại nhiều lần.
Giải pháp: nếu cần tùy chỉnh lớn, nên override biến SASS thay vì CSS runtime.

Tổng kết

Bootstrap là nền tảng front-end mạnh mẽ, giúp lập trình viên nhanh chóng xây dựng giao diện web responsive, thống nhất và dễ bảo trì. Việc nắm vững Bootstrap không chỉ dừng ở việc sử dụng class hay component có sẵn, mà còn đòi hỏi bạn hiểu cấu trúc grid system, utilities, khả năng tùy biến SCSS, cùng cách tối ưu layout và trải nghiệm người dùng trong dự án.

Qua bài viết này, ITviec hi vọng đã giúp bạn hệ thống lại những kiến thức quan trọng và biết cách vận dụng chúng vào phỏng vấn thực tế. Khi được hỏi về Bootstrap, đừng chỉ trả lời lý thuyết, hãy chia sẻ cách bạn đã dùng framework này để giải quyết vấn đề giao diện, tùy chỉnh theme hay tối ưu hiệu năng. Chính những ví dụ cụ thể ấy sẽ giúp bạn ghi điểm trong mắt nhà tuyển dụng.

Phỏng vấn Bootstrap cần chuẩn bị gì?

Các nhóm câu hỏi phỏng vấn Bootstrap thường gặp

Hiểu biết cơ bản về Bootstrap

Các lợi ích nổi bật của Bootstrap

Câu hỏi phỏng vấn Bootstrap – Cấp độ Cơ bản (Beginner)

Bootstrap là gì?

Những tính năng nổi bật của Bootstrap?

Làm thế nào để tích hợp Bootstrap vào dự án?

Hệ thống lưới (grid system) của Bootstrap hoạt động như thế nào?

Sự khác nhau giữa .container và .container-fluid là gì?

Các breakpoint mặc định trong Bootstrap là gì?

Làm sao để làm hình ảnh responsive trong Bootstrap (classes nào)?

Component là gì? Kể tên một vài component phổ biến trong Bootstrap

Utility class trong Bootstrap là gì? Ví dụ các utility thường dùng

Những điểm mới chính của Bootstrap 5 so với Bootstrap 4?

Câu hỏi phỏng vấn Bootstrap – Cấp độ Trung cấp (Intermediate)

Cách tạo modal trong Bootstrap như thế nào? Viết một ví dụ ngắn.

Dropdown hoạt động như thế nào? Có những cách kích hoạt nào?

Làm thế nào để làm table responsive trong Bootstrap?

Carousel trong Bootstrap được triển khai ra sao?

Làm thế nào để căn giữa (center) một phần tử khối (block) trong Bootstrap?

Căn giữa theo chiều ngang

Căn giữa theo chiều dọc và ngang (flexbox)

Căn giữa text hoặc inline elements

Làm thế nào để tùy chỉnh style Bootstrap bằng CSS ghi đè hoặc SASS?

Ghi đè bằng CSS thông thường

Dùng SASS để tùy biến toàn diện

Làm thế nào để loại bỏ các component không dùng nhằm giảm kích thước file CSS/JS?

Giảm kích thước CSS

Giảm kích thước JavaScript

Sử dụng form trong Bootstrap thế nào?

Cách dùng spacing utilities (margin / padding) kết hợp với các breakpoint thế nào?

Scrollspy plugin là gì? Giải thích cách dùng trong Bootstrap

Câu hỏi phỏng vấn Bootstrap – Cấp độ Nâng cao (Advanced)

Xử lý xung đột CSS giữa Bootstrap và CSS custom của bạn như thế nào?

Có thể lazy-load các component JS của Bootstrap không?

Bootstrap đảm bảo tương thích với các trình duyệt cũ như thế nào?

Bootstrap 5 đã loại bỏ jQuery, việc đó ảnh hưởng tới cách dùng components JS (Modal, Tooltip…) như thế nào?

Bootstrap có hỗ trợ “dark mode” gốc không? Nếu không, bạn sẽ làm thế nào để thêm chế độ tối cho Bootstrap?

Khi nào chỉ cần CSS của Bootstrap mà không cần JavaScript?

Những vấn đề hiệu năng cần lưu ý khi dùng Bootstrap là gì?

Dung lượng CSS và JS quá lớn

Sử dụng quá nhiều class tiện ích (utility classes)

Không tối ưu hình ảnh và tài nguyên kèm theo

Không bật minify hoặc gzip khi build production

Overriding CSS quá nhiều

Tổng kết

Nhat Anh