<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
Related
In Visual Studio, I create a new ASP.Net Core Web App
then I add a dropdown menu (as per Bootstrap documentation)
https://getbootstrap.com/docs/5.1/components/navbar/
the header porton of the html code looks like this:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">WebApplication1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
but the dropdown doesn't work. When I click it, no dropdown appears:
https://i.stack.imgur.com/szrE4.png
Be sure your Bootstrap version is v5.1, you can add the following css and js file to your project _Layout.cshtml:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
For Bootstrap v4.x, you need change your code to:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
In Bootstrap 5.1, for dropdown,
✅ data-bs-toggle="dropdown"
❌data-toggle="dropdown"
In Bootstrap 4.0, for dropdown,
✅ data-toggle="dropdown"
❌data-bs-toggle="dropdown"
Inside of my Views/Shared/_Layout.cshtml, the following navbar is in the <body>:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Client" asp-action="ClientList">Client List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import">Import</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Processing">Processing</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="PostProcessing">Post Processing</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
As you can see I have 4 views: ClientList, Import, Processing and PostProcessing. Inside each of those views I have buttons to navigate to the next or previous view (it's a sequential process for the most part) and as such the controller actions take in the Client's ID.
When I'm in, say, the PostProcessing view and attempt to view the Import view by clicking the navbar item, I get an exception because no ID is passed.
As a fallback I was considering just taking the top navbar out of the layout and making it a Partial View or View Component and rendering that on every page but as that seems counter-intuitive while having a layout, I'm wondering if there's a way to be able to just use my existing _Layout and also use the ID of the current view to be sent when I click the link.
You will have to explicitly pass the id parameter to your anchor tag may be using ViewBag or TempData.
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import" asp-route-id="#ViewBag.Id">Import</a>
More on ViewBag and TempData.
Your _NavbarPartial view should be as follows where each action link tag helper contain a asp-route-id="#Model" attribute.
#model int // <-- Must contain this
<a class="navbar-brand" asp-area="" asp-controller="Client" asp-action="ClientList" asp-route-id="#Model">Client List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import" asp-route-id="#Model">Import</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Processing" asp-route-id="#Model">Processing</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="PostProcessing" asp-route-id="#Model">Post Processing</a>
</li>
</ul>
</div>
Then in the _Layout should be as follows:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<partial name="_NavbarPartial" model="1" /> // <-- Pass your id value as model
</div>
</nav>
</header>
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.
I have a dropdown from boostrap such as this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<i class="fa fa-bell-o"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
</ul>
</div>
I'd like to add list items to this boostrap dropdown menu from my C# code behind. I'm adding items through a String foreach Loop. How do I access the dropdown id, since its not displayed in the code behind because it requires ASP controls?
You will need a repeater.
Repeater1.DataSource = yourdatasource
Repeater1.Databind()
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate><Ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></HeaderTemplate>
<ItemTemplate>
<li role="presentation">
<a role="menuitem" href="#"> <%# Eval("yourfieldfromcodebhind here") %> </a>
</li>
</ItemTemplate>
</asp:Repeater>
I'm using bootstrap for toogle down menu bar. The code is:
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
but it is not working properly. I'm facing the issue that whatever I'm displaying in these fields:
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"></a></li>
It is not visible.
The items for the displaying are visible when I paste your code in my project. I think the problem is on your js. Try to add all the js for proper working of dropdown list.