Text Bootstrap: 10+ cách định dạng văn bản hiệu quả với Bootstrap

Khi xây dựng giao diện web, việc trình bày văn bản một cách rõ ràng, dễ đọc và đồng nhất là yếu tố quan trọng không thể thiếu. Với text Bootstrap, bạn không cần viết quá nhiều CSS thủ công mà vẫn có thể định dạng văn bản hiệu quả nhờ hệ thống class được thiết kế sẵn. 

Đọc bài viết này để được hướng dẫn sử dụng Text Bootstrap để:

• Định dạng tiêu đề với
• Canh lề văn bản, xử lý tràn dòng
• Định dạng kiểu chữ, kích thước, màu sắc

Text Bootstrap là gì?

Trong Bootstrap, có tập hợp các class CSS được thiết kế sẵn để định dạng văn bản một cách nhanh chóng và nhất quán. Thay vì phải viết CSS tùy chỉnh cho từng yếu tố văn bản, bạn có thể tận dụng các class có sẵn này để điều chỉnh tiêu đề, đoạn văn, kiểu chữ, màu sắc, cách căn lề và nhiều thuộc tính khác.

Việc sử dụng Text Bootstrap mang lại nhiều lợi ích như:

• Tính nhất quán: Việc sử dụng Text Bootstrap giúp đảm bảo văn bản trên toàn bộ trang web có kiểu dáng, phong cách đồng nhất
• Tiết kiệm thời gian: Các class được xây dựng sẵn giúp bạn không cần viết nhiều CSS mà vẫn định dạng được văn bản dễ dàng
• Dễ sử dụng: Chỉ cần thêm class vào các thẻ HTML để áp dụng kiểu dáng
• Khả năng tùy biến: Việc tùy chỉnh định dạng của Text Bootstrap được thực hiện dễ dàng thông qua CSS.
• Responsive: Các định dạng văn bản thường được thiết kế để hoạt động tốt trên nhiều kích thước màn hình.

Đọc thêm: Bootstrap 5 là gì? Những thay đổi nổi bật ở Bootstrap 5

Các nhóm Class định dạng text trong Bootstrap

Định dạng tiêu đề và văn bản

Tiêu đề cơ bản

Bootstrap tự động áp dụng định dạng về kích thước, độ đậm và khoảng cách riêng cho các thẻ HTML tiêu chuẩn như <h1>, <h2>, … <h6>.

      <h1>Tiêu đề cấp 1</h1>
      <h2>Tiêu đề cấp 2</h2>
      <h3>Tiêu đề cấp 3</h3>
      <h4>Tiêu đề cấp 4</h4>
      <h5>Tiêu đề cấp 5</h5>
      <h6>Tiêu đề cấp 6</h6>

Khi không có Bootstrap	Khi áp dụng định dạng Bootstrap

Như hình ảnh ví dụ trên, kích cỡ của từng loại tiêu đề được Bootstrap quy định lại theo chuẩn riêng, độ đậm của chữ và font chữ cũng được thay đổi (Bootstrap sử dụng hệ thống font chữ hiện đại Segoe UI, Roboto, San Francisco… thay vì font mặc định của trình duyệt).

Trường hợp nếu bạn muốn một phần tử HTML không phải <h1>…<h6> (ví dụ <p>) trông giống tiêu đề, bạn có thể sử dụng class .h1 đến .h6.

    <p class="h1">Tiêu đề cấp 1</p>
    <p class="h2">Tiêu đề cấp 2</p>
    <p class="h3">Tiêu đề cấp 3</p>
    <p class="h4">Tiêu đề cấp 4</p>
    <p class="h5">Tiêu đề cấp 5</p>
    <p class="h6">Tiêu đề cấp 6</p>

Tạo tiêu đề nổi bật

Sử dụng các class tiện ích như .display-* để tạo tiêu đề nổi bật hơn (thường dùng cho tiêu đề lớn, thu hút sự chú ý)

    <p class="display-1">Tiêu đề cấp 1</p>
    <p class="display-2">Tiêu đề cấp 2</p>
    <p class="display-3">Tiêu đề cấp 3</p>
    <p class="display-4">Tiêu đề cấp 4</p>
    <p class="display-5">Tiêu đề cấp 5</p>
    <p class="display-6">Tiêu đề cấp 6</p>

