I am new to bootstrap , how can i add name and image in right of navbar as shown in image. On hovering of image logout should be display, how can i do it using bootstrap in mvc project
Refer to bootstrap navbar
Below is a demo:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
UserName
<img class="img-thumbnail rounded-circle" style="width: 50px; height: 50px;" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg">
</form>
</div>
</nav>
Result:
<nav>
...
<span class="float-right">
UserName
<img class="img-thumbnail rounded-circle" src="..." alt="">
</span>
</nav>
Related
I am have scaffolded a NavBar in a .Net Core application using Bootstrap 4. It looks like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</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">
<li class="nav-item">
<a class="nav-link text-light" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>
Because there are numerous items in the Menu, I have changed navbar-toggleable-sm to navbar-toggleable-lg so that the hamburger menu appears at a wider media breakpoint and "Login" does not sit on top of the menu at widths smaller than lg. While this works fine for displaying the hamburger menu, the "Login" menu item continues to show as the media width is being narrowed until the small size is reached.
How can I ensure that the _Login disappears under the hamburger menu at media widths of smaller that lg?
Currently there is no class name called navbar-toggleable-lg in bootstrap 4.3.1. It has been replaced with navbar-expand-lg. So remove navbar-toggleable-lg.
Now if you use navbar-expand-lg then you also have to use d-lg-inline-flex flex-lg-row-reverse instead of d-sm-inline-flex flex-sm-row-reverse.
So your full navbar code should be as follows:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</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-lg-inline-flex flex-lg-row-reverse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I have a navBar with a drop-down. When you select either of the links on the drop-down the menu moves slightly to the left (+- 10px). You can see it a little better in mobile view.
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- add navbar-fixed-top -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href=""> <img src="" alt=""> </a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><i class="fa fa-home" aria-hidden="true"></i> </li>
<li> about </li>
<li class="dropdown">
overview <span class="caret"></span>
<ul class="dropdown-menu">
<li>cost breakdown</li>
<li>project progress</li>
</ul>
</li>
<li> photos </li>
<li> faq </li>
<li> news </li>
<li> contact </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- container-fluid -->
</nav>
https://jsfiddle.net/art852/uyg1otg5/12/
The shifting happens because you have a vertical scrollbar due to content overflow. If you add the following it will remove the shift.
#navbar {
overflow-y:hidden;
}
https://jsfiddle.net/uyg1otg5/18/
Code looks fine in my opinion, I basically used the example code from the docs. jQuery is also referenced before bootstrap.js as well. What could be the issue here? When I click on any other tab that's not active, it still only displays the first tabs content.
<section id="how-it-works">
<div class="container">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li>
<a href="#tab3" data-toggle="tab" aria-controls="tab3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li>
<a href="#tab4" data-toggle="tab" aria-controls="tab4" role="tab" title="That's It!">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="#tab1" role="tabpanel">
<h3>Step 1</h3>
<p>This is step 1</p>
</div>
<div class="tab-pane" id="#tab2" role="tabpanel">
<h3>Step 2</h3>
<p>This is step 2</p>
</div>
<div class="tab-pane" id="#tab3" role="tabpanel">
<h3>Step 3</h3>
<p>This is step 3</p>
</div>
<div class="tab-pane" id="#tab4" role="tabpanel">
<h3>Step 4</h3>
<p>That's It!</p>
</div>
</div>
</div>
</div>
</section>
Try removing the # in the ID of each tab under tab content.
id="#tab4" to id="tab4"
Also, you tagged bootstrap 3 but the code you are using looks like it is from bootstrap 4.
https://v4-alpha.getbootstrap.com/components/navs/
I am a bit stuck with how to properly align a button on a nav-bar, where the button is wrapped inside a form.
Here is the markup I have (and here is a jsfiddle if its easier: https://jsfiddle.net/darrelltunnell/DTcHh/24292/)
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">
Test
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>One </li>
<li>Two </li>
<li>Three </li>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">
<span class="fa fa-user"></span>
Daz
</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">Logout</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
The problem is that both the anchor and the button (within the form) are not aligning correctly with the other nav items.
Any pointers much appreciated.
You should use <ul> tag like this:
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<ul>
<li>Item3</li>
<li>Item4</li>
</ul>
Your Code:
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand"> Test </span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> <span class="fa fa-user"></span> Daz </a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">
Logout
</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
</nav>
I am looking for an example of using Fontawesome and the Navbar components of Bootstrap 4 so that I have a text description and an icon next to each other.
Well, see Bootstrap 4 - Glyphicons migration? in the first place. You can also simply load Font Awesoms' CSS from CDN:
The links in the navbar are just "normal" anchors (a) so you can add the icon inside them:
<a class="nav-link" href="#">
Features<i class="fa fa-bell-o"></i></a>
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#"><i class="fa fa-stack-overflow"></i>Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"></i>
Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features<i class="fa fa-bell-o"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-btc"></i>
Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user-plus"></i>
About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit"><i class="fa fa-search"></i>
Search</button>
</form>
</nav>
To add a search icon in the placeholder of the search form, see: Use Font Awesome Icon in Placeholder