Exploring Bootstrap: Building Modern Responsive Websites. Second Part: Typography

Let's continue to develop and style our product page using Bootstrap classes. In this second part of this series, we will talk about typography and text utilities.

All parts:

1.  Exploring Bootstrap: Building Modern Responsive Websites. First Part: Introduction to the Grid System
2.   Exploring Bootstrap: Building Modern Responsive Websites. Second Part: Typography
3.  Exploring Bootstrap: Building Modern Responsive Websites. Third Part: Spacing Utilities
4.  Exploring Bootstrap: Building Modern Responsive Websites. Fourth Part: Border Utilities

Headings

We've added two headings so far, h1 and h2. They are already styled with the Bootstrap typography. All h1 through h6 headings are available. Bootstrap also provides .h1 through .h6 classes to style elements that aren't headings. 

To make the company name stand out and give it a larger size, we can utilize the .h2 class. By applying this class to the paragraph element, we can achieve the desired effect:

<p class="h2">Blissful Beginnings</p>

This will make the company name appear with a larger font size, following the styling provided by Bootstrap's .h2 class.

Text Utilities

Bootstrap has quite a few text utilities that make it easy to control font size and weight and to align and wrap the text. Let's explore them.

Text Alignment

With Bootstrap, we can easily align the text with the .text-center, .text-start, and .text-end classes. Let's center align the h1 heading and the paragraph containing the price in the small devices and then realign it to the left for medium devices and up. We can achieve this by using the .text-center and .text-md-start classes:

<h1 class="text-center text-md-start">Pink Guitar Last Bash in Nash Bachelorette Invitation</h1>

<p class="text-center text-md-start">$3.90</p>

By applying these classes, the text will be centered on small devices and left-aligned on medium devices and up, ensuring a responsive and visually pleasing layout.

Text Transform

You can transform text with text capitalization classes: .text-lowercase, .text-uppercase, and .text-capitalize. In our case, we can use the .text-uppercase class to capitalize the shop name and the text of the Add to Cart button. Here's how we can apply these classes:  
For the shop name:

<p class="h2 text-uppercase">Blissful Beginnings</p>

For the Add to Cart button:

<button type="submit" class="btn btn-dark text-uppercase">Add to cart</button>

By adding the .text-uppercase class, the text will be transformed to uppercase, giving it a different visual style. This can be useful for emphasizing certain elements or achieving a consistent design throughout the page.

Font Size

We can easily change the font size of our text using font-size utilities. The font-size of an element can be easily changed using the .fs-* classes. There are six available classes from .fs-1 to .fs-6, where the .fs-1 class sets the biggest font size, while the .fs-6 class sets the smaller font size. Let's apply such a class to the paragraph containing the price:

<p class="fs-2 text-center text-md-start">$3.90</p>

Font Weight

The .font-weight utilities change the font weight of the element. They are abbreviated as .fw-*. Let's make the name of our shop bold:

<p class="h2 text-uppercase fw-bold ">Blissful  Beginnings</p>

Also, let's apply this class to the h1 heading, too:

<h1 class="fw-bold text-center text-md-start">Pink Guitar Last Bash in Bachelorette Invitation</h1>

Conclusion:

In conclusion, in this second part of our series, we explored the typography and text utility classes provided by Bootstrap. We learned how to style headings using predefined classes, capitalize text, align text using text alignment classes, adjust font size using font-size utilities, and change font weight using font-weight classes.

By leveraging these Bootstrap classes, we can easily customize the appearance of our text and create visually appealing and consistent designs. The flexibility and simplicity of Bootstrap's typography and text utilities allow us to enhance the readability and aesthetics of our web pages with minimal effort.

In the next part of our series, we will delve into the power of Bootstrap's responsive design features and explore how we can create a responsive layout for our product page. Stay tuned for more exciting Bootstrap techniques!