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
Related
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>
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 seem to be able to find the question posted on here and google about the same issue in bootstrap, but i'm not able to find answers for the same issue in Materialize
I'm new to bootstrap and everything i've tried hasn't solved it. I'd be grateful if anyone knows why it's doing this and how to override it.
Thank you!
the live page is here
i've set drop downs to fire on 'about' and 'profile'
the script:
<script>
var $ = jQuery;
(function($){
$(function(){
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false,
hover: false,
alignment: 'right',
gutter: 0,
belowOrigin: true,
});
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
nav bar:
<nav>
<div class="nav-wrapper">
<a class="brand-logo hide-on-med-and-down left" href="http://focallocal.org">Focallocal</a>
<ul class="hide-on-small-and-down left">
<li class="text-icon">
<a class="dropdown-button" href="http://about.focallocal.org" data-activates="nav-about" title="About Us">
<i class="mdi-action-info"></i>
<span>About Us</span>
</a>
</li>
<li class="text-icon">
<a href="http://news.focallocal.org/" title="Happy News">
<i class="mdi-device-brightness-high"></i>
<span>Happy News</span>
</a>
</li>
<li class="text-icon">
<a href="http://action.focallocal.org/" title="Action">
<i class="mdi-action-get-app"></i>
<span>Action Centre</span>
</a>
</li>
<li class="text-icon">
<a href="http://activities.focallocal.org" title="Activities">
<i class="mdi-maps-directions-walk"></i>
<span>Activities</span>
</a>
</li>
<li class="text-icon">
<a href="http://gather.focallocal.org/" title="Gather">
<i class="mdi-image-flare"></i>
<span> Gather </span>
</a>
</li>
<li class="text-icon">
<a href="http://shop.focallocal.org/" title="Shop">
<i class="mdi-action-shop-two"></i>
<span> Shop</span>
</a>
</li>
<li class="text-icon">
<a class="dropdown-button" href="#" data-activates="nav-projects" title="Projects">
<i class="mdi-action-info"></i>
<span>Projects</span>
</a>
</li>
</ul>
<ul class="right">
<li class="text-icon">
<a href="http://discuss.focallocal.org" target="_blank" title="Chat">
<i class="mdi-communication-dialpad"></i>
<span>Discuss</span>
</a>
</li>
<li class="text-icon">
<a href="https://trello.com/invite/b/SwMdGGcX/dbf6c3cebca7e2214ac0df3a57b1881f/build-the-movement" target="_blank" title="Missions">
<i class="mdi-content-create"></i>
<span>Missions</span>
</a>
</li>
<li class="text-icon">
<a href="#" title="coming soon">
<i class="mdi-action-perm-media"></i>
<span>Profile</span>
</a>
</li>
</ul>
<ul id="user-dropdown" class="dropdown-content">
<li>Log in</li>
<li>Register</li>
</ul>
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
dropdowns:
<ul id="nav-about" class="dropdown-content">
<li>
About Us
</li>
<li>
Hire Us
</li>
<li>
Community Values
</li>
<li>
F.A.Q
</li>
<li>
The Road to Focallocal
</li>
<li>
Will we Succeed?
</li>
<li>
Focallocal in the news
</li>
<ul id="nav-projects" class="dropdown-content">
<li>
<a href="http://action.focallocal.org/">Action Center
</a>
</li>
<li>
<a href="http://brightertomorrowmap.com/">Brighter Tomorrow Map
</a>
</li>
<li>
<a href="http://morehappiness.focallocal.org/">More Happiness
</a>
</li>
I have searched high and low for the answer but to no avail. I have a sandbox website www.bluestackbrewing.com
When you resize it to mobile, the first two lists in the menu item are showing. Does anyone know how to fix this? Thank you for any response.
<div class="row nav-menu">
<div class="col-sm-3 col-md-2 columns">
</div>
<div class="col-sm-9 col-md-10 columns">
<ul class="menu navbar-collapse">
<li>Home
</li>
<li class="has-dropdown">Pronorm German Kitchens
<ul class="subnav">
<li>Y-LINE</li>
<li>X-LINE</li>
<li>PROLINE</li>
<li>CLASSICLINE</li>
</ul>
</li>
<li>BESPOKE KITCHENS
</li>
<li>STORAGE SOLUTIONS & ACCESSORIES
</li>
<li>Contact
</li>
</ul>
<ul class="social-icons text-right">
<li>
<a href="#">
<i class="icon social_twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_instagram"></i>
</a>
</li>
</ul>
</div>
I am using bootstrap 3 dropdown toggle menu in my angularjs project and everything seems to be working fine but after using angular ui bootstrap (angular-ui-bootstrap.min.js) the bootstrap 3 dropdown toggle menu is not working (meaning its not opening). Does anyone had the same issue? Please help me on how to solve this.
Index.html
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="submenu">
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Find Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Create Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Update Project
</a>
</li>
</ul>
</li>
<ul>
You need to do it the Angularjs way:
Make sure to include:
Index:
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<i class="icon-double-angle-right"></i>
<a>{{choice}}</a>
</li>
</ul>
</li>
<ul>
JS:
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"Find Project",
"Create Project",
"Update Project"
];
}