CODEWITHSUNDEEP
twitter-bootstrap
Seong Lee
Seong Lee

Reputation: 10580

Twitter Bootstrap - input fields inside container

I am revisiting Bootstrap and testing out input fields nested in container-fluid -> container -> row-fluid but input fields are not wrapped nicely inside either using row or row-fluid.

Here is the jsFiddle

Why would it not handle properly by default? And, how do I get around this?

I can use pre-defined Bootstrap classes such as input-large, input-xlarge and put custom padding around container or row but it is not an elegant solution.

Upvotes: 1

Views: 3906

Answers (1)

taseenb
taseenb

Reputation: 1443

Take a look: http://jsfiddle.net/FTXa7/6/

<div class="container-fluid" style="background-color:black;">

        <div class="row-fluid">
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
        </div>

</div>

When you use the fluid-container, you don't need to put also the fixed container. Also, with Bootstrap you should avoid explicitly defining width on elements: use the grid and css classes, otherwise you will have strange results.

An input element can be converted to a block element with the class "input-block-level" (do not use width=100% because Bootstrap uses negative margins to place elements on the grid and that will not work, as you could see).

PLUS: example using nested rows in fluid grids:

<div class="container-fluid" style="background-color:black;">

        <div class="row-fluid">
            <div class="span10 offset1">

                <div class="row-fluid">
                    <div class="span12">
                        <label>test</label>
                        <input type="text" class="input-block-level">
                    </div>
                </div>

            </div>
        </div>

</div>

By using the fluid grid (12 columns) and offsets, you can get almost any layout you want. The example above shows a way to center a fluid element inside another one, by using offset.

span10 + offset1 = 11 columns. So you still have 1 column on the right: this is centered.

REMEMBER: every row has 12 columns, starting from left.

12 columns is 100%, 9 = 75%, 6 = 50%, 3 = 25%, etc.

Upvotes: 2

Related Questions