CODEWITHSUNDEEP
htmlcsstwitter-bootstraptextbox
Futuregeek
Futuregeek

Reputation: 1980

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

Upvotes: 1

Views: 58

Answers (2)

BENARD Patrick
BENARD Patrick

Reputation: 30975

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

Upvotes: 1

Jalali
Jalali

Reputation: 596

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

Upvotes: 2

Related Questions