.flexboxis a best way to horizontally align two or several items in a same line instead of floating them. It can hugely help you to align your content.
It has worth to know that flexbox is a shorthand class for .d-flexclass. Flexbox will add a gap between your items and add justify-content: space-between property by default. You can easily create the following samples using .d-flex and other utility classes. See the official Bootstrap documentation for more information.
<div class="flexbox"> <span>Left</span></div><div class="flexbox flex-row-reverse"> <span>Right only</span></div><div class="flexbox"> <span>Left</span> <span>Right</span></div><div class="flexbox"> <span>Left</span> <span>Center</span> <span>Right</span></div><div class="flexbox"> <span class="flex-grow">Left wide</span> <span>Center</span> <span>Right</span></div><div class="flexbox"> <span>Left</span> <span class="flex-grow">Center wide</span> <span>Right</span></div><div class="flexbox"> <span>Left</span> <span>Center</span> <span class="flex-grow">Right wide</span></div><div class="flexbox flex-justified"> <span>Left wide</span> <span>Center wide</span> <span>Right wide</span></div><div class="flexbox flex-justified"> <span>Equal</span> <span>Equal</span> <span>Equal</span> <span>Equal</span></div><div class="flexbox flex-justified"> <span>Equal</span> <span>Equal</span> <span>Equal</span> <span>Equal</span> <span>Equal</span></div>No gutters
Remove 8px gap by adding .no-guttersto .flexbox
<div class="flexbox flex-justified no-gutters"> <span>Left wide</span> <span>Center wide</span> <span>Right wide</span></div>Grow more
You have utility classes for flex-grow property, values from 0 to 9.
<div class="flexbox flex-justified"> <span>Left wide</span> <span class="flex-grow-2">Center wide</span> <span>Right wide</span></div>