Grid System Not Working Properly

1
votes

For some reason, bootstrap is only allowing me to use the "col-sm" class. If I enter anything else into my code, including the "xs" class, the columns are stacked on top of one another. This is my code:

    <div class="container-fluid">
            <div class="row">
                <div class="col-xs-9">
                    <div class="well">something here</div>
                </div>
                <div class="col-xs-3">
                    <div class="well">something here</div>
                </div>
            </div>
        </div>

I have ensured that the appropriate CSS, JS, and jQuery files are linked (hence why the "col-sm" class works), and only have my own personal CSS style-sheet linked in addition to them (which does not predefine any width or height for any element). Furthermore, I am viewing my work on the latest version of Mozilla Firefox.

Edit: I have closed the div with the class "fluid-container", it still produces the same problem. That is, instead of the two columns appearing on the same row, the two columns are stacked on top of one another. For some reason, the only class that works is "col-sm"--any other class, including the "xs", just lines the columns atop of one another.

3
htmlcsstwitter-bootstrap
Welcome to Stack Overflow! Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See How to create a Minimal, Complete, and Verifiable example - Paulie_D
I closed the <div> tag with the class "container-fluid", it still produces the same problem: rather than being on the same row, the two columns are stacked on top of one another. - Matt
Took care of this by updating the Bootstrap files to the latest version... Now my logo isn't centered and the links are too squeezed in... - Matt

3 Answers

3
votes

Your code is correct only the thing u missed out is the last '>' closing of div tag. replace:

<div class="container-fluid"

with:

<div class="container-fluid">
2
votes

Please fix your div first <div class="container-fluid" missing > See below corrected format

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-9">
                <div class="well">something here</div>
            </div>
            <div class="col-xs-3">
                <div class="well">something here</div>
            </div>
        </div>
    </div>
0
votes

Use the latest stable version 3.7.7 of bootstrap and this problem will be solved. You can download it from here. If you don't want to use the newest version, you can try to use col-sm-9 instead of col-xs-9 and col-sm-3 instead of col-xs-3, it will also solve the problem.