Container row space between col - css

Question

I have a container with several rows. And in each row I have several columns.
I would like to increase the space between each column
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col-md-4 card ">
Colonne 1
</div>
<div class="col-md-4 card">
Colonne 2
</div>
<div class="col-md-4 card">
Colonne 3
</div>
</div>
</div>
<div>

Answer 1

instead usind col-x while you want the same width, you may only use col and they will span the row with an equal width and let you add horizontal margins .
example
.card {
border: solid;/* to show where they are*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col card mx-1 ">
Colonne 1
</div>
<div class="col card mx-1">
Colonne 2
</div>
<div class="col card mx-1">
Colonne 3
</div>
</div>
</div>
<div>
ressources :
https://getbootstrap.com/docs/4.0/utilities/spacing/
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
which is the reason of the mx-1 class added
https://getbootstrap.com/docs/4.0/layout/grid/
where you can find col class which is used to auto-size the columns , if all box receive the col class, they should be of equal width.

Answer 2

<div class="container">
<div class="card-deck text-center mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
</div>
</div>
I used this with cards, I think this what you're looking for.
Keep me updated! ;)

Answer 3

Use CSS margin property.
.card {
margin: 0px 10px;
}
Working example
.card {
margin: 0px 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col col-md-4 card ">
Colonne 1
</div>
<div class="col col-md-4 card">
Colonne 2
</div>
<div class="col col-md-4 card">
Colonne 3
</div>
</div>
</div>
<div>

Answer 4

Bootstrap columns have no space between.
Make another div inside by default column 4 has 15px padding which means if you make div inside it will leave space on both left and right side.
<div class="col-sm-4">
<div class="inner">
Your Content Here
</div>
</div>