CODEWITHSUNDEEP
pythontwitter-bootstrapflask-wtforms
nadermx
nadermx

Reputation: 2776

Get two form buttons to display next to each other in bootstrap

I am trying to get both these buttons to display next to each other. Not sure why they keep displaying ontop of one another. I am using flask-wtf and bootstrap 3.

  <div class="container">
    <div class="row">
        <div class="col-xs-11 col-sm-5 col-lg-5 center-block">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="title" class="control-label">Save:</label>

                {{ form.title(class="form-control input-lg", type="text", id="title"  ) }}

            </div>

            <div class="form-group">
            {{ form.submit(class="btn btn-danger btn-lg btn-block") }}
            {{ form.submit_2(class="btn btn-primary btn-lg btn-block") }}
            {{ form.csrf_token }}
            </div>
            </form>
        </div>
    </div>
  </div>

Upvotes: 0

Views: 2681

Answers (3)

alain
alain

Reputation: 657

The buttons could be "grouped" together:

<div class="btn-group">
  {{ button1 }}
  {{ button2 }}
</div>

Note that they will be joined together (no space between).

Upvotes: 0

Vytas Bradunas
Vytas Bradunas

Reputation: 676

Don't use the btn-block class. This makes the display type block instead of inline-block. If for some reason you must use btn-block, then you'll have to float the elements left and set their widths.

float: left;
width: 45%;

But the easiest is just to remove the btn-block class.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
    <div class="row">
        <div class="col-xs-11 col-sm-5 col-lg-5 center-block">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="title" class="control-label">Save:</label>

            </div>

            <div class="form-group">
            <div class="btn btn-danger btn-lg"> </div>
            <div class="btn btn-primary btn-lg"> </div>

            </div>
            </form>
        </div>
    </div>
  </div>

Upvotes: 1

nadermx
nadermx

Reputation: 2776

Figured it out. Just needed to break up the row into two.

  <div class="container">
    <div class="row">
        <div class="col-xs-11 col-sm-5 col-lg-5 center-block">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="title" class="control-label">Save:</label>

                {{ form.title(class="form-control input-lg", type="text", id="title"  ) }}

            </div>

            <div class="form-group">
            <div class="col-xs-6">
            {{ form.submit(class="btn btn-danger btn-lg btn-block") }}
            </div>
            <div class="col-xs-6">
            {{ form.submit_2(class="btn btn-primary btn-lg btn-block") }}
            </div>
            {{ form.csrf_token }}
            </div>
            </form>
        </div>
    </div>
  </div>

Upvotes: 0

Related Questions