CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

bootstrap container grid not full width

My bootstrap grid container is not full width. See image:

enter image description here

The container is only the bit at the top.

here is the code:

HTML:

<div class="container" style="width:100%">
    <div id="my-row" class="row" style="width:100%">
        <div class="col-sm-4 panel" style="background-color: red">
            <h4 class="white light" style="margin-top:0px; padding: 20px 0px 0px 20px; float: left;">WHAT WE GROW</h4>
        </div>
        <div class="col-sm-4 panel " style="background-color: yellow ">
        </div>
        <div class="col-sm-4 panel " style="background-color: blue ">
            <h4 class="white light " style="margin-top:0px; padding: 20px 20px 0px 0px; float: right; color: pink; ">SIGN UP FREE</h4>
        </div>
    </div>
</div>

CSS:

#my-row {
    display: table;
    height:20%;
}

#my-row .panel {
    float: none;
    display: table-cell;
    vertical-align: top;
}

How do I make the container go the full width?

Upvotes: 5

Views: 23953

Answers (4)

Vin&#237;cius Fagundes
Vin&#237;cius Fagundes

Reputation: 2041

First of all use: .container-fluid for full width, no need to add style="width:100%" if you use it.

Second, remove margin and add full width to row:

#my-row {
    display: table;
    height:20%;
    width: 100%;
    margin: 0;
}

Remove padding from container-fluid:

.no-padding {
    padding: 0 !important;
}

Answer:

<div class="container-fluid no-padding">

</div>

DEMO

Upvotes: 20

Sarower Jahan
Sarower Jahan

Reputation: 1495

Add this css below to the .container class..

padding-left: 0;
padding-right: 0;

Add this css below to the #my-row id..

margin-left: 0;
margin-right: 0;

View my live demo on jsfiddle

Upvotes: 1

Nathan
Nathan

Reputation: 920

Instead of using the container class you should use the container-fluid class.
This gives the div 100% width.

If you really want to use container you can add !important after setting the width to 100%. This will override the normal bootstrap styles. But I do not recommend this.

Upvotes: 0

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2551

You just have to remove width:100% from the #my-row element.

DEMO

Upvotes: 1

Related Questions