I am trying to align an image and a nav-link vertically centre in Bootstrap 5. But the nav-link with button never aligns to the navbar and the other links.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/site.css?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU" />
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<header>
<nav b-kcycjqi1p7 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary box-shadow mb-3 py-2">
<div b-kcycjqi1p7 class="container-fluid">
<a class="navbar-brand" href="/">
Logo
</a>
<button b-kcycjqi1p7 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-kcycjqi1p7 class="navbar-toggler-icon"></span>
</button>
<div b-kcycjqi1p7 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-kcycjqi1p7 class="navbar-nav flex-grow-1">
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/home/privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item d-inline-block">
<a class="nav-link btn btn-danger" href="#" role="button" >
hello
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBtdJ1tdTF5EbpVV2Cgxsw687vTiori+ntddEk8rQ+W+TbgbyT6Y9PrU+r6p4nlc6PBHcRJJzvLEu4+v8ASsuDS9Re582WCSacH5pQ+cN0Oaw5fd1PPa6s2n1uSS9SMiaGAkHL8DntxXe22i2F0IPPnmnW5+aN9m0EjqPwrzvT08Ua2ZhpHkQw2r+QGdQCWB5NbkWu+JPBt3HbeIXje3nUrDOhzg/iO9ZvBU+ZNPX+vM2+pStzI07jTJooZLSzHm3UcuXmJJH+6p6YxSRW3lzgSyupEe90wQRXR2sMTeRcPPdRs2NixyjbIG5Hy/5xTrsxm5NuSYxKxSQsOee2eta00o+6iKdRw0PL2vYZvEUumzSyt9ptlmS5jc+bHcYyCp9M9qoalHd+INIF7G6jU7Xi9WE7HkA/iK+o7kVgx3sbatM+HEgZo0cnuOlJb389r4ka6RnSdlbaB3OK6dC3CzO48OQ3+yzdNeTT4b2R3uEyOfVvT6fWtWPSBrdhd6dqOvNqUofdAH5CEc5ViTjI4yOOa47RvPvtJmkvbGQ2ce5knZSFBJwVDEY684rtPB/h99dlmFgpt7VoWSScnIDFCowccnpwPSsJuSdkerTlH2abL1uy6lodxLbzyGWFifLjILxoD1APXgdRUK+KJdQWOQRLKU/dvOASA3QfjjvU2qQ32j6ZZajcRNaaqluLe9ixwSDgSAjgjIBz71zFlLPPJJ9jm8ieeTLozBEYdyB0yawlGNOyvY8Rx1OIsdDvtb1waVaxyG8urzbGNnCJyWcn0A5r6o0bQdD0iGODTtOt1aNApm8ob392bGSTjmuN+Fnh8obzXLhNpZmt7fI+YqD8zHI4yeOPSu3gnX7bdxiTgFVPI54yK6m+h2Ju1yzf2sd/CbaVVMLDBUgEflS2FhbWSbYVwe4z/TpTBdD7WlqBhxEZcD0zgf1pt1ctJlIJBGVI3MRSdtxpjtTtdM1awe1v4EuYX/5Zkcn6d/xFcPL4W0vS9ZjuGkzY3EbR+XIAwjccgbsemfyrtbeF5lF7udQ4yEGBlR0yeuD1wMda5/xxNHb6RbGeVoke5AQqM/wMeQc5FK13cVSKav1P/9k=" alt="Akshay Gollahalli" width="40" height="40" class="rounded-circle">
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item bg-danger" href="/microsoftidentity/account/signout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
That's the hello button. Is there a way to make then vertically aligned to other links? Any help on this is appreciated.
navbar-nav has display: flex; so you can use the align-items-center utility class to the <ul> element.
<ul class="navbar-nav align-items-center">
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/site.css?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU" />
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<header>
<nav b-kcycjqi1p7 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary box-shadow mb-3 py-2">
<div b-kcycjqi1p7 class="container-fluid">
<a class="navbar-brand" href="/">
Logo
</a>
<button b-kcycjqi1p7 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-kcycjqi1p7 class="navbar-toggler-icon"></span>
</button>
<div b-kcycjqi1p7 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-kcycjqi1p7 class="navbar-nav flex-grow-1">
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/home/privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link btn btn-danger" href="#" role="button" >
hello
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBtdJ1tdTF5EbpVV2Cgxsw687vTiori+ntddEk8rQ+W+TbgbyT6Y9PrU+r6p4nlc6PBHcRJJzvLEu4+v8ASsuDS9Re582WCSacH5pQ+cN0Oaw5fd1PPa6s2n1uSS9SMiaGAkHL8DntxXe22i2F0IPPnmnW5+aN9m0EjqPwrzvT08Ua2ZhpHkQw2r+QGdQCWB5NbkWu+JPBt3HbeIXje3nUrDOhzg/iO9ZvBU+ZNPX+vM2+pStzI07jTJooZLSzHm3UcuXmJJH+6p6YxSRW3lzgSyupEe90wQRXR2sMTeRcPPdRs2NixyjbIG5Hy/5xTrsxm5NuSYxKxSQsOee2eta00o+6iKdRw0PL2vYZvEUumzSyt9ptlmS5jc+bHcYyCp9M9qoalHd+INIF7G6jU7Xi9WE7HkA/iK+o7kVgx3sbatM+HEgZo0cnuOlJb389r4ka6RnSdlbaB3OK6dC3CzO48OQ3+yzdNeTT4b2R3uEyOfVvT6fWtWPSBrdhd6dqOvNqUofdAH5CEc5ViTjI4yOOa47RvPvtJmkvbGQ2ce5knZSFBJwVDEY684rtPB/h99dlmFgpt7VoWSScnIDFCowccnpwPSsJuSdkerTlH2abL1uy6lodxLbzyGWFifLjILxoD1APXgdRUK+KJdQWOQRLKU/dvOASA3QfjjvU2qQ32j6ZZajcRNaaqluLe9ixwSDgSAjgjIBz71zFlLPPJJ9jm8ieeTLozBEYdyB0yawlGNOyvY8Rx1OIsdDvtb1waVaxyG8urzbGNnCJyWcn0A5r6o0bQdD0iGODTtOt1aNApm8ob392bGSTjmuN+Fnh8obzXLhNpZmt7fI+YqD8zHI4yeOPSu3gnX7bdxiTgFVPI54yK6m+h2Ju1yzf2sd/CbaVVMLDBUgEflS2FhbWSbYVwe4z/TpTBdD7WlqBhxEZcD0zgf1pt1ctJlIJBGVI3MRSdtxpjtTtdM1awe1v4EuYX/5Zkcn6d/xFcPL4W0vS9ZjuGkzY3EbR+XIAwjccgbsemfyrtbeF5lF7udQ4yEGBlR0yeuD1wMda5/xxNHb6RbGeVoke5AQqM/wMeQc5FK13cVSKav1P/9k=" alt="Akshay Gollahalli" width="40" height="40" class="rounded-circle">
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item bg-danger" href="/microsoftidentity/account/signout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Related
I am using bootstrap5 to make a navbar with 2 rows that is collapsible when it goes into mobile/smaller window.
Its all working but I don't think its the best way to achieve it and on top of that I have a bug when I forget to toggle it off and resize the window the menu stay.
See this GIF for what it looks like right now:
I had to create a secondary hidden menu in order to show/hide after it collapse past certain screen size, which does not look ideal.
Is there a proper way to achieve this navbar with bootstrap without having all these hacks I had to use or a proper way to achieve it?
With exception to the bug of the menu staying if u don't toggle it off it all looks the way I want it to.
I believe there is a better way to do this, but I am not experienced enough to figure it out by myself.
This is my current code:
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark container container flex-column">
<div class="container">
My LOGO HERE
<button id="navbarCollapseBtn" type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="navbarCollapse" style="visibility: hidden;">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
<form class="d-flex justify-content-between">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-secondary"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
<div class="navbar-collapse container mt-2 d-none d-md-block">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
</div>
<div class="navbar-nav">
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
</nav>
</header>
I had to further add this javascript to make it all work
$(document).ready(function()
{
$('#navbarCollapseBtn').click(function ()
{
if ($('#navbarCollapse').css('visibility') === 'hidden')
{
$('#navbarCollapse').css('visibility', 'visible', 'important');
$("#navbarCollapse").collapse("show");
}
else
{
$('#navbarCollapse').css('visibility', 'hidden', 'important');
$("#navbarCollapse").collapse("hide");
}
return false;
});
});
Here you go...
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
EDIT
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
.move-right a {
display: inline-block;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
.move-right a {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item ms-md-auto move-right">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I have a menu that is aligned to the right. The last menu is a dropdown menu. But the dropdown menu items doesn't stay on the screen. Half of it leaves the screen. I have been googling but I can't find the class that kepps it on screen.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="./img/BMB-logo.svg" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
As you can see in an older question, the dropdown-menu needs to be right aligned. In Bootstrap 5, dropdown-menu-right has changed to dropdown-menu-end...
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="//placehold.it/75" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Demo
The accepted answer doesn't work for me due to the following CSS style:
.dropdown-menu[style] {
right: auto !important;
}
which overrides the right:0; property of .dropdown-menu-end. Removing the !important or adding it to the .dropdown-menu-end forces the dropdown to align right as intended.
I have started a new project in MVC 5 and i have downloaded a bootstrap template. the template works okay as a normal website.. But when I try to integrate it on the .net project it doesn't works. I have attached picture for better understatement.
Normal HTML image.
MVC Project Image
Here is my MVC code in _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../Content/img/favicon.png" type="image/png">
<title>Fashiop</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#Url.Content("../../Content/bootstrap.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/linericon/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/font-awesome.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/nice-select/css/nice-select.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/animate-css/animate.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/jquery-ui/jquery-ui.css")">
<!-- main css -->
<link rel="stylesheet" href="#Url.Content("../../Content/css/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/responsive.css")">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="top_menu row m0">
<div class="container-fluid">
<div class="float-left">
<p>Call Us: 012 44 5698 7456 896</p>
</div>
<div class="float-right">
<ul class="right_side">
<li>
<a href="login.html">
Login/Register
</a>
</li>
<li>
<a href="#">
My Account
</a>
</li>
<li>
<a href="contact.html">
Contact Us
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html">
<img src="img/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<div class="row w-100">
<div class="col-lg-7 pr-0">
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item submenu dropdown">
Shop
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Shop Category</a>
<li class="nav-item">
<a class="nav-link" href="single-product.html">Product Details</a>
<li class="nav-item">
<a class="nav-link" href="checkout.html">Product Checkout</a>
<li class="nav-item">
<a class="nav-link" href="cart.html">Shopping Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="confirmation.html">Confirmation</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Blog
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Pages
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
<li class="nav-item">
<a class="nav-link" href="tracking.html">Tracking</a>
<li class="nav-item">
<a class="nav-link" href="elements.html">Elements</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-lg-5">
<ul class="nav navbar-nav navbar-right right_nav pull-right">
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="lnr lnr lnr-cart"></i>
</a>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
#*<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>*#
#*<div class="container body-content">*#
#RenderBody()
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
<script src="#Url.Content("../../Scripts/jquery-3.2.1.min.js")"></script>
<script src="#Url.Content("../../Scripts/popper.js")"></script>
<script src="#Url.Content("../../Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("../../Scripts/stellar.js")"></script>
<script src="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/nice-select/js/jquery.nice-select.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/imagesloaded.pkgd.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/isotope-min.js")"></script>
<script src="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.js")"></script>
<script src="#Url.Content("../../Scripts/jquery.ajaxchimp.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/flipclock/timer.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.counterup.js")"></script>
<script src="#Url.Content("../../Scripts/mail-script.js")"></script>
<script src="#Url.Content("../../Scripts/theme.js")"></script>
</body>
</html>
I am a beginner in ASP.NET MVC.
I am working on a project in which the navbar of my partial view for shared layout fits to screen even though I added .container class from bootstrap.
I want my navbar to be in the default size that .container class sets its content into.
If you refer the _Layout.cshtml script, you will see that the #RenderBody() is used to render the contents present in the body.
But the output of it is not what I expected. Why could this be happening?
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewBag.Title - BBC Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Links to other CSS-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-sm navbar-light fixed-top z-depth-1" style="background-color: #F5F5F5">
<!--Navbar toggle button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Logo-->
<a class="navbar-brand" href="#">
<img src="~/Content/Images/BBCLogo.png" height="50" width="50" />
</a>
<!--Links-->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Home</a>
</li>
<li class="divider-vertical">
</li>
<li class="nav-item">
<a class="nav-link hoverable" href="#">About Us</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Login</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer class="footer">
<div class="container">
<span class="text-muted">© Copyright 2017 Big Boy Cars #DateTime.Now </span>
</div>
</footer>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Index.cshtml:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewBag.Title - Index</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
</body>
</html>
Your partial view should include only what you want to have in place of the RenderBody helper. You are including the head and body tags again, which is just breaking everything apart.
So your Index.cshtml should be:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
EDIT
In regards to the navbar. You have to wrap it in a .container:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
..
</nav>
</div>
It's on the docs
I have created a navbar menu and trying to highlight the glyphicon image and text when selected. Currently its working when I hover over the menu. i am sharing code and jsfiddle that i have created for it
view
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no">
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/kendo/css")
#Styles.Render("~/Content/custom/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/kendo")
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="breadcrumbs">
<img src="~/Images/Computacenter.png" />
<span>MCR</span>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center" id="mcrrequestnav">
#*<li><span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span><p>Home</p></li>*#
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></li>
<li><span class="glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></li>
#*<li class="hideli"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></li>*#
<li><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></li>
<li><span class="glyphicon glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></li>
<li> Welcome <span class="WelcomeUserName">Ranjit Menon </span></li>
</ul>
</div>
</div>
</nav>
</header>
<div id="body">
#RenderBody()
</div>
#Scripts.Render("~/bundles/modernizr")
#RenderSection("scripts", required: false)
</body>
</html>
jsfiddle
https://jsfiddle.net/utmqnkuf/16/
You need some script to make it active, your fiddle is not working, you haven't included js and jQuery there, please have a look at this working snippet with your code, also your data target not triggering you forgot '#" in it, data-target="#bs-example-navbar-collapse-1" to make it work.
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="breadcrumbs">
<img src="~/Images/Computacenter.png" />
<span>MCR</span>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center" id="mcrrequestnav">
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></li>
<li><span class="glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></li>
<li><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></li>
<li><span class="glyphicon glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></li>
<li> Welcome <span class="WelcomeUserName">Jack Murray </span></li>
</ul>
</div>
</div>
</nav>
</header>