Question 136971 in Html Question posted in
Some basic documentation can be found here.

Html – How to align two buttons?

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

enter image description here

<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>
Tags:

4

Answers


  1. 0

    There are plenty of examples here – How can I vertically center a div element for all browsers using CSS?

    <div style="display: flex; align-items: center;">
    <button type="submit" class="btn btn-primary">Save Changes</button>
    <a class="btn btn-danger" href="/expenses">Cancel</a>
</div>
    Login or Signup to reply.
  2. 0

    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/[email protected]/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>
    Login or Signup to reply.
  3. 0

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

    Double check your scripts in bootstrap…

    enter image description here

    Login or Signup to reply.
  4. 0

    To align the two buttons , you can use the Bootstrap grid system and wrap the buttons in a new div element with the class of row and use col classes to specify the width of each button.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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="row">
  <div class="col">
    <button type="submit" class="btn btn-primary">Save Changes</button>
  </div>
  <div class="col">
    <a class="btn btn-danger" href="/expenses">Cancel</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search