CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Greg Peckory
Greg Peckory

Reputation: 375

Make bootstrap columns fill screen width in grid

Here is a link to some bootstrap code

In the demo you can see the cells resize and stack nicely (use full screen for best effect).

However, the cells don't fill up the entire screen width!!

How do I have an identical setup, only the cells always cover the entirety of the screen horizontally??

Upvotes: 1

Views: 11871

Answers (2)

Shank
Shank

Reputation: 1398

Just remove the container div tag or add container-fluid instead of container

        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
        </div>

</body>
</html>

Upvotes: 1

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Replace main wrapper class from container to container-fluid and it will fill to width:100%

Upvotes: 8

Related Questions