I need a solution where the rows generated dynamically within a div are centered only if it is the first row. If there is only one row and the elements in that row do not fill up to the specified Bootstrap class properties
col-xl-3 col-lg-4 col-md-6 col-sm-12
, then align them center. However, when there are more elements causing a second row to be created, the elements in the second row should start from the left, not from the center.
Is there a specific keyword for this requirement or will I have to implement some logic myself? The code snippet is provided below:
.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>