CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Paul McLean
Paul McLean

Reputation: 3550

Multiple textboxes in a single row in Bootstrap

I'm using Bootstrap to try and place 2 textboxes next to a label, all on a single row, however, I can't seem to get everything to line up properly.

Diagram 1

I'm working on trying to get the "Domestic" row working first. The other rows look exactly how I want them to look, but that's only because I cheated and added a style of "width: 49%" to them. Doing this, however, breaks the fully responsive nature of the textboxes, which I want to keep.

You'll notice that for the "Domestic" row, that the label doesn't line up with the rows below it, and neither do either of the textboxes. This is my code for the "Domestic" row - 

<div class="row">
<div class="form-horizontal">
    <div class="form-group col-md-12 col-xs-12">
        <div class="col-md-4 col-xs-12">
            <label class="control-label">Domestic</label>
        </div>
        <div class="col-md-4 col-xs-12">
            <input id="percentage" class="form-control" type="text" placeholder="Percentage">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
        <div class="col-md-4 col-xs-12">
            <input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
    </div>
</div>

Things go even more pear shaped when I run validation on the form and start displaying those input-group-addons -

Diagram 2

All I'm essentially trying to do is split the row into thirds, 1 third for the label, 1 third for the first textbox and 1 third for the second textbox (and then, if that works, hopefully I can get it working for 1 row per control on xs displays).

Any ideas?

Edit: As requested, here is my code for the "Amex" row - 

<div class="row">
<div class="form-group col-md-12 col-xs-12">
    <label class="col-md-4 col-xs-12 control-label">Amex</label>
    <div class="input-group col-md-8 col-xs-12 form-inline">
        <div class="input-group" style="width: 49%;">
            <input id="amexPercentage" class="form-control" type="text" placeholder="Percentage">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
        <div class="input-group" style="width: 49%;">
            <input id="amexFlat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
    </div>
</div>

Upvotes: 3

Views: 17677

Answers (3)

Christina
Christina

Reputation: 34652

The form you're creating is tricky. There's no examples in the documentation of a .form-horizontal with nested columns inside the widest column. You were missing the correct html for the input-group too. Since there is a lot of wrappers, it's good to indent your code and comment it.

What you need to do is use grid system inside the widest column and since you want two 50% columns, you would use just a .col-X-6 at the breakpoint you desire. In this case you want the columns side by side at the col-md min-width, which is 992px.

Also, often times the col-X-12 class is not necessary. An element will be 100% width below the last column class used. An element with .col-md-4 will be 100% under that, you don't have to tell it to be 100% by adding an extra and unecessary class col-sm-12 or col-xs-12

enter image description here

Demo: https://jsbin.com/yojoci

CSS This adds some vertical space when the form stacks at below the min-width class choice.

@media (max-width:991px) { 
    .form-horizontal.custom-form .form-group .row [class*=col-]:first-child {
        margin-bottom: 5px
    }
}

HTML

 <div class="container">
   <form class="form-horizontal custom-form" role="form">
   
      <div class="form-group">
         <label class="col-sm-2 control-label">Domestic</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text One">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Two">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->
      
      
      <div class="form-group">
         <label class="col-sm-2 control-label">Amex</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Three">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Four">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->
      
      
      <div class="form-group">
         <label class="col-sm-2 control-label">Premium</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Five">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Six">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->
      
  </form>
</div>
<!--/.container (DON'T NEST) -->

Upvotes: 5

edita
edita

Reputation: 45

Make sure you close your input tags correctly. Currently you are missing the closing tag />. Please also post your html for the next two rows as well.

<input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)" />

Upvotes: 1

user3857868
user3857868

Reputation:

Instead of trying to hack the three column layout together, I would use a framework already built to handle it. I recommend Toast by Dan Eden: https://github.com/daneden/Toast.

It will help you create a three column layout that's responsive and doesn't break.

As he said in the docs, link this in your head:

<link rel="stylesheet" href="css/toast/grid.css">

Then create your layout with the following format:

<div class="container">
      <div class="grid">
            <div class="grid__col grid__col--1-of-4">

            </div>
            <div class="grid__col grid__col--3-of-4">

            </div>
            <div class="grid__col grid__col--6-of-12">

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

There are more specific instructions in his description.

Upvotes: 2

Related Questions