---
title: "Center an element vertically and horizontally with the help of Bootstrap"  
description: "Center an element vertically and horizontally with the help of Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156630/center-an-element-vertically-and-horizontally-with-the-help-of-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 1 minute  

---

# Center an element vertically and horizontally with the help of Bootstrap

How to center an element vertically and horizontally with the help of [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)?

## Replies

### Reply by Anonymous User

To center an element vertically and horizontally with the help of an Bootstrap is very simple with the help of an Bootstrap Flexbox :

```
<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='align-content-center align-items-center d-flex justify-content-center mb-3'>
        <div class='p-2 bg-secondary text-light'>Vertically and Horizontally Centered Container</div>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</body>
</html>
```

Hope this will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156630/center-an-element-vertically-and-horizontally-with-the-help-of-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
