Bootstrap icon remove ::before

Issue

I am adding bootstrap icons dynamically and I want these to appear in new lines. However the result is that the icons and text are appearing in the same line. See image

this is the code that is generated:

<div class="row ml-1" id="refine">
  <br>
  <i class='bi bi-trash'>
    ::before
  </i> 
    "A1 - North Somerset core strategy"
  <br>
  <br>
  <i class='bi bi-trash'>
    ::before
  </i> 
    "Ashton Vale"
  <br>
  <br>
  <i class='bi bi-trash'>
    ::before
  </i> 
    "NPPF Sept 23"
  <br>
 </div>

How can I get the icon/text to appear on separate lines? is it something to do with the autogenerated ::before? If so, how do i supress that?

Solution

Just change the class row to col of the #refine div, like so:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col ml-1" id="refine">
  <br>
  <i class='bi bi-trash'></i> 
    "A1 - North Somerset core strategy"
  <br>
  <br>
  <i class='bi bi-trash'></i> 
    "Ashton Vale"
  <br>
  <br>
  <i class='bi bi-trash'></i> 
    "NPPF Sept 23"
  <br>
 </div>

And the ::before is not part of the DOM, it's just a marking of the pseudo element in the browser.

Answered By - iorgv