F8
Quay lại
Đang tải...

Ếch Trendy

Cùng chú ếch nhỏ khám phá thế giới Web đầy biến động. Cập nhật trending nhanh như cách ếch đớp mồi! ⌨️🌿

0

Bootstrap Responsive 2026: Thư Viện CSS/JS Miễn Phí Tạo Website Cá Nhân Siêu Nhanh

Ếch Trendy
Ếch Trendy

5 tháng trước · 6 phút đọc

Bootstrap vẫn còn đáng học không?

Mình thấy nhiều bạn mới vào nghề hay hỏi câu này. Tailwind đang hot, React đang hot, vậy Bootstrap còn chỗ đứng không?

Câu trả lời thực tế: Bootstrap vẫn là lựa chọn nhanh nhất để dựng giao diện hoàn chỉnh khi bạn chưa thành thạo CSS. Thư viện này có 4.8M weekly (Tech Insider) lượt tải về hàng tháng trên npm - con số đó nói lên rất nhiều thứ.

343829 Bootstrap vẫn dẫn đầu về adoption trong các framework CSS

Tailwind cho bạn kiểm soát tuyệt đối, nhưng cũng đòi hỏi bạn hiểu CSS sâu. Bootstrap ngược lại - bạn chỉ cần biết class nào làm gì là ra giao diện ngay. Với mục tiêu làm portfolio cá nhân trong 1-2 ngày, Bootstrap vẫn là lựa chọn hợp lý.

Version 5.x hiện tại đã bỏ jQuery, nhẹ hơn đáng kể, và component library đủ dùng cho một website cá nhân chuyên nghiệp.

Grid system và breakpoints - hiểu đúng để dùng đúng

Phần này là trái tim của Bootstrap responsive. Nếu bạn nắm được, mọi thứ còn lại chỉ là copy-paste class.

Bootstrap dùng hệ thống 12 cột. Mỗi hàng (row) chia làm 12 phần bằng nhau, bạn quyết định mỗi cột chiếm bao nhiêu phần.

<!-- Layout 3 cột bằng nhau -->
<div class="container">
  <div class="row">
    <div class="col-md-4">Kỹ năng 1</div>
    <div class="col-md-4">Kỹ năng 2</div>
    <div class="col-md-4">Kỹ năng 3</div>
  </div>
</div>

343830 12 cột Bootstrap - linh hoạt chia theo nhu cầu từng màn hình

Prefix trong class quyết định breakpoint:

  • col- - tất cả màn hình (< 576px)
  • col-sm- - ≥ 576px (điện thoại ngang)
  • col-md- - ≥ 768px (tablet)
  • col-lg- - ≥ 992px (laptop)
  • col-xl- - ≥ 1200px (màn hình lớn)

Mobile-first có nghĩa là: class bạn đặt cho màn hình nhỏ sẽ tự động áp dụng cho màn hình lớn hơn, trừ khi bạn override. Ví dụ thực tế:

<!-- Mobile: 1 cột. Tablet: 2 cột. Desktop: 3 cột -->
<div class="col-12 col-md-6 col-lg-4">
  <!-- Nội dung -->
</div>

Nếu bạn chưa quen với khái niệm responsive và grid, khóa Responsive Với Grid System trên F8 giải thích rất kỹ phần này - và hoàn toàn miễn phí.

Xây portfolio cá nhân từ đầu - step by step

Bắt đầu bằng cấu trúc file đơn giản nhất:

portfolio/
├── index.html
├── style.css       # chỉ override khi cần
└── assets/
    └── avatar.jpg

Bước 1: Load Bootstrap qua CDN

Không cần cài gì. Thêm vào <head>:

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

