Just dipping my toes into the world of bootstrap and experimenting with some code.
Encountered an issue when trying to center elements properly within columns:
<div class="container">
<div class="row">
<div class="col border p-3">Column</div>
<div class="col border p-3">Column</div>
<div class="col border p-3">Column</div>
</div>enter code here
Adding any type of element within the columns like this seems to create extra space at the bottom without proper alignment:
<div class="row">
<div class="col border"><p>Column</p></div>
<div class="col border"><p>Column</p></div>
<div class="col border"><p>Column</p></div>
</div>
This additional space prevents proper alignment using align-items-center.
Check out the Codepen example below:
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c534c51">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
<div class="col d-flex justify-content-center align-items-center border"><p class='bg-primary text-white'>Column</p></div>
<div class="col d-flex justify-content-center align-items-center border"><p class='bg-primary text-white'>Column</p></div>
<div class="col d-flex justify-content-center align-items-center border"><p class='bg-primary text-white'>Column</p></div>
</div>The horizontal alignment works fine, but the vertical alignment is off.