Centering in Bootstrap 5 isnt difficult. Its part of typography. Heres everything you need to know about typography in Bootstrap 5.
Centering in Bootstrap 5 isn't difficult. It's part of typography. Here's everything you need to know about typography in Bootstrap 5 .
Bootstrap is renowned as an excellent framework for web development. It includes HTML, CSS, and JavaScript. Using Bootstrap alone, you have a complete set of templates for developing responsive websites.
However, to ensure your work goes smoothly, you need to take the time to learn about the components of Bootstrap first. Typography is an indispensable component. Below are some things you need to know about typography in Bootstrap 5.
- Lesson 1: What is Bootstrap 5?
- Lesson 2: Learning about Containers
- Lesson 3: Grid System in Bootstrap
In this article, we will explore the basic text formatting styles in Bootstrap 5, Bootstrap 's default text settings , headings h, and many other formatting options.
Bootstrap 5 default settings
Bootstrap 5 uses a default font size of 1rem (16px) and a corresponding line height of 1.5 ( this differs from Bootstrap 4, which uses a default font size of 15 ).
In addition, all elements of
They both have margin-top: 0and margin-bottom: 1rem(default is 16px).
Card
arrive
Bootstrap 5 uses HTML heading formatting.
arrive
) with bolder font and responsive font size:
- h1 (2.5rem = 40px)
- h2 (2rem = 32px)
- h3 (1.75rem = 28px)
- h4 (1.5rem = 24px)
- h5 (1.25rem = 20px)
- h6 (1rem = 16px)
The usage of this `h` tag is similar to that in HTML:
Content that needs to be highlighted
TipsMake.com
TipsMake.com
TipsMake.com
TipsMake.com
TipsMake.com
You can run this complete HTML file to see what the `h` tags in Bootstrap look like:
Ví dụ Bootstrap The font size of Bootstrap headings depends on screen size. Try resizing your browser window to see the effect.
h1 TipsMake.com.com
h2 TipsMake.com.com
h3 TipsMake.com.com
h4 TipsMake.com.com
h5 TipsMake.com.com
h6 TipsMake.com.com
We have the following result:
Additionally, you can also use the .h1`coming` class .h6on different tags to make them function 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 the complete HTML 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 are the results:
Display in Heading
Classes .displayare used when you want to further highlight content. Compared to a regular ``.display-1 tag, it will have a larger font-size, a thinner font-weight, and there are 6 classes to choose from: `` .display-6, .
To use these classes, you will use the following code in the section:
Display the titles
Compared to a regular tag, when combined with the `display` class, you'll see text with a larger font size and a thinner font weight.
TipsMake.com
TipsMake.com
TipsMake.com
TipsMake.com
TipsMake.com
TipsMake.com
When placed in the complete HTML file as shown below:
Ví dụ Bootstrap Display heading card
Examples of display heading tags:
TipsMake.com
TipsMake.com
TipsMake.com
TipsMake.com
We will get the following result:
Card
In Bootstrap 5, the HTML element (or class .small) is used to create secondary text that is lighter than any of the `` tags. To use `small`, simply add the text between the `` and `` tags: `` and ``.
TipsMake.com uses the small tag.
TipsMake.com uses the small tag.
TipsMake.com uses the small tag.
TipsMake.com uses the small tag.
TipsMake.com uses the small tag.
TipsMake.com uses the small tag.
Let's assume we have a complete HTML file like this:
Ví dụ Bootstrap Examples of small
How to use `small` in the `h` tag:
TipsMake.com VD small
TipsMake.com VD small
TipsMake.com VD small
TipsMake.com VD small
TipsMake.com VD small
TipsMake.com VD small
When you run the file above, you will get the result shown in the screenshot below:
Card
Bootstrap 5 will style elements and classes .markwith a yellow background color and add padding. To use marks, simply place the text you want to highlight between the tag tags.And/or place the .mark class tag where you need to mark it. Let's assume we have a complete HTML file like this:
Ví dụ Bootstrap Highlight the text
Use marks tohighlightdocument.
TipsMake.com
The image below shows the result after running the file.
Card
If you want to mark a piece of text as an abbreviation in Bootstrap 5, simply place it between theand tags . The text will then be underlined with a line of dots, and when you hover your mouse over it, you will see the full word.
Complete HTML file:
Ví dụ Bootstrap Abbreviations
The abbr tag is used to mark abbreviations:
QTM was founded in 2003.
The result will be as follows:
Card
Tags and classes .blockquoteare used when you want to quote sections of content from another source. And when naming a source, such as " From TipsMake.com ", use the class .blockquote-footer:
The text to be quoted
Source
The complete HTML file would look like this:
Ví dụ Bootstrap Examples of Blockquotes
The following paragraph uses blockquotes to quote an introduction
to TipsMake.com from the TipsMake.com website:
Originally a website providing knowledge about networks, servers, network devices, and computer tips, TipsMake.com has now become a social network for science and technology, expanding its content to meet the needs of members in many more technology fields such as phones, smart devices, electronics, computer security, etc.
Website TipsMake.com.com
We will get the following result:
Card
When you need to create a list with different levels in Bootstrap, you will use `` dl. The usage is as follows:
- List 1
- - child of list 1
- List 2
- - child of list 2
You can try running the following HTML file to see the result:
Ví dụ Bootstrap Example of creating a list
dl helps create a list:
- Application
- - Word
- - Excel
- Operating system
- - Windows
- - Linux
The output when running the file above is shown below:
Card
The content within the tags is now complete. 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 - TipsMake.com.com Code quote
Code snippets will be embedded within the code tag:
The Python programming language provides two types of loops: loops forand loops while. Using these loops along with loop control statements like breakand , continueyou can create different types of loops.
We will get the following result:
Card
In computer tutorials, you may need to use keyboard keys. To highlight the keys and the content you need to enter, you can use the `kbd` tag ; the content within the `kbd` tag will be converted to white text on a black background.
Ví dụ Bootstrap - TipsMake.com.com kbd card
Click Windows + Rto open the Run window.
The phrase " Press Windows + R to open the Run window " will then be displayed as follows:
Card
Card
This is used when you want to quote multiple lines of code. You just need to put the code you want to write between the tags.
And that's it, pretty simple:
Ví dụ Bootstrap - TipsMake.com.com Write multiple lines of code
When you need to quote multiple lines of code, you use `pre`. The example below is a Python code snippet:
# Receive user input until they enter a vowel nguyenAm = "aeiouAEIOU" # Infinite loop while True: m = input("Enter a vowel: ") # Condition in the middle of the code block if m in nguyenAm: break print("This is not a vowel. Try again!") # Code by TipsMake.com print("That's right, thank you!")
Running the file above gives us this result:
Other classes in Bootstrap 5
You can use some of the following Bootstrap 5 classes to style your HTML elements:
| Class | Description |
|---|---|
.lead |
Làm nổi bật một đoạn văn (font chữ to hơn) |
.text-start |
Căn lề trái văn bản |
.text-break |
Ngăn văn bản dài phá vỡ bố cục (ép ngắt dòng văn bản dài để vừa với chiều rộng màn hình) |
.text-center |
Căn giữa văn bản |
.text-decoration-none |
Xóa gạch chân khỏi liên kết |
.text-end |
Căn phải văn bản |
.text-nowrap |
Không wrap văn bản |
.text-lowercase |
Viết thường toàn bộ văn bản |
.text-uppercase |
Viết hoa toàn bộ văn bản |
.text-capitalize |
Viết hoa chữ cái đầu |
.initialism |
Hiển thị văn bản bên trong phần tử |
.list-unstyled |
Xóa kiểu danh sách mặc định và lề trái trên các mục danh sách (làm việc trên cả |
.list-inline |
Đặt tất cả các mục danh sách trên một dòng (được sử dụng cùng với .list-inline-item trên mỗi phần tử
|
The following classes are used in Bootstrap 4.
| Class | Describe |
| .font-weight-bold | Bold text |
| .font-weight-bold | bolder text |
| .font-italic | Italicized text |
| .font-weight-light | The letters have thinner strokes than regular letters. |
| .font-weight-lighter | The letters have even thinner strokes. |
| .font-weight-normal | Normal text |
| .lead | Highlight a section of text (larger font size) |
| .small | Reduce the font size (to about 80% of its normal size). |
| .text-left | Align text to the left |
| .text-*-left | Align text to the left on small, medium-large, or very large screens. |
| .text-break | Prevent long text from breaking the layout (force line breaks for long text to fit the screen width) |
| .text-center | Center 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 | Align text |
| .text-monospace | Convert the text to Monospaced style. |
| .text-nowrap | Do not wrap text. |
| .text-lowercase | Print the entire document normally. |
| .text-reset | Reset the color of the text or link (inheriting the color from its original). |
| .text-uppercase | Capitalize the entire text. |
| .text-capitalize | Capitalize the first letter. |
| .initialism | Display the text inside the element in a slightly smaller font size. |
| .list-unstyled | Remove the default list style and left margin on list items (works on both). and This class only applies to sublist items that are using the class (to remove the default list style from any nested list, apply this class to any nested list). |
| .list-inline | Place all list items on a single line (used in conjunction with `.list-inline-item` on each element).
|
| .pre-scrollable |
Make the element It is rollable. |
Sass
Variables
Headings have several specialized variables for adjusting 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;The 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