The task is to center content using bootstrap. The approach of this article is to get a Centered Content in Bootstrap by using a simple in-built class .text-center to center align all the inline elements like text, images, links, etc. under a block element i.e <div> or <p> element.
Note: This solution only works in the Bootstrap 3 or 4 versions.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<title>Text Centering in Bootstrap</title>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
</script>
<style>
.bs-example {
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="container">
<div class="row">
<div class="col-lg-12 bg-light text-center">
<h1>GeeksforGeeks</h1>
<h2>How to Get Centered Content in Bootstrap? .
</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
height="200px">
</div>
</div>
</div>
</div>
</body>
</html>
Output:
