This is probably a dumb question, but I can't really figure it out. How do I add a text to the icon navbar like here?
Below is my navbar; I'm using the basic Bootstrap CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navbar start-->
<nav class="navbar fixed-bottom navbar-dark navbar-expand bg-dark">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav position-relative start-50 translate-middle-x">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M12.5 7.25a.75.75 0 00-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 00.744-1.302L12.5 12.315V7.25z"></path><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"></path></svg></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M2.5 2.75a.75.75 0 00-1.5 0v18.5c0 .414.336.75.75.75H20a.75.75 0 000-1.5H2.5V2.75z"></path><path d="M22.28 7.78a.75.75 0 00-1.06-1.06l-5.72 5.72-3.72-3.72a.75.75 0 00-1.06 0l-6 6a.75.75 0 101.06 1.06l5.47-5.47 3.72 3.72a.75.75 0 001.06 0l6.25-6.25z"></path></svg></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar end-->There are several ways you could approach this. One way is to make the nav-links flex columns and (d-flex flex-column) add the text in a separate span...
<li class="nav-item">
<a class="nav-link d-flex flex-column align-items-center" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
...
</svg>
<span class="small">text</span>
</a>
</li>