Twitter Bootstrap Question posted in

Twitter Bootstrap textboxes size limit

I’m using bootstrap text boxes as :

<div class="row">
   <div class="col-lg-4">
      <p>
         <label>Contact List</label>
          <select class="form-control" id="list" name="list">
             <option value="">Please Select</option>
          </select>
      </p>
   </div>
   <div class="col-lg-10">
      <p>
        <input class="form-control" id="contact_id" maxlength="3" size="4" name="contact_id">
         <button type="button" class="btn btn-primary" id="load_contact">Load Contact</button>
     </p>
 </div>

I would like to align textbox and button at the right side of dropdownlist, but currently textbox is aligned through out the page.

Here is a screenshot :

enter image description here

Tags:

2

Answers


  1. 0

    please change col-lg-10 to col-lg-8

    Login or Signup to reply.
  2. 0

    Bootstrap use a 12 columns based row…

    You have (for large view : col-lg) 14 columns ( col-lg-4 + col-lg-10 )

    So just modify this to have a sum of 12 ( 4 + 8 ) ( I changed to col-xs for see it a xtra small )

    <div class="row">
   <div class="col-xs-4">
      <p>
         <label>Contact List</label>
          <select class="form-control" id="list" name="list">
             <option value="">Please Select</option>
          </select>
      </p>
   </div>
   <div class="col-xs-8">
      <p>
        <input class="form-control" id="contact_id" maxlength="3" size="4" name="contact_id">
         <button type="button" class="btn btn-primary" id="load_contact">Load Contact</button>
     </p>
 </div>

    Here is a fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search