How to set width to Input text field in bootstrap under class

Question

In the below layout, the last text field(UserName) alone not in correct size. I tried many ways, but nothing works. pls share any idea. my code is

<div id="wrapper">

        <div class="row">
                <div class="col-lg-6  vcenter ">
                    <div class="panel panel-success">
                        <div class="panel-heading text-center">
                            <h4>Login Help</h4>
                        </div>
                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">

                                    <div class="row col-lg-12 radio">
                                        <label>
                                            <input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username
                                        </label>
                                        <div class="form-group col-lg-offset-3" style="margin-top:2%;">
                                            <label>
                                            <input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email
                                            </label>
                                            <label class="form-group col-lg-offset-1">
                                            <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile
                                            </label>
                                        </div>
                                    </div>
                                        <div class="row col-lg-6">
                                            <label>Email Address</label>
                                            <!--<input class="col-lg-offset-1">-->
                                            <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
                                        </div>

                                    <div class="radio row col-lg-12" style="margin-top:5%;">
                                        <label>
                                            <input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password
                                        </label>
                                        <div class="form-group col-lg-offset-3" style="margin-top:2%;">
                                            <label>
                                            <input type="radio" name="pwdMailMob" id="mail2" value="option1">Email
                                            </label>
                                            <label class="form-group col-lg-offset-1">
                                            <input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile
                                            </label>
                                        </div>
                                    </div>
                                        <div class="row col-lg-6">
                                            <label>Email Address</label>
                                            <!--<input class="col-lg-offset-1">-->
                                            <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
                                        </div>

                                        <div class="col-lg-12 row">
                                            <div class="col-lg-6">

                                                <label>Username</label>
                                                <input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
                                            </div>
                                        </div>


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

@Torean The OP didn't indent their code, I've fixed it in an edit. — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 14, 2015 at 16:45
Did you want the text fields horizontally next to the lables or leave everything as is and just have the fields all the exact same (have the last field the same as the ones above it)? — TrojanMorse
– TrojanMorse, Commented Oct 14, 2015 at 16:52
Row and col-lg-12 are 100% width with appropriate margins and padding. You shouldn't use both on one element. Instead nest cols inside rows. — Adam Milecki
– Adam Milecki, Commented Oct 14, 2015 at 16:56

vanburen · Accepted Answer · 2015-10-14 18:08:40Z

If all you're concerned with is the size of the last input then change this:

You have col-lg-12 row with a col-lg-6 inside of it, remove the col-lg-6 and change the col-lg-12 row to col-lg-6 row.

That being said I've included two alternative layouts that use bootstrap default classes and standard layouts for forms that may help as you're mixing col-*-* with rows in the same div and that isn't how the grid is structured.

See working examples with your original code (*fixed) and two samples.

<div class="col-lg-6 row">
  <label>Username</label>
    <input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>

<div class="container">
  <div class="row">
    <div class="col-lg-6  vcenter ">
      <div class="panel panel-success">
        <div class="panel-heading text-center">
          <h4>Login Help (Original)</h4>

        </div>
        <div class="panel-body">
          <form role="form">
            <div class="form-group">
              <div class="row col-lg-12 radio">
                <label>
                  <input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
                <div class="form-group col-lg-offset-3" style="margin-top:2%;">
                  <label>
                    <input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
                  <label class="form-group col-lg-offset-1">
                    <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
                </div>
              </div>
              <div class="row col-lg-6">
                <label>Email Address</label>
                <!--<input class="col-lg-offset-1">-->
                <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
              </div>
              <div class="radio row col-lg-12" style="margin-top:5%;">
                <label>
                  <input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
                <div class="form-group col-lg-offset-3" style="margin-top:2%;">
                  <label>
                    <input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
                  <label class="form-group col-lg-offset-1">
                    <input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
                </div>
              </div>
              <div class="row col-lg-6">
                <label>Email Address</label>
                <!--<input class="col-lg-offset-1">-->
                <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
              </div>
              <div class="col-lg-6 row">

                <label>Username</label>
                <input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">

              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-6 vcenter">
      <div class="row">
        <div class="panel panel-warning">
          <div class="panel-heading text-center">
            <h4>Standard Form</h4>

          </div>
          <div class="panel-body">
            <form role="form">
              <div class="form-group">
                <div class="col-sm-12">
                  <div class="radio">
                    <label>
                      <input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
                    <label>
                      <input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
                    <label>
                      <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-6">
                  <label>Email Address</label>
                  <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <div class="radio">
                    <label>
                      <input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
                    <label>
                      <input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
                    <label>
                      <input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-6">
                  <label>Email Address</label>
                  <input class="form-control" placeholder="E-mail" name="email" type="email">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-6">
                  <label>Username</label>
                  <input class="form-control" placeholder="Username" name="uname" type="text">
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-6 vcenter">
      <div class="row">
        <div class="panel panel-info">
          <div class="panel-heading text-center">
            <h4>INLINE FORM</h4>

          </div>
          <div class="panel-body">
            <form role="form" class="form-horizontal">
              <div class="form-group">
                <div class="col-sm-12">
                  <label class="radio-inline">
                    <input type="radio" name="userPwd" id="userpwd1" value="option1" checked/>Forgot Username</label>
                  <label class="radio-inline">
                    <input type="radio" name="userMailMob" id="mail1" value="option1" checked/>Email</label>
                  <label class="radio-inline">
                    <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-4">Email Address</label>
                <div class="col-sm-8">
                  <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <label class="radio-inline">
                    <input type="radio" name="userPwd" id="userpwd2" value="option2" />Forgot Password</label>
                  <label class="radio-inline">
                    <input type="radio" name="pwdMailMob" id="mail2" value="option1" />Email</label>
                  <label class="radio-inline">
                    <input type="radio" name="pwdMailMob" id="mob2" value="option1" />Mobile</label>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-4">Email Address</label>
                <div class="col-sm-8">
                  <input class="form-control" placeholder="E-mail" name="email" type="email" />
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-4">Username</label>
                <div class="col-sm-8">
                  <input class="form-control" placeholder="Username" name="uname" type="text" />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Set the heights of input elements using classes like .input-lg and .input-sm.

Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*.

bootstrap

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 14, 2015 at 16:45

Mario Kurzweil

4806 silver badges11 bronze badges

2 Comments

Spencer Wieczorek Over a year ago

Why not just reference Bootstraps official site?

Mario Kurzweil Over a year ago

This was just a quick search, but I will change it.

Collectives™ on Stack Overflow

How to set width to Input text field in bootstrap under class

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related