Bootstrap buttons won't display inline-block

Question

I'm really beginner with CSS and can't figure out how to align bootstrap drop-down buttons horizontally. Here is a code snippet of my project: https://codesandbox.io/s/dreamy-resonance-80id9?file=/src/App.js

The idea is to have them aligned horizontally at the top of the page, with equal space between them and between the borders, so they're spread out.

Answer 1

You just need to change display mode :

.buttonContainer {
  background-color: white;
  padding: 20px;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

this flex guide can helps you