I'm new to bootstrap, trying some things out.
I came across an issue where this centers properly:
<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
But putting any kind of element within the columns like this:
<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>
It adds this extra space on the bottom of the column or row and doesn't allow me to properly align-items-center it.
Codepen example:
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>It will align horizontally but not vertically.
CodePudding user response：
Bootstrap defines this CSS rule for p elements :
p {
margin-top: 0;
margin-bottom: 1rem;
}
You can either override it or use a different element.