How do I align elements horizontally? - html

Question

I have three elements (DIVs) and I need to align them horizontally. I'm following Bootstrap's guides and it won't work.
This is what I need it to look like:
This is what it looks now, it's aligned to the left:
Here's my code:
.price-selection {
border: 1px solid #8ABE57;
display: inline-block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="row m-0">
<div class="col-12 product-info-subtitle cuanto-pagar">
<p>¿Cuánto quieres pagar?</p>
</div>
<div class="col-12">
<div class="row justify-content-center">
<div class="col-3 price-selection text-center">
<p class="price">one</p>
<p class="period">one</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">two</p>
<p class="period">two</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">three</p>
<p class="period">three</p>
</div>
</div>
</div>
</div>

Answer 1

Here's the correct markup for what you're trying to achieve:
.price-selection {
border: 1px solid #8ABE57;
display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 product-info-subtitle cuanto-pagar">
<p>¿Cuánto quieres pagar?</p>
</div>
<div class="col-12">
<div class="row justify-content-around">
<div class="col-3 price-selection text-center">
<p class="price">one</p>
<p class="period">one</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">two</p>
<p class="period">two</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">three</p>
<p class="period">three</p>
</div>
</div>
</div>
</div>
</div>
The important part is: i wrapped the col's in a row which has the class of justify-content-around.
The row part fixes the margin/paddings of Bootstrap grid on various screen sizes.
The justify-content-around gives it justify-content: space-evenly. Currently Bootstrap only has justify-content-around and justify-content-between. However, since it was released, flexbox was added a new value for justify-content (which will probably get added to Bootstrap), which is space-evenly. However, Bootstrap doesn't yet have a class for it.
If you want to space your elements evenly, you'll need to add it in CSS yourself:
.price-selection {
border: 1px solid #8ABE57;
display: inline-block;
}
.justify-content-evenly {
display: flex;
justify-content: space-evenly;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 product-info-subtitle cuanto-pagar">
<p>¿Cuánto quieres pagar?</p>
</div>
<div class="col-12">
<div class="row justify-content-evenly">
<div class="col-3 price-selection text-center">
<p class="price">one</p>
<p class="period">one</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">two</p>
<p class="period">two</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">three</p>
<p class="period">three</p>
</div>
</div>
</div>
</div>
</div>
To better understand the difference between various types of spacing in flexbox, here's a graphical explanation: https://css-tricks.com/almanac/properties/j/justify-content/#article-header-id-1

Answer 2

Use m-0 for remove horizontal bar.
Columns should not be direct children of other columns. If you want to divide a column use a .row wrapper.
Solution 1
I removed justify-content-center because it cant give gap between cols, so use justify-content-around.
.price-selection {
border: 1px solid #8ABE57;
display: inline-block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="row m-0 justify-content-around element">
<div class="col-3 price-selection text-center">
<p class="price">one</p>
<p class="period">one</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">two</p>
<p class="period">two</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">three</p>
<p class="period">three</p>
</div>
</div>
Solution 2
you can also use CSS for equally gap between cols ( no bootstrap class for space-evenly ).
.element {
justify-content: space-evenly;
}
.price-selection {
border: 1px solid #8ABE57;
display: inline-block;
}
.element {
justify-content: space-evenly;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="row m-0 element">
<div class="col-3 price-selection text-center">
<p class="price">one</p>
<p class="period">one</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">two</p>
<p class="period">two</p>
</div>
<div class="col-3 price-selection text-center">
<p class="price">three</p>
<p class="period">three</p>
</div>
</div>