Văn bản bên phải bootstrap 5

Trong phát triển web, Bootstrap là một trong những framework nổi tiếng nhất của CSS. Nó được sử dụng để thiết kế và tạo các trang web có thiết kế tuyệt vời và khả năng đáp ứng đầy đủ. Nó được sử dụng trong quá trình phát triển giao diện người dùng, giúp tạo các trang web rất dễ dàng mà không cần quá nhiều HTML và CSS. Nó tương thích với hầu hết các trình duyệt. Bootstrap-5 là phiên bản mới nhất hiện có. Nó có một lớp chứa là phần quan trọng nhất của mã hoàn chỉnh

Nó có rất nhiều lớp có thể được sử dụng trực tiếp trong lớp và các định nghĩa của chúng đã được định nghĩa trong tài liệu của Bootstrap

Căn chỉnh nút ở bên phải của hộp văn bản

Đối với bất kỳ phần nào, nếu chúng ta muốn căn chỉnh vị trí của nó thì chúng ta có thể sử dụng lớp float. Chúng tôi sử dụng lớp float-end để căn chỉnh nút sang bên phải. Nếu chúng ta muốn căn nó sang bên trái, chúng ta có thể sử dụng lớp float-start

Chúng ta sẽ xem mã HTML để hiểu lớp float-end

ví dụ 1

đầu ra

Văn bản bên phải bootstrap 5

Giải trình

Trong mã HTML ở trên, chúng tôi đã sử dụng Bootstrap để thiết kế một trang web bình thường có hai trường đầu vào và một nút gửi. Trong phần nội dung, chúng tôi đã sử dụng lớp chứa chứa tất cả mã. Chúng tôi đã sử dụng

thẻ để thiết kế biểu mẫu trên trong đó trường nhập đầu tiên là loại văn bản và một trường khác là loại số. Sau đó, chúng tôi đã lấy một nút với một số tên lớp để thiết kế trực tiếp bằng Bootstrap. Trong thẻ nút này, chúng tôi đã đề cập đến tên lớp float-end, lớp này sẽ căn chỉnh nó sang bên phải

Ghi chú. Đối với Bootstrap-3 và Bootstrap-4, chúng ta có thể text-right class để căn chỉnh bất kỳ phần tử nào sang bên phải. Nhưng text-right không hoạt động trong Bootstrap-5

ví dụ 2

đầu ra

Văn bản bên phải bootstrap 5

Giải trình

Trong đoạn mã trên, chúng tôi đã sử dụng cùng một mã, nhưng trong thẻ nút, chúng tôi đã sử dụng lớp text-right thay vì lớp float-right. Trong Bootstrap-2 hoặc Bootstrap-3, lớp text-right được sử dụng để căn chỉnh bất kỳ phần tử nào sang bên phải. Nhưng trong Bootstrap-5, lớp này được thay thế bằng lớp float-right để canh lề phải. Vì vậy, chúng tôi đã thử đoạn mã trên trong Bootstrap-5. Nó không hoạt động và theo mặc định, nút này được căn chỉnh về phía bên trái của hộp văn bản

Các lớp căn chỉnh văn bản Bootstrap 5 được sử dụng để sắp xếp lại các thành phần với biến thể bắt đầu, kết thúc và trung tâm. Nó có thể được sử dụng trong các điểm dừng chiều rộng khung nhìn giống như hệ thống lưới

Bootstrap 5 Các lớp căn chỉnh văn bản. Ở đây * có thể thay thế bằng start, end và center và ** có thể thay thế bằng sm, md, lg & xl

  • chữ-*. Lớp này được sử dụng để căn chỉnh thành phần bắt đầu, trung tâm hoặc kết thúc
  • chữ-**-*. Lớp này được sử dụng để căn chỉnh thành phần ở đầu, giữa hoặc cuối tùy thuộc vào kích thước màn hình

cú pháp

...

Ghi chú. Lớp này sẽ hoạt động trên các đoạn văn, tiêu đề và các phần tử neo

Các ví dụ dưới đây minh họa Căn chỉnh Văn bản

ví dụ 1. Trong ví dụ này, chúng ta sẽ căn chỉnh văn bản sang bên phải bằng cách sử dụng lớp text-end

HTML




<html>

 

<head>

    <1 23

4

5_______1_______638 93

<1

5_______2_______33<5<6

<7head>

 

<3_______2 html3_______1_______3html5>

    <html9 html3_______1_______3>2>

5_______4_______5

    <7_______3_______9>

    < 2 html3_______1_______3_______5_______5>

5_______2__________ 9<0 9>

    <7_______5_______2>

    < 9 html3_______1_______3head2head3 9>

    < 9 html33head2>

5_______4_______4

    <7_______5_______9>

<7html2>

<7html>

đầu ra

Văn bản bên phải bootstrap 5

ví dụ 2. Trong ví dụ này, chúng tôi sẽ sử dụng tất cả các lớp căn chỉnh để xem tác động của các lớp này

Làm cách nào để làm cho văn bản phản hồi nhanh trong Bootstrap 5?

Bạn có thể làm cho văn bản phản hồi nhanh trong Bootstrap bằng cách sử dụng đơn vị vw hoặc truy vấn phương tiện . Kích thước văn bản có thể được đặt bằng đơn vị vw, có nghĩa là "chiều rộng khung nhìn". Viewport là kích thước cửa sổ trình duyệt. 1vw = 1% chiều rộng khung nhìn.

Cài đặt văn bản Bootstrap 5 mặc định là gì?

Bootstrap 5 Cài đặt mặc định . 5 font-size of 1rem (16px by default), and its line-height is 1.5 . Ngoài ra, tất cả các phần tử

Làm cách nào để căn giữa văn bản trong cột Bootstrap?

Sử dụng d-flex justify-content-center trên div cột của bạn . Điều này sẽ căn giữa mọi thứ bên trong cột đó. Nếu bạn có văn bản và hình ảnh bên trong cột, bạn cần sử dụng d-flex justify-content-center và text-center.

Làm cách nào để ngắt văn bản trong Bootstrap?

Ngắt từ . ngắt văn bản để đặt ngắt tràn. ngắt từ (và ngắt từ. ngắt từ để tương thích với IE & Edge).