- Exploring Bootstrap: Building Modern Responsive Websites. First Part: Introduction to the Grid System
- Exploring Bootstrap: Building Modern Responsive Websites. Second Part: Typography
- Exploring Bootstrap: Building Modern Responsive Websites. Third Part: Spacing Utilities
- Exploring Bootstrap: Building Modern Responsive Websites. Fourth Part: Border Utilities
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
.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
With Bootstrap, we can easily align the text with the .
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
<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.
You can transform text with text capitalization classes:
.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.
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-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 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>
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!