How to align two buttons?

Question

How to align the two buttons that are shown below in the image?

<div class="form-group">
  <label for="ExpenseDate">Expense Date:</label>
  <input type="date" class="form-control" id="ExpenseDate" name="ExpenseDate" required>
</div>
<div class="form-group">
  <label for="CategoryDescription">Category Description:</label>
  <input type="text" class="form-control" id="CategoryDescription" name="CategoryDescription" required>
</div>
<button type="submit" class="btn btn-primary">Save Changes</button>
<a class="btn btn-danger" href="/expenses">Cancel</a>

Answer 1

Enclose your buttons in a parent container and set its display property to flex.

In the code below, I included the bootstrap package and created a flex parent container.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-group">
  <label for="ExpenseDate">Expense Date:</label>
  <input type="date" class="form-control" id="ExpenseDate" name="ExpenseDate" required>
</div>
<div class="form-group">
  <label for="CategoryDescription">Category Description:</label>
  <input type="text" class="form-control" id="CategoryDescription" name="CategoryDescription" required>
</div>
<div class="d-flex flex-row align-items-center">
  <button type="submit" class="btn btn-primary">Save Changes</button>
  <a class="btn btn-danger" href="/expenses">Cancel</a>
</div>

Answer 2

I Copied your example code, and it works fine to me...

Double check your scripts in bootstrap...