How to swap two button elements using float in CSS

Question

I have two buttons and I would like to swap them using float. How can I do it?

<div class="modal-footer">
  <button type="button" class="btn btn-default">Cancel</button>
  <button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>

Thank you. Any help would be appreciated.

Put `style="float: right;"` on the first one, and `style="float: left;"` on the second. Remember to put a `clear` afterwards. — Tyler Roper, Oct 14 '16 at 17:54
@Santi To which class should I add the clear property? and clear: both or right or left? — , Oct 14 '16 at 19:02
@AnkithAmtange I tried that but I am getting a space between the two elements which I want to get rid of. — , Oct 14 '16 at 19:02
Bootstrap's `modal footer` has a text align right property. You are missing a tag in the question. Is this what you are looking for? https://jsfiddle.net/waxza7zx/ — AA2992, Oct 14 '16 at 19:08
@Marley Clearing is done as the final sibling to floated elements. So you would have your two buttons, followed by `
`. As far as having no space between them - can you shrink the `modal-footer` container? Floating an element to the right will force it to the right-most edge. By shrinking the container, the right-most edge would be closer. — Tyler Roper, Oct 14 '16 at 20:27
@AnkithAmtange Exactly. That's the one which I am looking for. Your fiddle does what I want it to be done. Thanks a lot! :) — , Oct 14 '16 at 21:32

Mehrad · Answer 1 · 2016-10-14T19:04:33.983

0

.right {
  float: right;
  }
.left {
  float: left;
  }

<div class="modal-footer">
  <button type="button" class="right btn btn-default">Cancel</button>
  <button type="button" class="left btn btn-primary" data-dismiss="modal">Delete</button>
</div>

you can also use order: 1 and order: -1

.modal-footer {
  display: -webkit-flex; /* Safari */
  display: flex;
}
.first {
  order: 1
}
.second {
  order: 2
}

<div class="modal-footer">
  <button type="button" class="second btn btn-default">Cancel</button>
  <button type="button" class="first btn btn-primary" data-dismiss="modal">Delete</button>
</div>

read CSS order property

edited Oct 14 '16 at 19:04

answered Oct 14 '16 at 17:57

Mehrad

1,495
14
22

How can I get rid of the space between the two buttons and align the delete button exactly infront of the cancel button. (right aligned)? – Oct 14 '16 at 18:36
when you use floats it will throw each element to the furthest side, if the wrapper is a block element then it will be on opposite sides of the page. an easier way to re-arrange by `order: 1` – Mehrad Oct 14 '16 at 18:45

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

Using flexbox:

You can use the flexbox property order. Like the property name suggests, it changes the order of flex-items.

More info here.

Code Snippet:

.modal-footer {
  display: flex;
  justify-content: flex-end;
}
.modal-footer .btn:last-of-type {
  order: -1;
}

<div class="modal-footer">
  <button type="button" class="btn btn-default">Cancel</button>
  <button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>

edited May 23 '17 at 12:01

Community

1
1

answered Oct 14 '16 at 19:03

Ricky Ruiz

25,455
6
44
53

That's the exact code which I implemented before. But I want to get rid of the flex layout and implement float because it's giving me problems with the tab indexing. – Oct 14 '16 at 19:08

score 0 · Accepted Answer · answered Oct 14 '16 at 21:47

With additional CSS, you could float the cancel button to the right.

.modal-footer .btn-default {
  float:right
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
  <button type="button" class="btn btn-default">Cancel</button>
  <button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>

`or`

You can use one of the helper classes on the first button --- pull-right.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
  <button type="button" class="btn btn-default pull-right">Cancel</button>
  <button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>

You may additionally need to add a clearfix depending on other content in the modal.

How to swap two button elements using float in CSS

3 Answers3

Code Snippet:

or

`or`