How to Get Centered Content in Bootstrap ?
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:
HTML
<!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>w3wiki</h1> <h2>How to Get Centered Content in Bootstrap? . </h2> <img src= "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" alt="w3wiki logo" height="200px"> </div> </div> </div> </div> </body> </html> |
Output:
Contact Us