I am trying to center the navbar content in Bootstrap 4, alpha 5. I have been googling a bit, and I guess there might be some trick involving d-block and mx-auto.
However I cannot find out how to center the navigation links so that they are total in center, not just adding a container around them.
Sample navbar code I am playing with:.
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
JSFiddle if you like
Centering Navbar items is simpler in Bootstrap 4, and doesn't require additional markup.
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<ul class="navbar-nav mx-auto">
<li class="nav-item active text-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
Bootstrap 4 Center Navbar Demo (updated for v4.0.0)
If you need to center only specific elements, such as the Brand or Links, see this answer
You shouldn't need to use css to accomplish this, since bootsrap's "mx-auto" class can take care of this for you. You can simply add the following to your ul class:
more info on horizontal centering in boostraps docs: https://getbootstrap.com/docs/4.4/utilities/spacing/
Related
I'm trying to change the background color of an active item in my dropdown menu.
So what I'm targetting is the aisles nav-item, which has a dropdown for 8 different categories. So for example, when I'm on Fruits and Vegetables, I would like for a color surrounding that category to be fixed on it so that it indicates to the users that it's on that category.
Right now, Bootstrap 4 applies a blue background color, but I want to change it to match my website.
Here is my HTML code:
<div class="collapse navbar-collapse nav-fill w-100" id="navbarNavDropdown">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="allproducts.html">All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="summer.html">Summer Essentials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sale.html">SALE</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Aisles
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color:
#FF6347";>
<a class= "dropdown-item active" href="aisle1.html"><span>Fruits & Vegetables</span></a>
<a class="dropdown-item" href="aisle2.html"><span>Dairy & Eggs</span></a>
<a class="dropdown-item" href="aisle3.html"><span>Meat & Poultry</span></a>
<a class="dropdown-item" href="aisle4.html"><span>Snacks</span></a>
<a class="dropdown-item" href="aisle5.html"><span>Bread & Bakery</span></a>
<a class="dropdown-item" href="aisle6.html"><span>Beverages</span></a>
<a class="dropdown-item" href="aisle7.html"><span>Cleaning & Household</span></a>
<a class="dropdown-item" href="aisle8.html"><span>Beauty</span></a>
</div>
</li>
</div>
Can you please help me achieve this, thanks.
I am trying make one of the navbar dropdowns into a sub-menu that unfolds either to the left or right depending on the space.
How do I do this? I've tried everything.
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">PRODUCT NAME</a>
<!-- Links -->
<ul class="navbar-nav">
<!--A regular navbar link-->
<li class="nav-item">
<!--a class="nav-link" href="resources/pages/home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >Images</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR FLOORS/PAGES-->
<a class="dropdown-item" href="resources/callout/tore.html" target="iframe1">PAGE NAME</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Videos</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR VIDEOS-->
<a class="dropdown-item" href="resources/media/vids/" target="_blank">VIDEO NAME</a>
</div>
</li>
<!--Dropdown for additional documents-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Additional Documents</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR DOCUMENTS-->
<a class="dropdown-item" href="Resources/media/docs/" target="">DOCUMENT NAME</a>
</div>
</li>
</ul>
</nav>
When I click on the dropdown menu this is always highlighted in blue. How can I fix this with Bootstrap or a change of my CSS?
With this CSS element I already tried to change the color:
.dropdown-item.active, .dropdown-item:active
color: red
background-color: darkviolet
HTML:
<nav class="nav-justified navbar-expand-xl navbar-light">
<div class="" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto nav-pills nav-fill">
<li class="nav-item active">
<a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="überuns.html">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Konakt.html">Kontakt</a>
</li>
<li class="nav-item dropdown dropdown">
<a class="nav-link dropdown-toggle" href="Maschinen.html"
id="navbarDropdown" role="button" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-
enter code herelabelledby="navbarDropdown">
<a class="dropdown-item" href="1.html">Element 1</a>
<a class="dropdown-item" href="2.html">Element 2</a>
<a class="dropdown-item" href="3.html">Element 3</a>
<a class="dropdown-item" href="4.html">Element 4</a>
<a class="dropdown-item" href="5.html">Element 5</a>
<a class="dropdown-item" href="6.html">Element 6</a>
</div>
.dropdown-item:active use this
.dropdown-item:active{
color: red;
background-color: darkviolet}
<nav class="nav-justified navbar-expand-xl navbar-light">
<div class="" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto nav-pills nav-fill">
<li class="nav-item active">
<a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="überuns.html">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Konakt.html">Kontakt</a>
</li>
<li class="nav-item dropdown dropdown">
<a class="nav-link dropdown-toggle" href="Maschinen.html"
id="navbarDropdown" role="button" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-
enter code herelabelledby="navbarDropdown">
<a class="dropdown-item" href="1.html">Element 1</a>
<a class="dropdown-item" href="2.html">Element 2</a>
<a class="dropdown-item" href="3.html">Element 3</a>
<a class="dropdown-item" href="4.html">Element 4</a>
<a class="dropdown-item" href="5.html">Element 5</a>
<a class="dropdown-item" href="6.html">Element 6</a>
</div>
The default css is generated from nav.scss
Add this into your custom css file to change background color :
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{
background:darkviolet
}
I would also suggest you to use custom class for navbar like my-custom-nav and use as parent for above css like :
.my-custom-nav .nav-link.active,
.my-custom-nav .show>.nav-link{
background:darkviolet
}
I have created a header , with inside a navbar
I would like to have an element wihich become a dropdown-menu. But I don't understand why is not appearing my item.
I see on the link, that it seem easy:
https://getbootstrap.com/docs/4.0/components/navs/
Pills with dropdowns
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<header>
ITEC-EP
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Applications<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="wiki.html">Wiki</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
I dont have any error message.
When i click to my drop down menu, nothing happens. The inner element are not appearing.
I am trying to not use css, but only bootstrap. I chosed to use this template:
https://bootswatch.com/materia/
What am I mistaking?
In the future how can i debug in the developer mode in mozilla?
I imagine the issue is not having the correct javaScript packages installed. I had this when I first used Bootstrap, and I was missing popper.js
I've seen a similar question here but that answer didn't worked for me.
So the problem is that I want to justify content inside nav bar in bootstrap.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto justify-content-between">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Team</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Status</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Sevices</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contribute</a>
</li>
</ul>
</div>
</nav>
Here's a live example : https://jsfiddle.net/oberknezev/adcybshm/1/
"Home" item should go to all the way to the left and "contributors" all the way to the right with space between items justifed.
Tried with inline d-flex class, justify-content-between but nothing changes.
I guess it's something stupid but after 3 hours of trying, squinting, searching and reading all the stuff, I'm still lost why this isn't working when it's working on some simpler examples that I've tried.
Thanks
You need to specify that the nav flexbox needs to take up all of the available space of the parent element. You can do that by adding flex: 1 to it, like below:
.navbar-nav,
.mr-auto {
flex: 1;
margin: auto !important;
display: flex;
justify-content: space-between;
}
I know a way to make what you need, but... I don't know if it is a correct way to solve that.
In your <ul> tag, add the Bootstrap class .w-100. Example below:
<ul class="nav navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
That class is the same to say you're given a 100% width to your <ul> So...
If you're using a old Bootstrap version, you can give a class to your <ul> like .Width and give that class a width of your choice, like below:
.Width
{
width: 100%;
}