Twitter Bootstrap Question posted in

Twitter bootstrap – Each form control display on its own line and strech the entire screen

My form looks great with Twitter Bootstrap 3 but I don’t want it to look like this:

good but not good enough

And more like this:

perfecto

I was able to make my button group on another page do this with btn-group-vertical btn-group-lg btn-block class. But I didn’t yet find anything that does the same with form controls in Bootstrap 3.

My form code:

<!-- login form box -->
<form name="loginform" method="post" action="index.php" role="form">
    <div class="form-group col-lg-3">
        <label for="login_input_username" class="sr-only">Username</label>
        <input type="text" id="login_input_username" name="user_name" class="form-control input-lg" placeholder="Enter username" required />
    </div>
    <div class="form-group col-lg-3">
        <label for="login_input_password" class="sr-only">Password</label>
        <input type="password"  id="login_input_password" name="user_password" class="form-control input-lg" class="form_control" placeholder="Enter password" autocomplete="off" required />
    </div>
    <div class="form-group col-lg-3">
        <button type="submit" name="login" class="btn btn-block btn-success btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button>
    </div>
    <div class="form-group col-lg-3">
        // here I display the alert box
    </div>
</form>
Tags:

3

Answers


  1. 0

    You are wrapping your form fields in a col-lg-3, making them only 3 columns wide. Remove that class from the .form-group div.

    That will make them stretch to the size of the form.

    Login or Signup to reply.
  2. 0

    I would suggest instead of using the classes “form-group col-lg-3”,
    use this class “form-group col-lg-12”. It should then fill the entire grid width.

    Login or Signup to reply.
  3. 0

    BaddieProgrammer, I have set up a Fiddle here to view two options and how they will look.

    Both do what you are wanting here to stretch the form across the screen.
    The green container has full width all bar the lg size.

    The blue container uses Bootstrap classes to give you more control and a better look when viewed on all screen sizes.
    Hope the top option will give you a better idea for how Bootstrap can work here for you.

    Here is the normal size Fiddle so you can look through the code.

    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 bg-primary block">
    <!-- login form box -->
    <form name="loginform" method="post" action="index.php" role="form">
        <div class="form-group col-lg-12">
            <label for="login_input_username" class="sr-only">Username</label>
            <input type="text" id="login_input_username" name="user_name" class="form-control input-lg" placeholder="Enter username" required />
        </div>
        <div class="form-group col-lg-12">
            <label for="login_input_password" class="sr-only">Password</label>
            <input type="password"  id="login_input_password" name="user_password" class="form-control input-lg" class="form_control" placeholder="Enter password" autocomplete="off" required />
        </div>
        <div class="form-group col-lg-12">
            <button type="submit" name="login" class="btn btn-block btn-success btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button>
        </div>
        <div class="form-group col-lg-12">
        <!-- here I display the alert box -->
        </div>
    </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search