We Keep Coding

mr-auto class of bootstrap not working as excepted?

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav **mr-auto**">
<li class="nav-item active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Terms</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server">View Books</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server">User Login</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server">Sign Up</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server">Logout</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server">Hello user</asp:LinkButton>
</li>
</ul>
</div>
See the navigation there is some margin left between the logo and the buttons
I imported this code form bootstrap but the first is not totally aligning left but the second is rightly aligned to the right hand sidesee I have inspected this but it looks fine to me

According to the documentation of Flex of Bootstrap 4:
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
To enable this behavior you need to add one of the below d-flex classes to the container element, which in your case is the root div element:
<div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
Valid options are:
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

How to click on a tab with specific text?

I need to click on tab "Pis/Cofins" in my application
<ul class="nav nav-tabs" id="tabs">
<li class="">
Dados Gerais
</li>
<li class="active">
Pis/Cofins
</li>
<li>
Combustíveis
</li>
<li>
Modo de Servir
</li>
<li>
Imagens
</li>
<li>
Informações
</li>
</ul>

You may simply use the following xpath:
//a[text()='Pis/Cofins']
You may use extension like Firebug in firefox to easily find locators and use them in your test scripts

As per the HTML you have shared to click on tab with text as Pis/Cofins you can use either of the following solutions:
LinkText:
driver.FindElement(By.LinkText("Pis/Cofins")).Click();
CssSelector:
driver.FindElement(By.CssSelector("ul.nav.nav-tabs#tabs a[href$='pisCofins']")).Click();
XPath:
driver.FindElement(By.XPath("//a[contains(#href,'pisCofins') and contains(.,'Pis/Cofins')]")).Click();

ASP.Net Faulty Link Creation

I have just created a link to route in Site.Master but it have created a weird error
For example, when it was clicked, instead of http://localhost/Admin/ManageType it became http://localhost/~/Admin/ManageType.
I have tried to solve it myself by removing ~/ and it works but it come with a flaw. Once click it work and bring you to the page but when click again, it become http://localhost/Admin/Admin/ManageType instead of http://localhost/~/Admin/ManageType.
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li class="dropdown">
Manage <b class="caret"></b>
<ul class="dropdown-menu">
<li>Recipe</li>
<li class="divider"></li>
<li>Type</li>
</ul>
</li>
<li><a runat="server" href="~/Recipe/Recipe">Recipe</a></li>
</ul>

Use Control.ResolveUrl method instead.
And you need to change:
<li>Recipe</li>
To:
<li><a href="<%= Page.ResolveUrl("~/Admin/ManageType") %>" title="ManageType" >ManageType</a></li>

Try this:
<li>Type</li>

Setting an element text outside server-tag

Is it possible to put Text in a element outside the <form runat="server"> tag?
I'm trying to at least output my Session values like the user's name in a <a> element.
In my login.aspx.cs i start the session
Session["username"] = firstname.Text;
and then try to output it on other pages navigation that is outside the <form> tag
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><!--The place where i will output--></li>
<li>Logout</li>
</ul>
</div>
i tried to call the id of the <a> it doesn't appear in suggestion and i started to think that its outside the server tag.
Thank you for understanding and for helping.

Use it like <%# Session["username"].ToString() %>, you need not set from code behind, you will directly access to it.
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><%# Session["username"].ToString() %></li>
<li>Logout</li>
</ul>
</div>

Div expands when the div next to it expands

I have a menu on my layoutpage (MVC) that is on the left side of the page. To the right I have a container that holds the bodypage.
When the sidemenu expands the body expands too. I want the menu to expand but not the body.
How can I rectify this?
<div id="divLeftMenu">
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
<li>
<a class="nav-container" data-toggle="collapse" data-parent="#stacked-menu" href="#education"><i class="fa fa-graduation-cap"></i>Utbildning<div class="caret-container"><i class="fa fa-caret-down"></i></div></a>
<ul class="nav nav-pills nav-stacked collapse" id="education">
<li data-toggle="collapse" data-parent="#education" href="#education1">
<a class="nav-sub-container">Participants</a>
</li>
</ul>
</div>
<div class="container body-content" id=divBodyContent>
</div>
I want #divLeftMenu to expand but #divBodyContent should not expand.