Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-2

bootstrap 2 grid displaying not behaving as expected (span12...)

I copy pasted the sample code from bootstrap site and do not get the expected result

Adapted from here: view-source:http://getbootstrap.com/2.3.2/base-css.html#forms

My code is:
<!doctype html>
<html lang="en">
<head>
..................
</head>

<body>

<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
    <div class="controls ">
        <input class="span12" type="text" placeholder=".span12">
    </div>
    <div class="controls controls-row span12">
        <input class="span4" type="text" placeholder=".span4"> 
        <input class="span8" type="text" placeholder=".span8">
    </div>
        <div class="controls controls-row span12">
        <input class="span9" type="text" placeholder=".span9"> 
        <input class="span3" type="text" placeholder=".span3">
    </div>
        </div>
        <div class="controls controls-row span12">
        <input class="span6" type="text" placeholder=".span6"> 
        <input class="span6" type="text" placeholder=".span6">
    </div>
</form>
...

</body>
</html>

It displayed as per attached screenshot.

enter image description here

There are 3 things that are not as expected: - The grid displays on half screen although I set span12 class. - What should be the 3rd line has been concatenated after the 2nd line - The second line's starting position is a bit on the right of the 1st line starting position

Any help appreciated to get this clarified.

I have to stick to bootstrap2 by the way, I cannot use bootstrap3 for this project.

Solution

  • The correct format to solve all of the 3 problems was actually :

    <form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
    <div class="controls  ">
        <input class="span12" type="text" placeholder=".span12">
    </div>
    <div class="controls controls-row ">
        <input class="span4" type="text" placeholder=".span4"> 
        <input class="span8" type="text" placeholder=".span8">
    </div>
    <div class="controls controls-row ">
        <input class="span9" type="text" placeholder=".span9"> 
        <input class="span3" type="text" placeholder=".span3">
    </div>
    <div class="controls controls-row ">
        <input class="span6" type="text" placeholder=".span6"> 
        <input class="span6" type="text" placeholder=".span6">
    </div>
</form>

    It looks the span12 tag inside the divs of line2, 3 and 4 was causing the mess. Thx all for your assistance.