Những khác biệt cốt lõi giữa Bootstrap 3 và Bootstrap 4

1. Grid system (điểm khác lớn nhất)

Bootstrap 3

• Dùng float
• 4 breakpoint: xs sm md lg
• Bắt buộc dùng col-xs-*

<div class="col-xs-12 col-md-6"></div>

Bootstrap 4

• Dùng Flexbox
• 5 breakpoint: xs sm md lg xl
• xs là mặc định → không cần ghi

<div class="col-12 col-md-6"></div>

👉 BS4 linh hoạt hơn rất nhiều (align, order, equal height)

2. Bỏ / thay class cũ

❌ Bị loại bỏ ở BS4

• .panel → ❌
• .well → ❌
• .thumbnail → ❌
• .glyphicon → ❌

✅ Thay bằng

• .card (gộp panel + well + thumbnail)
• Icon → FontAwesome / SVG

<div class="card">
  <div class="card-body">Content</div>
</div>

3. Utility class (BS4 mạnh hơn hẳn)

Bootstrap 3 (rất hạn chế)

• .pull-left
• .text-center
• .hidden-xs

Bootstrap 4

• Spacing: m-0 → m-5 p-0 → p-5 mt-3, px-2, ...
• Display: d-none d-md-block
• Flex: d-flex justify-content-between align-items-center

👉 BS4 viết ít CSS custom hơn rất nhiều

4. Responsive utilities

BS3

.hidden-xs
.visible-md-block

BS4

d-none d-md-block
d-sm-none

✔️ Rõ ràng
✔️ Thống nhất
✔️ Ít class hơn

5. Typography & form

Bootstrap 3

• Form dùng .form-group
• Checkbox, radio khá cứng

Bootstrap 4

• Form control đẹp hơn
• Có:
  • .form-row
  • .custom-control
  • .custom-select

👉 BS4 dễ làm UI hiện đại

6. JavaScript

Bootstrap 3

• Phụ thuộc jQuery
• Plugin viết kiểu cũ

Bootstrap 4

• Vẫn dùng jQuery
• JS viết lại, event rõ hơn
• Tooltip / Popover ổn định hơn

(Bootstrap 5 mới bỏ hẳn jQuery)

7. Browser support

👉 Nếu phải support IE cũ → BS3
👉 Web hiện đại → BS4

8. Nâng cấp có dễ không?

❌ Không drop-in replacement

Ví dụ:

• col-xs-* → col-*
• .panel → .card
• .pull-right → float-right
• .hidden-xs → d-none d-sm-block

👉 Thường phải refactor HTML