I am looking for a solution where the dynamically generated rows of a div are aligned center but only for the first row, I mean if it is one row and the elements in a row are less than specified bootstrap class property col-xl-3 col-lg-4 col-md-6 col-sm-12
. then align them center but when elements are more and they start filling the second row then the second-row elements should start from the left not from the center.
Is there any direct keyword for this or do I have to write some logic? Below is the code:
.col-3 {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row col-xl-3 col-lg-4 col-md-6 col-sm-12 justify-content-center">
<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
<div class="col-3">4</div>
<div class="col-3">5</div>
<div class="col-3">6</div>
</div>
</div>