CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Tanuj
Tanuj

Reputation: 567

Understanding grid system in bootstrap 3?

<div class="col-lg-9">
    <!-- Tab Content -->
    <div class="tab-content">
        <div class="tab-pane active" id="bookmark">
            <h1><center>Book Marks</center></h1>
            <div class="col-lg-3 productholder"></div>
            <div class="col-lg-3 productholder"></div>
            <div class="col-lg-3 productholder"></div>
        </div>
    </div>
</div>

If I am a div by col-lg-9 this divides my container into 9 parts? But when I am creating other divs inside col-lg-9, the container is not equally filled.

Upvotes: 0

Views: 81

Answers (1)

nozzleman
nozzleman

Reputation: 9649

If you are a div of col-lg-9, you take the horizontal space of nine columns (of 12) of the wrapping container.

But that means that there must be some kind of container. See this code.

<!-- still full width -->
<div class="col-lg-9" style="background-color:green;">R</div>

<!-- 9/12 -->
<div class="container">
    <div class="col-lg-9" style="background-color:blue;">R</div>
</div>

So to rephrase your understanding: if you are a div of container, you devide the horizontal space into 12 columns. The col-??-xx classes each take the horizontal space of xx/12 from the wrapping container (or sometimes row or col-??-xx-div's). But take note that the grid needs to start with a container or container-fluid which initially provides the 12 columns.

The bootstap documentation has a very good part on its grid system which you would want to read for further information. If you are more the practical type of learner, I would recommend inspecting the code of the grid examples provided by bootstrap.

Upvotes: 1

Related Questions