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

Tags: , , ,



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. Click here for screenshot of the problem

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>


Source: stackoverflow