Kết quả, Bootstrap tạo ra văn bản có kích thước lớn hơn so với kích thước của các thẻ tiêu đề tương ứng (display-1 sẽ lớn hơn so với h1) với font-weight mảnh hơn:

Canh lề văn bản

Bootstrap cung cấp các class tiện lợi để điều chỉnh căn lề văn bản một cách dễ dàng. Bạn có thể áp dụng các class này trực tiếp vào các phần tử HTML chứa văn bản để thay đổi cách chúng được hiển thị trong container cha.

• .text-start (trước đây là .text-left): Căn văn bản về phía bên trái của phần tử cha (kiểu căn lề mặc định)
• .text-center: Căn văn bản vào chính giữa theo chiều ngang của phần tử cha
• .text-end (trước đây là .text-right): Căn văn bản về phía bên phải của phần tử cha
• .text-justify: Căn đều văn bản bằng cách điều chỉnh khoảng cách giữa các từ sao cho dòng văn bản trải đều từ lề trái sang lề phải của phần tử cha

<p class="text-start">Văn bản này được căn lề trái.</p>
<p class="text-center">Văn bản này được căn giữa.</p>
<p class="text-end">Văn bản này được căn lề phải.</p>
<p class="text-justify">Đây là một đoạn văn bản dài được căn đều. Các khoảng trắng giữa các từ sẽ được điều chỉnh để dòng văn bản lấp đầy toàn bộ chiều rộng của phần tử chứa nó.</p>

Kết quả:

Canh lề theo responsive

Bootstrap cũng cung cấp các class căn lề responsive, cho phép bạn thay đổi cách căn lề văn bản dựa trên kích thước màn hình. Các class này có cú pháp như sau: 

.text-{breakpoint}-{alignment}

Trong đó:

• {breakpoint} là một trong các điểm dừng (breakpoints) của Bootstrap: sm, md, lg, xl, xxl.
• {alignment} là một trong các kiểu căn lề: start, center, end.

Ví dụ:

    <p class="text-start text-sm-center text-md-end">
      Đoạn văn bản này sẽ:<br>
      - Căn trái trên màn hình rất nhỏ (dưới 576px - mặc định).<br>
      - Căn giữa trên màn hình nhỏ (từ 576px đến dưới 768px).<br>
      - Căn phải trên màn hình trung bình (từ 768px trở lên).
    </p>

Kết quả:

Màn hình có chiều rộng nhỏ hơn 576px:

Màn hình có chiều rộng từ 576px đến dưới 768px:

Màn hình có chiều rộng trên 768px:

Định dạng kiểu chữ

Bootstrap cung cấp nhiều class định dạng kiểu chữ như:

• .fw-bold: sử dụng để làm nổi bật văn bản bằng cách in đậm (hoặc dùng .fw-bolder để tăng độ đậm nữa)
• .fw-light: dùng để tạo kiểu chữ mảnh, giúp văn bản trông thanh thoát hơn (hoặc dùng .fw-lighter để nét mảnh hơn nữa)
• .fst-italic: giúp văn bản in nghiêng, thường dùng để nhấn mạnh hoặc trích dẫn
• .text-uppercase: chuyển toàn bộ chữ cái trong văn bản thành CHỮ IN HOA
• .text-lowercase: chuyển toàn bộ chữ cái trong văn bản thành chữ thường
• .text-capitalize: chuyển chữ cái đầu tiên của mỗi từ sang chữ hoa, phù hợp khi cần định dạng tiêu đề

Ví dụ:

     <p class="fw-bold">ITViec blog (in đậm)</p>
     <p class="fw-light">ITViec blog (nét chữ mảnh)</p>
     <p class="fst-italic">ITViec blog (in nghiêng)</p>
     <p class="text-uppercase">ITViec blog (toàn bộ in hoa)</p>
     <p class="text-lowercase">ITViec blog (toàn bộ chữ thường)</p>
     <p class="text-capitalize">ITViec blog - text bootstrap (viết hoa chữ cái đầu)</p>

