CODEWITHSUNDEEP
htmlcss
user4234041
user4234041

Reputation: 17

Two Input Buttons on same line

I am trying to get two buttons to be on the same line.

Any suggestion?

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please login your account...</h3>
                </div>
                <div class="panel-body">

                    <form action="" method="post" role="form" class="form-horizontal">

                    <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"><input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Fiddle: http://jsfiddle.net/a65oc6f3/

Upvotes: 0

Views: 2262

Answers (4)

semir worku
semir worku

Reputation: 120

Wrap you input boxes with div's that have class of col-md-6 and set the input's width to 100%, like shown below:

<div class="container">
 <div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Please login your account...</h3>

    </div>
    <div class="panel-body">
        <form action="" method="post" role="form" class="form-horizontal">
<div class="row">
<div class="col-md-6">
                <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px; float:left" type="submit" name="commit" value="Sign In">
</div>
<div class="col-md-6">
                    <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px" type="submit" name="commit" value="Sign In">
</div>
</div>
                </form>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

wasim abbas
wasim abbas

Reputation: 71

just updated your fiddle http://jsfiddle.net/a65oc6f3/9/

First method:

pls add width:45%; to both buttons not 100% and

  1. margin-left:5%; to your right button or
  2. float:right to your right button

second method:

you can add row and two cols

and if you want to make these buttons in one line on mobile also than add col-xs-5 to both cols for example

<div class="row">
    <div class="col-md-5 col-xs-5">
       <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
    </div> <!-- col-6 closed -->

    <div class="col-md-5 col-xs-5 pull-right">
       <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
    </div> <!-- col-6 closed -->
</div> <!-- row ends -->

for more well documentation visit bootstrap forms and buttons documentation. http://getbootstrap.com/css/#buttons

Upvotes: 1

Muhammad
Muhammad

Reputation: 7324

set the Width to 50% on both buttons or put them in a 1X2 table and set the width of the table to 100%

Upvotes: 1

Jeff Anderson
Jeff Anderson

Reputation: 819

You don't want both buttons to have a 100% width, try this:

<div class="container">
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                    <h3 class="panel-title">Please login your account...</h3>

            </div>
            <div class="panel-body">
                <form action="" method="post" role="form" class="form-horizontal">
                    <input class="btn btn-primary" style="margin-top:.75em;width: 50%; height: 32px; font-size: 13px; float:left" type="submit" name="commit" value="Sign In">
                    <input class="btn btn-primary" style="margin-top:.75em;width: 50%; height: 32px; font-size: 13px" type="submit" name="commit" value="Sign In">
                </form>
            </div>
        </div>
    </div>
</div>

Fiddle: here

Upvotes: 1

Related Questions