CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
VivekDev
VivekDev

Reputation: 25369

Bootstrap 3 buttons and input to be grouped in one row

I have a bunch of buttons and an input text box. But they are not aligned properly as shown.

    <div class="col-md-12 pull-right">
        <div class="pull-right">
            <button type="button" class="btn btn-default btn-xs"> << </button>
            <button type="button" class="btn btn-default btn-xs"> < </button>
            <button type="button" class="btn btn-default btn-xs"> > </button>
            <button type="button" class="btn btn-default btn-xs"> >> </button>
            <input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />

        </div>
</div>

enter image description here

Is there a way they are alligned in one row? Also notice that the size of the input box is looking different from the others. Is there a way to fix this too?

Upvotes: 1

Views: 3923

Answers (4)

J Santosh
J Santosh

Reputation: 3847

using btn-group arranges all buttons in a row. like this 

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="btn btn-default btn-xs">&lt;&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;&gt;</button>
  <input type="number" style="width: 30px; margin-top:10px" class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>

Note: When using HTML symbols(for example <,>) as text, then encode them as I did(Just a good practice).

Docs btn-groups

And I used inline style for input type number margin-top:10px; because input[type=number] in bootstrap has margin-bottom:10px; so, to balance used margin-top. Instead you can use margin-bottom:0px

As @Mike Robinson said, even .input-append does the same . the difference is rounded borders and input-append is converted to input-group from version 3

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="input-append">
  <button type="button" class="btn btn-default btn-xs">&lt;&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;&gt;</button>
  <input type="number" style="width: 30px; " class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>

Upvotes: 5

John Diaz
John Diaz

Reputation: 361

use: form-control-static instead of form-control in your input text

Upvotes: -1

Blake
Blake

Reputation: 641

The form-control style on your input is the thing that's moving it to the next line. It's doing so because the form-control style in bootstrap is set to display: block. By adding a new style or doing an inline style you can get them on the same page.

For instance:

<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" style="display: initial;" />

Or you can make a class such as:

.newInputControl{
display: inline;
}
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" class="newInputControl" />

You can also take care of it using bootstrap, which has built the framework to handle this by placing your form-control inside an input group.

Upvotes: 1

Mike Robinson
Mike Robinson

Reputation: 25159

You need an input-group. You can add on groups of buttons to either side of the input. Here they'll be on the left:

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default"> << </button>
        <button type="button" class="btn btn-default"> < </button>
        <button type="button" class="btn btn-default"> > </button>
        <button type="button" class="btn btn-default"> >> </button>
    </div>

    <input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>

Read more about it here: http://getbootstrap.com/components/#input-groups-buttons-multiple

Upvotes: 5

Related Questions