bootstrap buttons in same line - one in a element, one in a form

Question

I have 2 buttons and I want them in the same line.

The buttons come one below the other because one is inside an <a> element and one is inside a form

Here is the code

<a href="update/"><button class="btn btn-default">Update Contact</button></a>
<form action="" method="post">
{% csrf_token %}
    <button type="submit" class="btn btn-default">Delete Contact</button>
</form>

How can I get them in the same line?

Fiddle - http://www.bootply.com/114827

Float the `a[href^="update"] button` to the `left` or `right`. — Hashem Qolami, Feb 18 '14 at 17:49
Can you give us some css or a jsfiddle? `button{display:inline-block}` could help — Carl0s1z, Feb 18 '14 at 17:49
The `form` is also an element. Do you know the difference between `display: block` and `display: inline`? — robertc, Feb 18 '14 at 17:50

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

It's very easy you just need to float them or put them as inline or inline block, or whatever element that contains them (that would be cleaner):

http://www.bootply.com/114841

In this particular case:

a, form{
  float: left;
}

or

a, form{
  display: inline-block;
}

Read about the differences here: https://stackoverflow.com/a/11823622/463065

edited May 23 '17 at 12:20

Community

1
1

answered Feb 18 '14 at 17:58

Trufa

39,971
43
126
190

score 0 · Accepted Answer · answered Feb 18 '14 at 18:01

0

Just use float:left; on the buttons

Css:

button {float:left;}

DEMO

answered Feb 18 '14 at 18:01

Carl0s1z

4,683
7
32
47

float is not exactly the better solution, it can have problems in more complex layouts. – Fez Vrasta Feb 18 '14 at 18:06

score 0 · Answer 3 · answered Feb 18 '14 at 18:05

Use an "inline" CSS class:

HTML:

<a href="update/">
  <button class="btn btn-default">Update Contact</button>
</a>
<form action="" method="post" class="inline">
  <button type="submit" class="btn btn-default">Delete Contact</button>
</form>

CSS:

.inline {
   display: inline-block;
 }

Example:
http://www.bootply.com/114837

bootstrap buttons in same line - one in a element, one in a form

3 Answers3