Is there a way to center all columns in a row horizontally in Bootstrap 4?
The first row is centered correctly, but the columns in the second row are not aligned properly even though they have the same class.
Here's my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.bg{
background: url('bg.jpg') center / cover no-repeat;
height: 600px;
}
.row1{
padding-top: 200px;
}
.row2{
padding-top: 100px;
}
img{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 6px;
}
.img1{
height: 164px;
}
.img2{
height: 258px;
width: 238px;
}
</style>
</head>
<body>
<div class="container-fluid bg">
<div class="row justify-content-center row1">
<img src="img1.jpg" class="img1" alt="Italian Trulli">
</div>
<div class="row justify-content-center row2">
<div class="col col-lg-2 text-center">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2 text-center">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2 text-center">
<img src="factory.jpg" class="img2" alt="Italian Trulli">
</div>
</div>
</div>
</body>
</html>
The image below shows that the second row is not correctly aligned: https://i.sstatic.net/r2kCw.png