I have the following below:
<section class="m-5">
<div class="container">
<div class="row text-center justify-content-center" style="height:75px">
<div id="one" class="col-2 border ">1</div>
<div id="two" class="col-2 border ">2</div>
<div id="three" class="col-2 border ">3</div>
</div>
</div>
The text (1, 2, 3) are centered horizontally, but not vertically.
Is there a way for me to center the texts both vertically and horizontally at the same time with bootstrap?
nibble
January 25, 2021, 7:06am
2
Hello @nonamesareleft ,
I am really not good with bootstrap but after googling, most people are recommending use of CSS display: flex
for vertically centering text inside a container. I believe you you can also do the same using display: flex
in bootstrap. Try the following:
Bootstrap
<div id="one" class="col-2 border d-flex align-items-center justify-content-center">1</div>
CSS
#one{
display: flex;
align-items: center;
justify-content: center;
}
I hope that helps.
system
Closed
July 26, 2021, 7:06pm
3
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.