CODEWITHSUNDEEP
csstwitter-bootstrap-3
user3628807
user3628807

Reputation: 325

Displaying buttons in line with bootstrap

So I have 2 buttons but one of them is in a form and is displayed on a new line. Can I align the two buttons in a line without moving the reply button inside the form?

<button class="btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>

Upvotes: 1

Views: 437

Answers (2)

Adharsh M
Adharsh M

Reputation: 2812

Use display:inline in reply button and display: inline-block; in form.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />


    <button class="btn btn-primary btn-xs" data-toggle="collapse" style="display: inline;">
    <span class="glyphicon glyphicon-message-forward"></span> Reply</button>
    <form action="" method="post" style="display: inline-block;">
    <input type="hidden" name="comment_id" value="">
    <button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
    </form>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

you can add pull-left to the top button to float that button and the inline content in the form will wrap beside it.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="pull-left btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>

Upvotes: 1

Related Questions