CODEWITHSUNDEEP
bootstrap-4
David Findlay
David Findlay

Reputation: 1356

Align buttons left, center, right

I'm using Bootstrap 4 beta. I'd like to have buttons in a workflow navigation section aligned with a back button on the left, two cancel buttons centred and a next button on the right.

Here's how I've coded it:

  <button type="button" class="btn btn-secondary float-left">Back</button>
  <div class="text-center">
    <button type="button" class="btn btn-danger">Cancel</button>
    <button type="button" class="btn btn-secondary"">Save and Exit</button>
  </div>
  <button type="submit" class="btn btn-primary float-right">Next</button>

This has correctly positioned the left button and the centre buttons, but the right hand button is below the other buttons on the right.

I've tried putting the right button in it's own div and removing the float-left. How can I get them all aligned in a row?

Upvotes: 0

Views: 2864

Answers (1)

zdolny
zdolny

Reputation: 1109

Use flex instead of floats:

<div class="d-flex justify-content-between">
  <button type="button" class="btn btn-secondary">Back</button>
  <div>
    <button type="button" class="btn btn-danger">Cancel</button>
    <button type="button" class="btn btn-secondary">Save and Exit</button>
  </div>
  <button type="submit" class="btn btn-primary">Next</button>
</div>

Upvotes: 4

Related Questions