Need to know how to vertically align a child element within a parent element using Bootstrap 5?
Note: I said vertically align. Not horizontally align.
If that's what you're here to learn about, then you're in good shape. I'll show you how to make it happen.
Scaling New Heights
First thing's first: before you can vertically align a child element, you must specify the height of the parent element.
Otherwise, Bootstrap don't know what to do.
So if you find yourself cussing at your computer because your code won't vertically align something, check that first.
There are a couple of ways you can specify the height of the parent element. To keep things clean and simple here, I'll use 100% of the height of the viewport.
So my parent element is gonna look like this:
<div class="row vh-100 bg-light">
That vh-100 class is the trick that sizes the element to the whole height of the view port.
But I've included another class that you need to be aware of.
Row, Row, Row Your Boat
You see that row class in the above code as well? Yeah, that's kind of important, too.
Why? Because if you want to make this thing work the way I'm going to show you, then you need a flexbox parent.
That means it needs to use display: flex in the CSS. And, happily enough, the row class does exactly that.
You could also opt for the d-flex class if you're allergic to using row. That will work, too.
But I'd recommend you go with row. That's because you're probably already using row to create your 12-column layout for responsive design.
At least I hope you're doing that. Otherwise you're user interface might look lame on a mobile platform. And that's bad.
Bottom line here: you need a flexbox parent. Both row and d-flex will work for that purpose.
Once you've got the parent element figured out, all that's left is to vertically align the child element. You do that with a class called align-self-center.
The Bootstrap developers probably could have given that class a more intuitive name. Something like vertical-center would be a bit more descriptive.
But I'm just reporting.
Anyhoo, use that class to align your child element. Here's a whole HTML page that you can copy and paste as you please.
<!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://firstname.lastname@example.org/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <script src="https://email@example.com/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <title>Vertical Align Test | Carey Development</title> </head> <body> <div class="row vh-100 bg-light"> <div class="col-md-6 align-self-center"> <h2>I'm in the center</h2> </div> <div class="col-md-6"> <h2>I'm not in the center</h2> </div> </div> </body> </html>
The parent <div> element above sets the height and creates a flexbox as I've described above.
The first inner <div> element does a vertical alignment. The second one doesn't.
The only difference between those two elements is the existence of the align-self-center class in the first one. That's the pretty boy that will give you the vertical alignment.
View that HTML with your browser and you'll see something like this:
If you want to specify a smaller height than the whole viewport, just use the style attribute with height. Like this:
<div class="row bg-light" style="height:200px">
Make that your outer <div> and view the contents again with your browser. You'll see something like this:
And that's what you'd expect.
Wrapping It Up
Excellent. Now you know how to vertically align an element within another element using Bootstrap 5.
Time to start fiddling. Take what you've learned here and try some experiments just so you know that you can make it work, too.
Photo by from