Bootstrap 4 evenly space buttons in container

Question

Isn't there an easy way, maybe even using flexbox to evenly distribute 3 buttons inside a single div? Am new to flexbox and still try to figure when and when not to use it until I get more used to it. Either way, my html (actually, JSX as this is in React) is:

<div className="container">
    <div>
        <p>Ea commodo tempor magna incididunt fugiat reprehenderit laboris excepteur velit labore. Commodo dolore cillum commodo eu cillum est minim ad. Laboris proident sint anim reprehenderit fugiat pariatur nulla reprehenderit veniam duis adipisicing cupidatat laboris consequat. Reprehenderit laboris nostrud nulla cillum qui in laborum exercitation est do. Quis esse consectetur ex nisi. Nulla veniam nisi cillum cillum in in ipsum sit et labore elit cillum occaecat. Eu quis excepteur quis exercitation ut pariatur laboris in ex cupidatat irure officia tempor cillum.Voluptate Lorem id Lorem elit ipsum do cillum elit. Consectetur consectetur quis do mollit aliqua reprehenderit elit. Est dolor tempor exercitation nisi. Deserunt nulla elit qui pariatur officia pariatur aute elit culpa laborum incididunt laborum. Voluptate eiusmod voluptate elit dolore aliqua eu esse non qui voluptate elit ipsum est fugiat. Qui mollit exercitation aliqua ad occaecat id elit dolor et. Mollit aliquip ullamco ut labore. Cupidatat anim eu do ipsum enim ea. Eu incididunt qui eiusmod ipsum qui voluptate. Est esse eu ipsum fugiat dolore excepteur aliquip sint fugiat ipsum sunt aliquip exercitation.</p>
    </div>
    <div className="vol-ctr">
        <Button color="primary">
            <Icon name="users" />Manage Users
        </Button>
        <Button color="primary">
            <Icon name="cog" />Manage Configuration
        </Button>
        <Button color="primary">
            <Icon name="code" />Documentation
        </Button>
    </div>
</div>

And CSS to get this at least in center:

.vol-ctr {
  text-align: center;
}

Answer 1

Simple flexbox would be:

.vol-ctr {
   display: flex;
   justify-content: space-around;
}

---

Or apply justify-content-around d-flex classes. Note the first one doesn't work without the second (justify-content has no effect without display:flex).

<!-- -->
  <div className="vol-ctr d-flex justify-content-around">
    <!-- -->

And here's the current documentation on Flexbox in Bootstrap v4.

Answer 2

In addition to accepted answer by Andrei Gheorghiu, flex justify-content property has one more possible value that might suit your needs better, from what I understand:

.vol-ctr {
   display: flex;
   justify-content: space-evenly;
}

Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

As of v4.1, Bootstrap 4 doesn't have support for this value in justify-content utilities.