Bootstrap typography provides a straightforward way to style text on web pages. You can use Bootstrap typography to customize the font family, font size, and text alignment of the text elements on your website.
Font Family
The default font family used by Bootstrap is “Helvetica Neue,” Helvetica, Arial, sans-serif. However, you can easily change this to any other font family by adding a class to the text element. For example, if you want to use the font family “Open Sans,” you can add the following class to your CSS:
font-family: 'Open Sans', sans-serif;
This will apply the “Open Sans” font family to the text element. You can substitute “Open Sans” with any other font family that you prefer.
Font Size
Bootstrap comes with predefined font sizes that you can use to style text. These sizes range from 12px to 36px, making it easy to set the font size of your text elements. You can use the following classes to set the font size:
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
These classes apply predefined font sizes to the corresponding HTML heading elements. In addition, you can set a custom font size by adding a class to the text element. For example, if you want to set the font size of a paragraph to 20px, you can add the following class to your CSS:
font-size: 20px;
This will apply the font size of 20px to the text element.
Text Alignment
Bootstrap provides several classes for text alignment. These classes include:
- .text-left: Aligns the text to the left.
- .text-center: Centers the text.
- .text-right: Aligns the text to the right.
- .text-justify: Justifies the text.
For example, if you want to center-align a paragraph, you can add the following class to your CSS:
text-center
This will center-align the paragraph text.
Conclusion
Bootstrap typography provides a convenient way to style text on web pages. By using the classes mentioned above, you can easily change the font family, font size, and text alignment of your text elements. With these tools, you can make your website look professional and polished.
