Bootstrap 5文本字体大小

Bootstrap 5文本字体大小是用来设置文本字体大小的。我们都知道，我们有6个不同的标题标签，根据这些标签，我们有6个类来设置字体大小。标题类应用了font-size、font-weight和line-height属性。

文本字体大小类：

fs-1: 这个类是用来设置文本大小等于h1标签的。
fs-2：该类用于设置与h2标签相等的文本大小。
fs-3：该类用于设置与h3标签相等的文本大小。
fs-4: 该类用于设置与h4标签相等的文本大小。
fs-5: 该类用于设置与h5标签相等的文本大小。
fs-6: 该类用于设置与h6标签相等的文本大小。

语法:

<tag class="fs-1">...</tag>

下面的例子说明了Bootstrap 5文本字体的大小。

例子1：在这个例子中，我们将使用三种尺寸fs-1、fs-3和fs-5。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success text-center">
            Geeksforgeeks
        </h1>
        <p class="text-center">
            Geeks Learning Together
        </p>
          
        <!-- Bootsrap Font Size classes used -->
        <u>Font size: fs-1</u>
        <p class="fs-1">
            A Computer Science Portal for Geeks
        </p>
          
        <u>Font size: fs-3</u>
        <p class="fs-3">
            A Computer Science Portal for Geeks
        </p>
          
        <u>Font size: fs-5</u>
        <p class="fs-5">
            A Computer Science Portal for Geeks
        </p>
    </div>
</body>
  
</html>

输出:

Bootstrap 5文本字体大小

例子2：在这个例子中，我们将使用三种尺寸fs-2、fs-4和fs-6。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success text-center">
            Geeksforgeeks
        </h1>
        <p class="text-center">
            Geeks Learning Together
        </p>
          
        <!-- Bootsrap Font Size classes used -->
        <u>Font size: fs-2</u>
        <p class="fs-2">
            A Computer Science Portal for Geeks
        </p>
        <u>Font size: fs-4</u>
        <p class="fs-4">
            A Computer Science Portal for Geeks
        </p>
        <u>Font size: fs-6</u>
        <p class="fs-6">
            A Computer Science Portal for Geeks
        </p>
    </div>
</body>
  
</html>