Kết quả:

Kích thước chữ

Bootstrap cung cấp sẵn các class để tùy chỉnh kích thước của văn bản. Điều này rất tiện lợi khi bạn muốn nhấn mạnh hoặc điều chỉnh độ lớn của văn bản để phù hợp với bố cục giao diện.

Class định dạng kích cỡ chữ bao gồm 6 cấp độ, tương ứng từ .fs-1 (lớn nhất) đến .fs-6 (nhỏ nhất). Ví dụ:

     <p class="fs-1">.fs-1 - ITViec Blog</p>
     <p class="fs-2">.fs-2 - ITViec Blog</p>
     <p class="fs-3">.fs-3 - ITViec Blog</p>
     <p class="fs-4">.fs-4 - ITViec Blog</p>
     <p class="fs-5">.fs-5 - ITViec Blog</p>
     <p class="fs-6">.fs-6 - ITViec Blog</p>

Kết quả:

Quản lý màu sắc

Bootstrap cung cấp các class định nghĩa sẵn về màu sắc của văn bản và cả màu nền của văn bản. Những màu sắc này được thống nhất với các thành phần class liên quan đến màu sắc khác.

Màu sắc văn bản

• .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">Đây là văn bản màu chính (primary).</p>
     <p class="text-success">Đây là thông báo thành công (success).</p>
     <p class="text-warning">Đây là thông báo chú ý (warning).</p>
     <p class="text-danger">Đây là thông báo lỗi (danger).</p>
     <p class="text-muted">Đây là ghi chú ít quan trọng (muted).</p>

Kết quả:

Màu nền văn bản (Background Color)

Các class định dạng màu nền văn bản cũng có màu sắc tương tự với các class định dạng màu văn bản. Chúng được cấu hình tên class theo dạng .bg-* (trong đó * sẽ bao gồm các dạng màu sắc trong Bootstrap: primary, success, danger, warning, secondary,…)

Ví dụ:

     <p class="bg-primary">Đây là màu nền primary.</p>
     <p class="bg-success">Đây là màu nền success.</p>
     <p class="bg-warning">Đây là màu nền warning.</p>
     <p class="bg-danger">Đây là màu nền danger.</p>
     <p class="bg-secondary">Đây là màu nền secondary.</p>  

Kết quả:

Bạn hoàn toàn có thể kết hợp những class định dạng lại với nhau, ví dụ:

<div class="bg-primary text-white p-2">Nền màu xanh chủ đạo + chữ trắng</div>
<div class="bg-light text-dark p-2 mt-2">Nền xám sáng + chữ đen</div>
<div class="bg-dark text-warning p-2 mt-2">Nền đen + chữ vàng</div>   

Kết quả:

Xử lý tràn văn bản và xuống dòng

Khi làm giao diện, sẽ không ít lần chúng ta gặp những đoạn văn bản quá dài vượt khỏi vùng chứa. Bootstrap cung cấp nhiều class tiện ích để kiểm soát việc hiển thị, xuống dòng hoặc cắt ngắn văn bản một cách dễ dàng, giúp bố cục luôn gọn gàng và dễ đọc.

.text-wrap

Cho phép văn bản xuống dòng ở khoảng trắng khi văn bản dài quá vùng chứa (ngắt dòng theo từ)

<div class="text-wrap" style="width: 250px; border: 1px solid #ccc; padding: 10px">
    Đây là một đoạn văn bản dài, nó sẽ tự động xuống dòng khi hết chỗ.
</div> 

Kết quả:

Tuy nhiên, nếu văn bản không có bất kỳ khoảng trắng nào, .text-wrap sẽ không hoạt động:

.text-nowrap

Giữ văn bản trên một dòng duy nhất, dù có bị tràn khỏi khung

<div class="text-nowrap" style="width: 250px; border: 1px solid #ccc; padding: 10px">
   Đây là một đoạn văn bản dài, nó không tự động xuống dòng khi hết chỗ.
</div> 

Kết quả: Dù có khoảng trắng nhưng văn bản không xuống dòng:

.text-truncate

