Skip to main content

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

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