bootstrap-4blazor-server-sidedevexpress-blazor

Align element on the right in <nav>

I'm using the DevExpress Blazor Server-Side Template and trying to add some elements to the tag on the right side. This template is built with Bootstrap 4.

<nav class="navbar header-navbar p-0">
    <div class="ml-3 font-weight-bold title pr-4">Project Name</div>
    <div class="which-class-to-use-here">
        <LoginDisplay /> |
        <DxButton Text="Projects" Click="@((args) => NavigateToProjects())" IconCssClass="fad fa-list fa-fw theme-da" IconPosition="ButtonIconPosition.BeforeText" SizeMode="SizeMode.Medium" RenderStyle="ButtonRenderStyle.Info" RenderStyleMode="ButtonRenderStyleMode.Contained" />
    </div>
</nav>

I tried a number of old CSS trick with vertical alignment and float-right but nothing works.

Solution

  • I had to learn the basics of modern CSS to find out flex. And flex-start solved my issue though I had to re-write the header a little.