How can i apply ordered list number to each row dynamically to bootstrap rows-CodePudding

I am using bootstrap grid system and wanted to add prefix number to each row which will basically shows the number to each row. list 1, 2, 3, 4. How can I achieve that?

Desired output:

1. content will appear here
2. content will appear here
3. content will appear here
4. content will appear here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <div >
    <div >
      content will appear here
    </div>
  </div>
  <div >
    <div >
      content will appear here
    </div>
  </div>
  <div >
    <div >
      content will appear here
    </div>
  </div>
  <div >
    <div >
      content will appear here
    </div>
  </div>
</div>

CodePudding user response：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters

.container.counter {
  counter-reset: section;
}

.container.counter .row {
  counter-increment: section;
}

.container.counter .col::before {
  content: counter(section) ".";
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <div >
    <div >
      content will appear here
    </div>
  </div>
  <div >
    <div >
      content will appear here
    </div>
  </div>
  <div >
    <div >
      content will appear here
    </div>
  </div>
  <div >
    <div >
      content will appear here
    </div>
  </div>
</div>