title: How can I place icons next to a progress bar in bootstrap?
body: <p>I am trying to achieve the following result using bootstrap components:
  <a href="https://i.stack.imgur.com/mQbix.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mQbix.png" alt="enter image description here" /></a></p>
  <p>The diamonds labeled 1 and 2 represent icons I wish to place on each side. I want them as close and properly lined up to the progress bar as possible.</p>
  <p>I tried putting them inside and besides the bar and using floats, sadly this did not help. I hope that someone can help me out here.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row mt-3"&gt;
    &lt;div class="col-md-6 text-center"&gt;
      &lt;p&gt;1: &lt;i class="fas fa-video my-3"&gt;&lt;/i&gt; Maak je account&lt;/p&gt;
      &lt;p id="label-1" class="progress-label"&gt;text&lt;/p&gt;
      &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"&gt;&lt;/div&gt;
      &lt;/div&gt;
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio dolores aperiam, ab soluta placeat sapiente beatae cupiditate voluptate tempore sed quaerat facere eum temporibus quam modi! Obcaecati, aspernatur. Sint, qui.
    &lt;/div&gt;
    &lt;div class="col-md-6 text-center"&gt;
      &lt;p&gt;2: &lt;i class="fas fa-video my-3"&gt;&lt;/i&gt; Kies je pakket&lt;/p&gt;
      &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"&gt;&lt;/div&gt;
      &lt;/div&gt;
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, pariatur doloribus eligendi deleniti aut adipisci aspernatur et eum minima ipsum esse? Necessitatibus natus atque quam! Laborum quia quibusdam nostrum voluptates?
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Obviously, this is without the proper library attached (which is bootstrap) I sadly didn't figure out a way to link it to the snippet. If anyone knows how: I'd greatly appreciate a tip on that matter.</p>