Introduction:
In web design, centering content both horizontally and vertically is a common requirement. By utilizing additional CSS properties in conjunction with Bootstrap, we can achieve this easily. In this article, we will explore a practical example of centering contents on a webpage using Bootstrap and demonstrate the process step by step.

Step 1: Setting up the HTML structure:
To get started, create a new HTML file and paste the following code:

<!DOCTYPE html>
<html>
<head>
  <title>User Profile Card</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .card {
      width: 300px;
      text-align: center;
    }
    .card-img-top {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 200px;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      <img src="profile-picture.jpg" class="card-img-top" alt="Profile Picture">
      <div class="card-body">
        <h5 class="card-title">Fetty Dev</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in quam enim.</p>
        <a href="#" class="btn btn-primary">View Profile</a>
      </div>
    </div>
  </div>
</body>
</html>

Step 2: Understanding the CSS classes:
In this code, we have defined CSS classes that work in conjunction with Bootstrap to center the content. Let's understand them:

.container: This class is applied to the outer container div and uses flexbox properties to horizontally and vertically center its contents. The display: flex; property creates a flex container, justify-content: center; centers the content horizontally, and align-items: center; centers the content vertically.
.card: This class is applied to the card element and ensures it has a fixed width of 300px and is horizontally centered using text-align: center;.
.card-img-top: This class centers the image within the card. The display: block; property ensures the image is treated as a block element, while margin-left: auto; and margin-right: auto; center align the image horizontally within the card. The max-width and height properties can be adjusted to control the size of the image.

Step 3: Applying the CSS to center contents:
The CSS classes defined in the previous step can be directly applied to your own HTML structure. Ensure that you have referenced the Bootstrap CSS file in the <head> section of your HTML document.

By utilizing the .container, .card, and .card-img-top classes as shown in the code, you will be able to center the contents both horizontally and vertically on your webpage.

Conclusion:
Centering contents both horizontally and vertically on a webpage is an important aspect of web design. By utilizing the flexibility of CSS and leveraging Bootstrap's responsive framework, we can achieve this in a straightforward manner. By understanding and applying these techniques, you can create visually appealing and balanced web layouts.

How to Center Contents Both Horizontally and Vertically on a Webpage Using Bootstrap, utilizing additional CSS properties