How to decrease bootstrap Ivs spacing

Question

Good afternoon! I have a question/problem/problem. I’m using the bootstrap to make a layout, but the spacing between the Divs is very large, I wanted it to be smaller... has as?

That’s how Ivs get, like, super apart

But I wanted them to stay that way.

Thank you for any help and have a great day!

Answer 1

In Bootstrap 3 all columns have a padding on the sides of 15px for each side.

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
} 

Just change this value in paddings to "narrow" that gap between one column and another.

Here is the official documentation and you can check the default value of the standard "Gutter" https://getbootstrap.com/docs/3.3/css/#grid-options

Example with padding adjusted, decreases from standard 15px on each side to 6px on each side

div[class^="col-"] {
    box-sizing: border-box;
    border: 1px solid red;
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.bg {
width: 100%;
height: 50px;
background-color: aquamarine;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
    <div class="row">
        <div class="col-xs-4"><div class="bg">1</div></div>
        <div class="col-xs-4"><div class="bg">2</div></div>
        <div class="col-xs-4"><div class="bg">3</div></div>
    </div>
</div>