Search by Queries/Bugs/Errors

How to align div in center vertically and horizontally in Bootstrap 4

Created at 16-May-2021 , By samar

Hello everyone, in this post we will look at how to solve "How to align div in center vertically and horizontally in Bootstrap 4" in programming.

You can align div or any content of HTML to the center of the page vertically and horizontally in bootstrap 4 using bootstrap classes. Bootstrap provides a lot of classes to manage content without doing any extra CSS.

Align div to center vertically and horizontally within page in Bootstrap 4

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <title>Bootstrap 4 center div vertically and horizontally</title>
        <style>
            html, body{
                height: 100%;
            }
        </style>
    </head>
    <body>
        
        <div class="d-flex align-items-center justify-content-center h-100">
    	      <div class="w-50 mx-auto bg-info p-4 text-light">
                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam pariatur sit itaque architecto praesentium odio animi, 
                     ut, iusto quidem ex dolores nobis, modi soluta repellendus fuga mollitia error laudantium non! 
    	      </div>
       </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

You can align the div to the center (vertically and horizontally) of the body in the HTML page using bootstrap classes in bootstrap 4. You have to set HTML and body tag height to 100% after that we can use d-flex, align-items-center, justify-content-center, h-100 classes to parent div to align center in a vertical position and use w-50, mx-auto classes to assign width and margin auto property to child div.

Back to code snippet queries related bootstrap

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Vuejs Wordpress

How to align div in center vertically and horizontally in Bootstrap 4

Align div to center vertically and horizontally within page in Bootstrap 4

Random Code Snippet Queries: Bootstrap

Latest Code Snippets