How to organize icons on navbar using Bootstrap in a Blazor WASM app with .NET 6?

Cenk 991 Reputation points
2024-06-14T13:48:29.6+00:00

I'm working on an e-commerce app and I want to properly organize the icons on my navbar using Bootstrap 5 CSS. Specifically, I want to display the icons side by side, with equal spacing, and have the username appear right under the green login icon. Can someone provide guidance on how to accomplish this?

Here's the code I'm currently working with:

 <div class="navbar align-self-center d-flex">
    <div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
        <div class="input-group">
            <input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ...">
            <div class="input-group-text">
                <i class="fa fa-fw fa-search"></i>
            </div>
        </div>
    </div>
    <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
        <i class="fa fa-fw fa-search text-dark mr-2"></i>
    </a>
    <a class="nav-icon position-relative text-decoration-none" href="#">
        <i class="fa fa-fw fa-cart-arrow-down @(GetCartCount() > 0 ? "bg-light text-green" : "bg-light text-dark") mr-1"></i>
        <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">@GetCartCount()</span>
    </a>
    <AuthorizeView>
        <Authorized>
            <a class="nav-icon position-relative text-decoration-none" href="#">
                <i class="fa fa-fw fa-user text-green mr-3"></i>
                @* <div class="user-name" style="display: block; margin-top: 3px; font-size: 11px !important;">@context.User.Identity.Name</div> *@
            </a>
            <a class="nav-icon position-relative text-decoration-none" href="logout" >
                <i class="fa fa-fw fa-sign-in-alt text-dark mr-3"></i>
            </a>
        </Authorized>
        <NotAuthorized>
            <a class="nav-icon position-relative text-decoration-none" href="login">
                <i class="fa fa-fw fa-sign-out-alt text-dark mr-3"></i>
                @* <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark"></span> *@
            </a>
            <a class="nav-icon position-relative text-decoration-none" href="signup">
                <i class="fa fa-fw fa-user-plus text-dark mr-3"></i> <!-- Register icon -->
                @* <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark"></span> *@
            </a>
        </NotAuthorized>
    </AuthorizeView>
</div>
<AuthorizeView>
    <Authorized>
        <a class="nav-icon position-relative text-decoration-none" href="#">
            <div class="user-icon-and-name">
                <i class="fa fa-fw fa-user text-green mr-3"></i>
                <span class="user-name">@context.User.Identity.Name</span>
            </div>
        </a>
        <a class="nav-icon position-relative text-decoration-none" href="logout" >
            <i class="fa fa-fw fa-sign-in-alt text-dark mr-3"></i>
            
        </a>
    </Authorized>
    <NotAuthorized>
        <a class="nav-icon position-relative text-decoration-none" href="login">
            <i class="fa fa-fw fa-sign-out-alt text-dark mr-3"></i>
        </a>
        <a class="nav-icon position-relative text-decoration-none" href="signup">
            <i class="fa fa-fw fa-user-plus text-dark mr-3"></i>
         </a>
    </NotAuthorized>
</AuthorizeView>

And here's the custom CSS I've added so far:

.text-green {
    color: #28a745; /* Bootstrap's .text-success color, or you can use any green color you prefer */
}
.user-icon-and-name {
    text-align: center; /* Center the contents */
}
.user-name {
    display: block; /* Make the span a block element to ensure it appears on a new line */
    margin-top: 3px; /* Adjust the space between the icon and the name */
    font-size: 11px !important;
}


Here is how I wanted to position;

Firefox_Screenshot_2024-06-15T05-51-09.764Z

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,393 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,497 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,637 questions
{count} votes