Not able to load divs one below the other using Bootstrap 5

Question

I am trying to order div's one under the other and want it centered on the page but all my elements are lining next to each other rather than one below the other.

body {
    height: 100vh;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/b7fb98327c.js"></script>

<div class="landing d-flex align-items-center justify-content-center h-100" id="start">
    <div id="start-app">
      <p id="app-name" class="header h1">App Name</p>
    </div>
    <div>
      <label for="email" class="form-label">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <br><br>
    <div>
      <label for="pwd" class="form-label">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div>
      <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <div>
      <p><i class="fa-solid fa-circle-play" id="start-icon"></i></p>
    </div>
  </div>

I want the divs to line one under the other. Right now they are all forming next to each other. <br> does not seem to help either.

Answer 1

You need flex-column added as a Class. You can read more here: https://getbootstrap.com/docs/5.0/utilities/flex/#direction

(I removed the height: 100vh as the content wouldn't fit otherwise)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/b7fb98327c.js"></script>

<div class="landing d-flex align-items-center justify-content-center h-100 flex-column" id="start">
    <div id="start-app">
      <p id="app-name" class="header h1">App Name</p>
    </div>
    <div>
      <label for="email" class="form-label">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <br><br>
    <div>
      <label for="pwd" class="form-label">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div>
      <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <div>
      <p><i class="fa-solid fa-circle-play" id="start-icon"></i></p>
    </div>
  </div>