Good afternoon! I have a question / problem / problem. I'm using the bootstrap to do a layout, but the spacing between the divs is very large, I wanted it to be smaller ... whats the reason?
This is how the divs get, far away
ButIwantedthemtostaythatway.
Thanks for any help and have a great day!
In Bootstrap 3 all columns have 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 the% s of% s to "narrow" that space between columns.
Here you have the official documentation and you can check the default value of the "gutter" link
Example with padding set, decreases from 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>