Cắt bớt nội dung văn bản khi bị tràn khỏi khung và thêm dấu “…” ở cuối (yêu cầu phần tử phải có max-width và overflow: hidden)

     <div class="text-truncate" style="max-width: 200px; overflow: hidden;">
       Đây là một đoạn văn bản rất dài sẽ bị cắt ngắn bằng dấu ba chấm.
     </div>

Kết quả:

.text-break

Ngắt dòng ngay cả khi không có khoảng trắng trong văn bản. Nó tương đương với thuộc tính CSS:

word-wrap: break-word;
word-break: break-word;

Ví dụ:

<div class="text-break" style="width: 250px; border: 1px solid #ccc; padding: 10px">
     Đâylàmộtđoạnvănbảndài,nótựđộngxuốngdòngkhihếtchỗ.
</div> 

Kết quả:

Bảng tổng hợp nhanh các loại định dạng Text Bootstrap

5 lưu ý quan trọng khi sử dụng Text trong Bootstrap

• Text Bootstrap sẽ không thể ghi đè inline CSS: Nếu phần tử HTML có style CSS nội bộ như style=”color:red”, thì .text-* sẽ không có tác dụng
• Sử dụng màu nền và màu chữ tương phản tốt: Tránh kết hợp màu chữ và màu nền không có sự tương phản, gây khó khăn trong việc nhận biết. Ví dụ nền tối với chữ tối (bg-dark + text-dark) hoặc nền sáng với chữ sáng
• Text Bootstrap không làm thay đổi bản chất thẻ HTML: Dùng .h1, .display-1, .fw-bold… chỉ thay đổi về mặt giao diện, không thay đổi ngữ nghĩa HTML. Nếu trường hợp cần giữ ngữ nghĩa tiêu đề (ví dụ trong SEO), nên dùng thẻ <h1>, <h2>,…
• Kết hợp hợp lý với padding/margin: Khi sử dụng Text Bootstrap, bạn có thể kết hợp với các định dạng về padding/margin để văn bản được hiển thị đẹp mắt hơn
• Sử dụng nhất quán các class: Tránh việc định dạng văn bản một cách tùy hứng bằng CSS riêng lẻ khi Bootstrap đã cung cấp các class tương ứng. Việc này giúp duy trì sự đồng nhất về mặt giao diện trên toàn bộ trang web và dễ dàng bảo trì hơn.

Câu hỏi thường gặp về text bootstrap

Có thể tùy chỉnh kích thước font chữ ngoài các class có sẵn không?

Ngoài việc sử dụng các class Bootstrap như .fs-1 đến .fs-6, bạn hoàn toàn có thể tùy chỉnh kích thước văn bản bằng inline CSS hoặc sử dụng class CSS tùy chỉnh riêng.

Ví dụ để văn bản có kích thước 1.5rem (1.5 lần kích thước phông chữ của phần tử gốc <html>):

.custom-text-large {
    font-size: 1.5rem;
}

Có thể kết hợp nhiều lớp CSS text trong Bootstrap cùng lúc không?

Bootstrap được thiết kế theo triết lý “utility-first”, nghĩa là cung cấp các class nhỏ, độc lập, thực hiện một chức năng cụ thể. Vì vậy bạn có thể kết hợp các class Bootstrap với nhau để tạo ra các kiểu dáng phức tạp mà không cần viết CSS tùy chỉnh.

Ví dụ 1: kết hợp giữa định dạng màu chữ và màu nền

<div class="bg-primary text-white p-2">Nền màu xanh chủ đạo + chữ trắng</div>
<div class="bg-light text-dark p-2 mt-2">Nền xám sáng + chữ đen</div>
<div class="bg-dark text-warning p-2 mt-2">Nền đen + chữ vàng</div>   

Kết quả:

Ví dụ 2: kết hợp giữa định dạng kích thước và kiểu dáng chữ

<p class="fw-bold fst-italic">Chữ in đậm và in nghiêng</p>
<p class="fw-light text-uppercase">Chữ mảnh và viết in hoa</p>
<p class="fw-normal text-capitalize">Chữ thường và viết hoa chữ cái đầu</p>

Kết quả:

