title: Bootstrap 5 Navigation Arrows
body: <p>I want to have the navigation arrows like so:</p>
  <pre><code>                &lt;a class=&quot;carousel-control-next display-1&quot; href=&quot;#&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
                      &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;/a&gt;
  </code></pre>
  <p>When I use them inside a carousel, they look nice.</p>
  <p>But I want to use them independently, not in a carousel. When I tried using them independently, the arrows popup way outside of my container, like on the edges of the screen, which is crazy unpredictable behavior.</p>
  <p>On the other hand, when I create an empty carousel and try to use the arrow with a &quot;blank carousel&quot; the arrow just shrinks to a tiny size.</p>
  <p>Basically, I want to use the 'a' tag independently but with the navigation icons.</p>
  <p>I searched online and found a Bootstrap-3 answer that involved glyphicons which did not work.</p>
  <p>Please, I want to fix this without spending hours on such a feature.</p>
  <p>Thank you</p>