CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
LuMa
LuMa

Reputation: 1763

Bootstrap: Full width inputs

I created a form with bootstrap:

    <form action="/user/add" method="POST" class="well form-inline">

        <fieldset>
            <legend>
                Information
            </legend>
            <div class="control-group">
                <div class="controls">
                    <div class="form-group">
                        <input type="input" id="firstname" class="form-control" name="firstname">
                    </div>

                    <div class="form-group">
                        <input type="input" id="lastname" class="form-control" name="lastname">
                    </div>

                    <div class="form-group">
                        <input type="input" id="age" class="form-control" name="age">
                    </div>
                </div>
            </div>
        </fieldset>

        <!-- Multiple other wells -->

    </form>

I have multiple areas in this form, like "Personal", "Interests", etc. These areas or groups are represented by a well (I would describe it as a groupbox), which contains the inputs. I have 3 inputs inline in my first well. But they aren't filling the whole well (width). How can I stretch the input fields to fill my whole well?

What it looks like:

------------------------------ Well ------------------------------
--- Input 1 --- --- Input 2 --- --- Input 3 ---

What I want:

------------------------------ Well ------------------------------
------ Input 1 ------ ------ Input 2 ------ ------ Input 3 ------

I hope you understand my piece of art ^^

Upvotes: 1

Views: 345

Answers (3)

woubuc
woubuc

Reputation: 927

You can do this using the Bootstrap grid:

    <div class="row">
      <div class="form-group col-md-4">
        <input type="input" id="firstname" class="form-control" name="firstname">
      </div>
      <div class="form-group col-md-4">
        <input type="input" id="lastname" class="form-control" name="lastname">
      </div>
      <div class="form-group col-md-4">
        <input type="input" id="age" class="form-control" name="age">
      </div>
    </div>

EDIT: You wouldn't make this form inline, you just let the Bootstrap grid do the work.

Upvotes: 6

stackov
stackov

Reputation: 71

You can do this with css with your existing code

.control-group .form-group {
  float:left;
  width:32.666%;
}
.control-group .form-group + .form-group {
  margin-left:1%;
}
.control-group .form-control {
  width:100%;
}

but i recommend changing your html and use the woubucs answer, it is more flexible, and can make full with inouts on mobile

Upvotes: 1

Dynamic Remo
Dynamic Remo

Reputation: 531

Here you go, this might help you :)

http://jsfiddle.net/DynamicRemo/8krcm0x6/1/

$('button').click(function() {
    var item = $('.item').length + 1;
    $('.contentBox').append('<div class="item">' + item + '</div>');

    var w = window.innerWidth;
    var l = $(".contentBox div").length + 1;
    $(".contentBox div").each(function(){
        $(this).css("width", w/l);
    });
});

Upvotes: 0

Related Questions