Làm thế nào để xử lý văn bản quá dài vượt khung trong Bootstrap?

Bootstrap cung cấp nhiều class định nghĩa sẵn để xử lý khi văn bản có độ dài vượt quá khung chứa, tùy vào nhu cầu của dự án mà bạn có thể lựa chọn những cách sau:

• .text-wrap: tự động xuống dòng văn bản (xuống dòng theo khoảng trắng)
• .text-truncate: cắt bớt văn bản và hiển thị dấu “…”, yêu cầu phần tử phải có max-width hoặc width, và overflow: hidden
• .text-break: ngắt dòng (không phân biệt có khoảng trắng hay không)

Có thể thay đổi font chữ mặc định của Bootstrap không?

Bootstrap sử dụng font mặc định là system-ui (hoặc -apple-system, Segoe UI, Roboto,…) để đảm bảo giao diện đồng bộ trên các nền tảng. Tuy nhiên, nếu bạn muốn đổi sang font khác để phù hợp với nhu cầu dự án thì bạn có thể thực hiện theo nhiều cách như sau:

Ghi đè các selector CSS trực tiếp

Đây là cách đơn giản và nhanh nhất, dùng CSS để ghi đè lại thuộc tính font-family cho từng phần tử HTML mà bạn muốn áp dụng font chữ mới, hoặc sử dụng cho body để tự động áp dụng cho toàn bộ trang.

<style>
  body {
    font-family: "tên font chữ mới", sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: "tên font chữ mới", sans-serif;
  }
  p {
    font-family: "tên font chữ mới", sans-serif;
  }
</style>

Ghi đè biến CSS (khuyến nghị)

Bootstrap 5 sử dụng các biến CSS (CSS variable) để quản lý nhiều thuộc tính, bao gồm cả font chữ. Bạn có thể ghi đè các biến này bằng CSS tùy chỉnh của mình.

:root {
  --bs-font-sans-serif: 'Tên font chữ mới', sans-serif;
}

Ghi đè theo từng thành phần

Nếu bạn chỉ muốn thay đổi font ở một phần cụ thể (ví dụ tiêu đề, navbar, content), có thể thêm class riêng.

<style>
.custom-font {
  font-family: ‘tên font mới’, sans-serif;
}
</style>

<div class=“custom-font”>
  Đây là phần văn bản dùng font khác.
</div>

* sans-serif được phía sau trong font-family đóng vai trò dự phòng (fallback), khi font chính không tải được, trình duyệt sẽ tự động sử dụng font mặc định để hiển thị.

Tuy nhiên, điều tiên quyết đầu tiên là bạn cần nhúng font chữ mới vào dự án của mình, nếu không thì việc thay đổi font sẽ không có hiệu lực – trình duyệt sẽ không thể nhận biết và hiển thị đúng font mong muốn. Có hai cách phổ biến để nhúng font:

Online

Dùng Google Fonts (kho font chữ miễn phí, dễ dàng tích hợp cho mọi dự án). Truy cập tại đây để lựa chọn font phù hợp và nhúng đường dẫn vào <head> của trang web. Ví dụ:

<head><link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro&display=swap" rel="stylesheet">
</head>

Offline

Tải font chữ về và tự nhúng font từ file .ttf, .woff, .woff2 bằng thuộc tính @font-face, sau đó sử dụng trong CSS:

@font-face {
  Font-family: ‘FontTuyChinh’;
  src: url('/fonts/FontTuyChinh.woff2') format('woff2'),
       url('/fonts/FontTuyChinh.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  Font-family: ‘FontTuyChinh’, sans-serif;
}

Tổng kết

Bootstrap đã cung cấp nhiều class định dạng văn bản mạnh mẽ, linh hoạt và dễ sử dụng, giúp quá trình phát triển trang web được thực hiện nhanh chóng và có sự nhất quán. Qua bài viết này, ITViec hi vọng đã mang đến cho bạn đọc những nội dung bổ ích về định dạng văn bản sử dụng Text Bootstrap, từ đó bạn có thể lựa chọn những cách thức phù hợp cho dự án của mình và nâng cao trải nghiệm của người dùng.