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. Thedisplay: flex;property creates a flex container,justify-content: center;centers the content horizontally, andalign-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 usingtext-align: center;. -
.card-img-top: This class centers the image within the card. Thedisplay: block;property ensures the image is treated as a block element, whilemargin-left: auto;andmargin-right: auto;center align the image horizontally within the card. Themax-widthandheightproperties 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.
Top comments (0)