CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
boisterouslobster
boisterouslobster

Reputation: 1293

Bootstrap reduce spacing between columns

Having an issue reducing the amount of spacing between buttons in the same row. These buttons are wrapped in columns Spacing issue buttons JSFiddle

Is there an easy way to do this? I imagine using negative margins or padding is not necessarily desirable.

Upvotes: 2

Views: 7722

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362820

In Bootstrap 4, you don't need the extra CSS. Just use the spacing utils (p-*) or the no-gutters class...

<div class="form-group">
    <div class="row no-gutters">
        <div class="col-6">
            <button class="btn btn-block">Test One
                <br>Some More</button>
        </div>
        <div class="col-6">
            <button class="btn btn-block">Test Two
                <br>Some More)</button>
        </div>
    </div>
    <div class="row">
        <div class="col-6 pr-1">
            <button class="btn btn-block">Test Three
                <br>Some More</button>
        </div>
        <div class="col-6 pl-1">
            <button class="btn btn-block">Test Four
                <br>Some More</button>
        </div>
    </div>
</div>

https://www.codeply.com/go/AjLhoAztxt

Upvotes: 1

Niles Tanner
Niles Tanner

Reputation: 4041

The problem seems to be with the padding not the margin. This piece of css removes the white space between the columns

   .form-group .col-xs-6{
      padding: 0px;
    }

Upvotes: 6

Related Questions