Center align Bootstrap 5 not difficult. It's part of Typography. Here it is Everything you need to know about Typography in Bootstrap 5.
Bootstrap famous as a great framework in web programming. It includes HTML, CSS and JavaScript. Just by using Bootstrap, you have a full arsenal of programming templates for responsive web development.
However, to make your work easier, you need to spend time learning about the components in Bootstrap first. Among them, Typography is an element that cannot be ignored. Here's what you need to know about Typography in Bootstrap 5.
In this article, we will learn about basic text formatting styles in Bootstrap 5, Bootstrap's default text settings, and tags. h (Heading) and many other formats…
Bootstrap 5 default settings
Bootstrap 5 uses font-size default is 1rem (16px) and its corresponding line-height 1.5 (This is different from Bootstrap 4 which uses a default font-size of 15).
Additionally, all elements of đều có margin-top: 0 and margin-bottom: 1rem (default is 16px).
Card
Bootstrap 5 uses HTML heading formats ( đến
- h1 (2.5rem = 40px)
- h2 (2rem = 32px)
- h3 (1.75rem = 28px)
- h4 (1.5rem = 24px)
- h5 (1.25rem = 20px)
- h6 (1rem = 16px)
How to use this h tag is similar to HTML:
Quantrimang.com
Quantrimang.com
Quantrimang.com
Quantrimang.com
Quantrimang.com
You can run this full html file to see what the h tags in Bootstrap will look like:
Ví dụ Bootstrap
Kích thước phông chữ của Heading Bootstrap phụ thuộc vào kích thước màn hình. Hãy thử thay đổi kích thước cửa sổ trình duyệt để xem hiệu quả.
h2 Quantrimang.com
h3 Quantrimang.com
h4 Quantrimang.com
h5 Quantrimang.com
h6 Quantrimang.com
We have the following result:
Alternatively, you can also use class .h1 arrive .h6 on different tags to make them act as the headings you want:
h1 QuanTriMang.com
h2 QuanTriMang.com
h3 QuanTriMang.com
h4 QuanTriMang.com
h5 QuanTriMang.com
h6 QuanTriMang.com
You can test run the full HTML file code in the content below:
Ví dụ Bootstrap
h1 QuanTriMang.com
h2 QuanTriMang.com
h3 QuanTriMang.com
h4 QuanTriMang.com
h5 QuanTriMang.com
h6 QuanTriMang.com
And here is the result:
Display in Heading
Classes .display used when you want to highlight content further. Because compared to cards h Normally, it will have a larger font-size, thinner font-weight and there are 6 classes to choose from: .display-1 next .display-6.
To use these classes, you will use the following code in section
:
So với thẻ h bình thường, kết hợp với class display, bạn sẽ thấy chữ có font-size lớn hơn, font-weight mảnh hơn
When placed in a full HTML file like below:
Ví dụ Bootstrap
Ví dụ về thẻ display heading:
We will have the following result:
Card
In Bootstrap 5, the HTML element (or you can use class .small) is used to create secondary, lighter text within any h tag. To use small, simply add the text between the pair of tags and :
Quantrimang.comsử dụng thẻ small
Quantrimang.comsử dụng thẻ small
Quantrimang.comsử dụng thẻ small
Quantrimang.comsử dụng thẻ small
Quantrimang.comsử dụng thẻ small
Suppose there is a full html file as follows:
Ví dụ Bootstrap
Cách sử dụng small trong thẻ h:
Quantrimang.com VD small
Quantrimang.com VD small
Quantrimang.com VD small
Quantrimang.com VD small
Quantrimang.com VD small
When running the above file, we will receive results like the photo below:
Card
Bootstrap 5 will style elements and class .mark with yellow background color and added padding. To use mark, you just need to place the text you want to highlight between the pair of tags and or set class .mark Which card do you need to check? Suppose we have a full html file like this:
Ví dụ Bootstrap
Sử dụng mark để làm nổi bật văn bản.
Quantrimang.com
The screenshot below is the result after running the above file.
Card
If you want to mark a piece of text as an acronym in Bootstrap 5, you just need to place it between a pair of tags. and , khi đó đoạn văn bản này sẽ được gạch chân bằng 1 dòng chấm, và khi chỉ chuột vào đó, bạn sẽ thấy từ viết đầy đủ của nó.
File html đầy đủ:
Ví dụ Bootstrap
Thẻ abbr được dùng để đánh dấu từ viết tắt:
QTM ra đời năm 2003.
The result will be as follows:
Card
Card
and class .blockquote used when you want to quote snippets of content from another source. And when naming a source, such as "From website Quantrimang.com", use class .blockquote-footer:
Đoạn văn bản cần trích dẫn
In the full html file it will look like this:
Ví dụ Bootstrap
Đoạn dưới đây sử dụng blockquote để trích dẫn 1 đoạn giới thiệu
về Quantrimang.com từ website Quantrimang.com:
Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...
We will get the result as below:
Card
When you need to create a list with many different levels on Bootstrap, you will use it dl. Usage will be as follows:
- Danh sách 1
- - con của danh sách 1
- Danh sách 2
- - con của danh sách 2
You can try running the following html file to see the results:
Ví dụ Bootstrap
dl giúp tạo 1 list:
- Ứng dụng
- - Word
- - Excel
- Hệ điều hành
- - Windows
- - Linux
We have the output when running the above file as shown below:
Card
Các nội dung nằm trong thẻ sẽ được tô màu đỏ, nổi bật hơn so với các văn bản xung quanh nó. Và hiển nhiên rồi, những nội dung này thường là các thẻ, hàm, phần tử... nào đó của code, bạn chỉ cần đặt chúng trong và
Ví dụ Bootstrap - Quantrimang.com
Các đoạn trích dẫn code sẽ được nhúng trong thẻ code:
Ngôn ngữ lập trình Python cung cấp 2 loại vòng lặp, vòng lặp for và vòng lặp while. Sử dụng những vòng lặp này cùng với câu lệnh điều khiển vòng lặp như break và continue bạn có thể tạo ra những dạng vòng lặp khác nhau.
We will have the following result:
Card
In computer tutorials, you may have to use keyboard keys. To highlight keystrokes and content that needs to be entered, you can use the content in the tag kbd will be converted to white font with black background color.
Ví dụ Bootstrap - Quantrimang.com
Nhấn Windows + R để mở cửa sổ Run.
Then the paragraph "Press Windows + R to open the Run window." will be presented as follows:
Card
Thẻ được dùng khi bạn muốn trích dẫn nhiều dòng code. Bạn chỉ cần đưa đoạn code muốn viết vào giữa thẻ và là xong, khá đơn giản:
Ví dụ Bootstrap - Quantrimang.com Khi cần trích dẫn nhiều dòng code bạn sẽ sử dụng pre. Ví dụ dưới đây là một đoạn code Python:
# Nhận đầu vào từ người dùng cho đến khi họ nhập một nguyên âm nguyenAm = "aeiouAEIOU" # vòng lặp vô hạn while True: m = input("Nhập một nguyên âm: ") # Điều kiện ở giữa khối lệnh if m in nguyenAm: break print("Đây không phải là nguyên âm. Hãy thử lại!") # Code by Quantrimang.com print("Chuẩn rồi, cảm ơn bạn!")Running the above file we have results like this:
Some other classes in Bootstrap 5
You can use some other Bootstrap 5 classes below to style HTML elements:
| Class | Description |
|---|---|
.lead |
Highlight a paragraph (bigger font) |
.text-start |
Align text left |
.text-break |
Prevent long text from breaking the layout (force long text line breaks to fit screen width) |
.text-center |
Center the text |
.text-decoration-none |
Remove underlines from links |
.text-end |
Right-align text |
.text-nowrap |
Do not wrap text |
.text-lowercase |
Lowercase all text |
.text-uppercase |
Capitalize all text |
.text-capitalize |
Capitalize the first letter |
.initialism |
Displays text inside the element |
.list-unstyled |
Remove default list style and left margin on list items (works on both
). This class only applies to child list items that are using the class (to remove the default list style from any nested lists, apply this class to any nested lists). |
.list-inline |
Put all list items on one line (used with .list-inline-item on each element
|
The other classes below are used on Bootstrap 4
| Class | Describe |
| .font-weight-bold | Bold letters |
| .font-weight-bolder | The text is bolder |
| .font-italic | Italicized text |
| .font-weight-light | Letters have thinner strokes than regular letters |
| .font-weight-lighter | The letters have thinner strokes |
| .font-weight-normal | Normal letters |
| .lead | Highlight a paragraph (bigger font) |
| .small | Make the text smaller (about 80% of the normal size) |
| .text-left | Align text left |
| .text-*-left | Left-align text on small, medium-large, or very large screens. |
| .text-break | Prevent long text from breaking the layout (force long text line breaks to fit screen width) |
| .text-center | Center the text |
| .text-*-center | Center text on small, medium-large, or very large screens. |
| .text-decoration-none | Removes the underline from a link |
| .text-right | Right-align text |
| .text-*-right | Right-align text on small, medium-large, or very large screens. |
| .text-justify | Justify text |
| .text-monospace | Convert text to Monospaced style |
| .text-nowrap | Do not wrap text |
| .text-lowercase | Print all text in lower case |
| .text-reset | Reset the color of text or link (inherits color from its parent) |
| .text-uppercase | Print all text in caps |
| .text-capitalize | Capitalize the first letter |
| .initialism | Displays text inside the element in a slightly smaller font size. |
| .list-unstyled | Remove default list style and left margin on list items (works on both
|
| .list-inline | Put all list items on one line (used in conjunction with .list-inline-item on each element
|
| .pre-scrollable |
Make element
có thể cuộn được. |
Sass
Variables
Heading has a number of specialized variables to adjust size and spacing.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;Typography elements included here and in Reboot also have dedicated variables:
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;Previous article: Grid System in Bootstrap
