CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
hello world
hello world

Reputation: 1765

how do i control width of input with bootstrap

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

Upvotes: 1

Views: 3680

Answers (3)

Piotr Dajlido
Piotr Dajlido

Reputation: 2030

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

Upvotes: 0

Wild Beard
Wild Beard

Reputation: 2927

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.

Upvotes: 2

Mario A
Mario A

Reputation: 3363

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

Upvotes: 1

Related Questions