Horizontally align some div - html

Question

I started to learn Bootstrap since few days, and I am facing a problem about horizontal alignment.
In my exemple below, I want to distribute equitably the three divs "first", "second" and "third" on the screen, but it doesn't work.
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
Nevertheless, "justify-content-between" doesn't change anything...
Does anyone could help me?

Answer 1

If your using boostrap 4.1.1
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
.row is used
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
so you can just use,
<div class="container">
<div class="row ">
<div class="col-12 col-md-4 first">
<div class="text-center">
first 1
</div>
</div>
<div class="col-12 col-md-4 second">
<div class="text-center">second<br>second</div>
</div>
<div class="col-12 col-md-4 third">
<div class="text-center">third<br>third<br>third</div>
</div>
</div>
</div>
Further follow https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

Use only the col class instead of all the other col-* classes for the three columns.
.first,
.second,
.third {
height: 500px;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="first"></div>
</div>
<div class="col">
<div class="second"></div>
</div>
<div class="col">
<div class="third"></div>
</div>
</div>
</div>
You should not use fixed height. I have used just to show that the divs are aligned at the center.
Visit this link for more info
Update
If the content of the columns are img as you have commented that they are, then you should do this:
Use only col-12 and col-md-4. col-12 covers col-sm-12. And col-md-4 covers col-lg-4 also.
For the images, use img-fluid, d-block, and mx-auto classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
Update
In order to add space on the left and right side of the images, use px-5 for the columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
if you still need more space, use custom css.
.px-10 {
padding-left: 120px;
padding-right: 120px;
}

Answer 3

what i understood from that image that you sent that mean you already defined width and height for those divs and if you want to center those divs into the col you have to use margin:auto
PLEASE open the snippet in a full page mode to see it clearly
i just make a snippet to show you 2 cases the first case if you dont use fixed width it will take the col width as you define it here col-12 col-sm-12 col-md-4 col-lg-4" but once you use fixed width then you have to center the div with margin:auto
.row {
background-color: #eee;
}
.first {
height: 100px;
/* width: 100px; */
background-color: red;
}
.second {
height: 100px;
/* width: 100px; */
background-color: blue;
}
.third {
height: 100px;
/* width: 100px; */
background-color: green;
}
.first2 {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
.second2 {
height: 100px;
width: 100px;
background-color: blue;
margin: auto;
}
.third2 {
height: 100px;
width: 100px;
background-color: green;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third2"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third3"></div>
</div>
</div>
</div>