Exploring Bootstrap: Building Modern Responsive Websites. Fourth Part: Border Utilities

In this article, we will finish adding HTML to our product page and discuss how we can add borders to our elements using Bootstrap border 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

Let's first add the rest of HTML to our product page by adding a coupon code, a description, product characteristics, and information about shipping and returns. We want to give our customers the best deals, so let's offer them a coupon. Please first add bottom padding to the Add to Cart form: 

<form class="row pb-5">
   ...
</form>

After this, we'll add a new paragraph: 

<p class="pb-4">40% off with code 40OFF</p>

Next, we'll add a div with a description:

<div class="pt-4 pb-4">
  <h3 class="mb-4 h6 fw-bold">Description</h3>
  <p>
    Get ready to rock and roll with the Last Bash in Nash! A
    destination bachelorette weekend is the perfect way to celebrate the
    bride-to-be in style. Featuring a bold pink guitar design and the text
    "Last Bash in Nash", this invitation is sure to set the tone for a fun
    and unforgettable weekend.
  </p>
  <p>
    On the front of the invitation, you can personalize all the important details,
    including the event place, date, time, and location. And on the back,
    you can write a detailed program of all the activities planned for the
    weekend.
  </p>
</div>

And after this, another div containing information about the paper type and its size:

<div class="pt-4 pb-4">
  <p class="fw-bold mb-0">Paper type:</p>
  <p class="mt-0">Matte</p>
  <p class="fw-bold mt-4 mb-0">Size:</p>
  <p class="mt-0 mb-0">5" x 7"</p>
</div>

And another div containing shipping and return info:

<div class="pt-4 pb-4">
  <h3 class="h6 fw-bold">Free shipping, free returns</h3>
  <p class="mb-0">We offer free shipping for all orders. Your order will be despatched
    within 3
    working days.
    Free returns are available worldwide.</p>
</div>

To finish the page, let's add a footer after the main element:

<footer class="text-center mt-5 pt-5 mb-5">© 2023 Blissful Beginnings</footer>

To better delimit the elements on our invitation page, let's add some borders. We can use the Bootstrap border utilities to add or remove borders. 

We can add borders to all sides of an element using the .border class, or to different sides of the elements, using the .border-top, .border-right, .border-bottom, and .border-left classes.

 Let's first add a bottom border to the header. Also, let's add some padding at the bottom:

<header class="mt-5 pb-4 border-bottom">
   ...
</header>

Bootstrap has also a class to remove borders from elements: .border-0, .border-top-0, .border-right-0, .border-bottom-0, and .border-left-0.

Next, we'll add a top and a bottom border to the div containing the description:

<div class="pt-4 pb-4 border-top border-bottom">
    ...
</div>

Then we'll add a bottom border to the div containing information about the paper used for the invitation:

<div class="pt-4 pb-4 border-bottom">
  ...
</div>

At last, we'll add a top border to the footer:

<footer class="text-center mt-5 pt-5 mb-5 border-top">© 2023 Blissful Beginnings</footer>

In conclusion, we have explored the power of Bootstrap's border utilities to enhance the visual appearance of elements on our product page. By utilizing classes such as .border, .border-top, .border-bottom, and .rounded-0, we were able to add and remove borders as needed, as well as customize the rounded corners of elements.

Borders can provide a clean and organized look to our page, helping to separate and define different sections of content. Additionally, by removing rounded corners using the .rounded-0 class, we can achieve a more modern and angular design.

With Bootstrap's border utilities, we have the flexibility to easily control the borders and corners of our elements, allowing us to create visually appealing and well-structured web pages.