How to Center Contents Both Horizontally and Vertically on a Webpage Using Bootstrap, utilizing additional CSS properties
Tags: bootstrap, css, webdev, beginners
Published: 2023-06-09 13:02:24

**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.

![centering a div element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txabc4a7tf13ivqkgodd.JPG)
**Step 1: Setting up the HTML structure:**
To get started, create a new HTML file and paste the following code:

```html
<!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.