how do i control width of input with bootstrap

Question

i am trying to control my width's for my input but i am having some trouble. Here is my mark up

<section class="bg-lb pt40 pb40 btborder">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="bg-white ">
                    <div class="pt40 pb40">
                        <a class="btn btn-default hvr-fade">Login</a>
                        <span id="cricle"><b>OR</b></span>
                        <a class="btn btn-default hvr-fade">Register</a>
                    </div>
                    <form>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon"><span class="ion-person"></span></div>
                                <input type="text" id="" class="form-control" placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon"><span class="ion-android-lock"></span></div>
                                <input type="password" id="" class="form-control" placeholder="Password">
                            </div>
                        </div>
                        <a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

im just simply trying to reduce the width of the input and center the form, live preview here http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview

Wild Beard · Accepted Answer · 2015-03-24 20:03:21Z

2

If you want to continue using the grid system you can change the way your col-'s are setup.

Change:

<div class="row">
  <div class="col-sm-12">
    <div class="bg-white">
      <form>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-person"></span>
            </div>
            <input type="text" id="" class="form-control" placeholder="Username">
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-android-lock"></span>
            </div>
            <input type="password" id="" class="form-control" placeholder="Password">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

To:

<div class="row">
  <div class="bg-white">
    <form>
      <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-person"></span>
            </div>
            <input type="text" id="" class="form-control" placeholder="Username">
          </div>
        </div>
      </div>
      <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><span class="ion-android-lock"></span>
            </div>
            <input type="password" id="" class="form-control" placeholder="Password">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

The main difference is that <div class="col-md-6 col-md-offset-3"> is now specifically wrapping the <div class="form-group">. Where the col-md-offset-3 is what will be centering your form.

Or to go a bit further, create a new <div class="row"> for each <div class="form-group"> instead of embedding all columns into one row.

answered Mar 24, 2015 at 20:03

Wild Beard

2,9371 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hello world Over a year ago

thank you for helping out Press, I overlooked my grid layout with my form. Thank you again

Wild Beard Over a year ago

@helloworld no problem. However I would suggest using the offset class provided by Bootstrap over using two empty <div>s. Glad we could help.

hello world Over a year ago

hmm, im not familiar with their offset class, I will look into that. Thanks!

Wild Beard Over a year ago

@helloworld it is what I used in my answer to center the inputs. It basically cuts down Mario's answer from using 3 <div>s to just one with an added class.

Mario A · Accepted Answer · 2015-03-24 20:00:49Z

1

The bootstrap way is to reduce the width of the column the form is in. With 3 columns you can center the form:

<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>

http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview

answered Mar 24, 2015 at 20:00

Mario A

3,3711 gold badge20 silver badges25 bronze badges

1 Comment

hello world Over a year ago

wow.. you dont know how long I was hacking away changing a bunch of styles to accomplish this. THANK YOU!!

Piotr Dajlido · Accepted Answer · 2015-03-24 20:04:29Z

0

Just override bootstrap .css in a particular place. Try this for eg:

put it inside the css:

input.form-control{
  max-width: 100px;
}

input.form-control will override every input with class set to : form-control

Or you can shrink the entire container class

.container{
  max-width: 250px;
}

Test here : http://plnkr.co/edit/kR69nCvsDCp9AlQqZztY?p=preview

edited Mar 24, 2015 at 20:04

answered Mar 24, 2015 at 19:59

Piotr Dajlido

2,04017 silver badges28 bronze badges

Collectives™ on Stack Overflow

how do i control width of input with bootstrap

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related