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>

1

Use margin-right: auto; or the .me-auto class on the last .col-3 child.

.col-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

.container {
  margin-bottom: 2em;
}


.row > .col-3:last-child {
  margin-right: auto;
}
<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">
  <h4> w/ justify-content-center </h4>
  <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>

You can also just remove justify-content-center. See notes in the markup.

.col-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

.container {
  margin-bottom: 2em;
}
<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">
  <h4> w/ justify-content-center </h4>
  <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>

<div class="container">
  <h4> w/o justify-content-center </h4>
  <div class="row col-xl-3 col-lg-4 col-md-6 col-sm-12">
    <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>

<div class="container">
  <h4> full width w/ justify-content-center </h4>
  <div class="row 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>

<div class="container">
  <h4> full width w/o justify-content-center but container has max-width, resembles first fully populated row to be centered </h4>
  <div class="row col-sm-12">
    <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>

5