How to centre a div in bootstrap 5?

user_1526703 0
Viewed 21929

I couldn't find a straightforward way to centre a div in Bootstrap 5. Maybe I am missing something obvious. Google took me to the flex doc. In Bootstrap 4, I could do it by setting col-sm-* and using col-sm-offset-*

Note: I don't want to centre the content in the div. Just need to put whole div in the centre (horizontally). Is setting a margin the only way?

bootstrap-5
1 Answers

You can use with d-flex align-items-center justify-content-center like below demo:

body{
    height: 100vh;
} 
.container{
    height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container d-flex align-items-center justify-content-center">
        <div>
                <h1>You Div</h1>
            </div>
    </div>

user_54362110
Related