Cuối <body> thêm Bootstrap JS:

  <!-- Bootstrap JS bundle (kèm Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

Bước 2: Navigation bar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Tên Bạn</a>
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#about">Về mình</a></li>
        <li class="nav-item"><a class="nav-link" href="#projects">Dự án</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Liên hệ</a></li>
      </ul>
    </div>
  </div>
</nav>

Navbar này tự động collapse thành hamburger menu trên mobile - không cần viết thêm JS.

343831 3 bước cơ bản: CDN → Nav → Sections, là xong khung portfolio

Bước 3: Hero section và about

<!-- Hero Section -->
<section class="bg-dark text-white py-5" id="hero">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <h1 class="display-4 fw-bold">Xin chào, mình là [Tên]</h1>
        <p class="lead">Frontend Developer | Đang học tại [Trường/F8]</p>
        <a href="#projects" class="btn btn-primary btn-lg">Xem dự án</a>
      </div>
      <div class="col-lg-4 text-center">
        <!-- Ảnh avatar -->
        <img src="assets/avatar.jpg" class="img-fluid rounded-circle" 
             style="max-width: 200px;" alt="Avatar">
      </div>
    </div>
  </div>
</section>

Bạn có thể tải file HTML mẫu đầy đủ ở đây để tiết kiệm thời gian: Tải template portfolio Bootstrap

Components hay dùng nhất khi làm portfolio

Bootstrap có sẵn rất nhiều component, nhưng với portfolio cá nhân, bạn chỉ cần 4-5 cái là đủ.

Cards - để hiển thị dự án:

<div class="row g-4" id="projects">
  <div class="col-md-4">
    <div class="card h-100 shadow-sm">
      <img src="project1.png" class="card-img-top" alt="Dự án 1">
      <div class="card-body">
        <h5 class="card-title">Tên dự án</h5>
        <p class="card-text">Mô tả ngắn về dự án, dùng công nghệ gì.</p>
        <a href="#" class="btn btn-outline-primary btn-sm">Xem demo</a>
        <a href="#" class="btn btn-outline-secondary btn-sm ms-2">GitHub</a>
      </div>
    </div>
  </div>
</div>

h-100 giúp tất cả card trong cùng hàng có chiều cao bằng nhau - đây là trick nhiều bạn mới hay bỏ sót.

343832 Card component kết hợp g-4 (gutters) cho layout project đẹp và đều

Badges - tag công nghệ:

<span class="badge bg-primary">React</span>
<span class="badge bg-success">Node.js</span>
<span class="badge bg-warning text-dark">MySQL</span>

Progress bar - thanh kỹ năng:

<div class="mb-3">
  <div class="d-flex justify-content-between">
    <span>JavaScript</span><span>80%</span>
  </div>
  <div class="progress">
    <div class="progress-bar bg-primary" style="width: 80%"></div>
  </div>
</div>

Modal - popup xem chi tiết dự án (nếu muốn nâng cao hơn):

<!-- Nút trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#projectModal">
  Xem chi tiết
</button>

<!-- Modal -->
<div class="modal fade" id="projectModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Chi tiết dự án</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- Nội dung -->
      </div>
    </div>
  </div>
</div>

Modal hoạt động hoàn toàn nhờ data-bs-* attributes - không cần viết JS.

Tùy chỉnh Bootstrap mà không bị xung đột

Vấn đề phổ biến nhất khi dùng Bootstrap: bạn override class Bootstrap trong CSS nhưng không có hiệu lực, hoặc có hiệu lực nhưng gây ra lỗi hiển thị ở chỗ khác.

Cách tiếp cận đúng: không sửa trực tiếp Bootstrap, chỉ thêm class riêng.

/* style.css - chỉ viết những gì Bootstrap chưa có */

/* Hero section màu gradient riêng */
.hero-gradient {
  background: linear-gradient(135deg, #1a2b4e 0%, #3b6fd4 100%);
}

/* Card hover effect nhẹ */
.project-card {
  transition: transform 0.2s ease;
}
.project-card:hover {
  transform: translateY(-4px);
}

/* Override màu primary nếu muốn brand color riêng */
:root {
  --bs-primary: #3b6fd4;
  --bs-primary-rgb: 59, 111, 212;
}

343833 Ghi đè CSS variables của Bootstrap - cách sạch nhất để đổi màu brand

Bootstrap 5 dùng CSS custom properties (variables) cho màu sắc, spacing, typography. Bạn chỉ cần override variables trong :root là toàn bộ theme thay đổi theo - không cần sờ vào source Bootstrap.

Một trade-off cần biết: nếu bạn dùng Bootstrap CDN, bạn không thể tree-shake để loại bỏ CSS không dùng. File CSS Bootstrap đầy đủ nặng khoảng ~22KB (gzip). Với portfolio cá nhân thì không đáng lo, nhưng nếu sau này làm dự án lớn hơn, hãy cân nhắc chỉ import những phần cần thiết qua npm.

Nếu bạn muốn hiểu HTML/CSS sâu hơn trước khi layer Bootstrap lên, khóa HTML CSS từ Zero đến Hero trên F8 là điểm khởi đầu tốt - miễn phí và có project thực hành.

Deploy portfolio lên GitHub Pages - hoàn toàn miễn phí

Viết xong code rồi, giờ cần một URL thật để bỏ vào CV.

GitHub Pages cho phép host static website miễn phí với domain dạng username.github.io/portfolio. Không cần server, không cần trả tiền hosting.

Các bước thực hiện:

  1. Tạo repo mới trên GitHub, đặt tên portfolio
  2. Push code lên branch main
  3. Vào repo → Settings → Pages → chọn source là branch main, folder /root
  4. GitHub tự build và deploy trong 1-2 phút
  5. URL của bạn: https://username.github.io/portfolio

343834 Từ code local đến URL thật trong 5 bước - không cần server

Một lưu ý quan trọng: nếu file ảnh của bạn dùng đường dẫn tuyệt đối như /assets/avatar.jpg, nó sẽ bị lỗi 404 khi deploy lên GitHub Pages vì path gốc không phải /. Dùng đường dẫn tương đối: ./assets/avatar.jpg hoặc assets/avatar.jpg.

Sau khi có URL, bạn có thể kết nối custom domain nếu muốn (ví dụ: yourname.dev). GitHub Pages hỗ trợ HTTPS miễn phí cho custom domain qua Let's Encrypt.

Bài viết này cover đủ để bạn có một portfolio chạy được. Bước tiếp theo:

  1. Clone template mẫu, thay nội dung thật của bạn vào
  2. Thêm ít nhất 2-3 dự án thực tế (dù nhỏ cũng được)
  3. Deploy lên GitHub Pages và để URL vào LinkedIn/CV

Gặp vướng mắc ở bước nào, drop comment bên dưới - mình sẽ trả lời.

0
Responsive CSSBootstrapPortfolio cá nhânGrid System