How do I make the dropdown menus appear horizontally instead of vertically?

I am currently learning to develop a website using HTML5, CSS, Bootstrap and JavaScript. How do I display these buttons to be displayed horizontally instead of vertically? I want them to be displayed in the middle, below the Quick Buy with decent spacing between the buttons.

Here are some parts of my code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<main class = container>
  <form action="" method="">
      <div class="container mt-5">
          <h3 class="text-center">Quick Buy</h3>
          <br>
          <div class="form-group">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Movie
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Disney's Mulan</a>
                  <a class="dropdown-item" href="#">Tenet</a>
                  <a class="dropdown-item" href="#">Pinocchio</a>
              </div>
          </div>
          <div class="form-group">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Cinema
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Yellow Dhoby</a>
                  <a class="dropdown-item" href="#">Yellow Vivo City</a>
                  <a class="dropdown-item" href="#">Yellow Bedok</a>
              </div>
          </div>
          <div class="form-group">
              <button class="btn btn-warning" type="submit">Book Now</button>
          </div>
      </div>
  </form>
</main>

Answer

Add d-inline class in form-group div and text-center in container div

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<main class = container>
  <form action="" method="">
      <div class="container mt-5 text-center">
          <h3 class="text-center">Quick Buy</h3>
          <br>
          <div class="form-group d-inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Movie
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Disney's Mulan</a>
                  <a class="dropdown-item" href="#">Tenet</a>
                  <a class="dropdown-item" href="#">Pinocchio</a>
              </div>
          </div>
          <div class="form-group d-inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Cinema
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Yellow Dhoby</a>
                  <a class="dropdown-item" href="#">Yellow Vivo City</a>
                  <a class="dropdown-item" href="#">Yellow Bedok</a>
              </div>
          </div>
          <div class="form-group d-inline">
              <button class="btn btn-warning" type="submit">Book Now</button>
          </div>
      </div>
  </form>
</main>

Advertisement

Answer