CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
chromedome
chromedome

Reputation: 47

How can I reduce the gutter between columns on bootstrap?

demo: http://www.bootply.com/drT0TDRetE

How can I reduce the gutter between the yellow blocks? I want the red div to align properly on top of the yellow blocks like it currently is. I tried reducing the padding for the columns but then the red div does not align properly.

<div class="container">
    <div class="row">
        <div class=" col-xs-3 ">
            <div class="side-menu">1
                <br>2
                <br>3</div>
        </div>

        <div class="col-xs-9">
            <div class=" menu ">
                menu options here
            </div>

            <div class="row ">
                <div class="col-xs-4 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 ">
                    <div class="food-item "></div>
                </div>
            </div>
        </div>

    </div>
</div>

CSS

.food-item {
    width: 100 % ;
    background: red;
    height: 200px;
    background: yellow;
}

.menu {
    background: red;
}

.side-menu {
    background: green;
}

Upvotes: 0

Views: 899

Answers (1)

Christina
Christina

Reputation: 34652

DEMO http://www.bootply.com/chuUEA13P4

You have to reduce the padding and the row margin to match:

[class*="col-"].gutter-5 {padding-left:5px;padding-right:5px;}
.row.gutter-5 {margin-left:-5px;margin-right:-5px}

HTML

<div class="container">
    <div class="row">
        <div class=" col-xs-3 ">
            <div class="side-menu">1
                <br>2
                <br>3</div>
        </div>

        <div class="col-xs-9 gutter-5">
            <div class=" menu ">
                menu options here
            </div>

            <div class="row gutter-5">
                <div class="col-xs-4 gutter-5 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 gutter-5 ">
                    <div class="food-item "></div>
                </div>
                <div class="col-xs-4 gutter-5">
                    <div class="food-item "></div>
                </div>
            </div>
        </div>

    </div>
</div>

Upvotes: 3

Related Questions