Font Size Utilities Bootstrap
In Bootstrap 4, font size utilities are used to quickly change the size of text. These utilities are predefined classes that can be applied to HTML elements to adjust their font size without writing custom CSS. Here are the font size utility classes available in Bootstrap 4:
.font-size-1: This sets the font size to a smaller scale..font-size-2: This sets the font size to a small scale..font-size-3: This sets the font size to a medium scale..font-size-4: This sets the font size to a large scale..font-size-5: This sets the font size to a larger scale..font-size-6: This sets the font size to the largest scale.
Examples
Here are some examples demonstrating how to use these classes in HTML:
Example 1: Using .font-size-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Font Size Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p class="font-size-1">This is a paragraph with font size 1.</p>
</body>
</html>
Example 2: Using .font-size-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Font Size Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p class="font-size-3">This is a paragraph with font size 3.</p>
</body>
</html>
Example 3: Using .font-size-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Font Size Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p class="font-size-5">This is a paragraph with font size 5.</p>
</body>
</html>
Notes
- The specific size values for each class (
font-size-1tofont-size-6) are defined in Bootstrap's CSS and may vary depending on the version and customization. - These classes make it easy to apply consistent typography styles across your project without needing to write additional CSS.
These utility classes can help streamline the process of styling text in your web projects, ensuring consistency and reducing the need for custom CSS.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Copyright 2023-2025 © All rights reserved.