I'm having trouble centering my content in the bootstrap navbar. I'm using bootstrap 3. I've read many posts, but the CSS or methods used will not work with my code! I'm really frustrated, so this is like my last option. Any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
https://jsfiddle.net/amk07fb3/
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
http://jsfiddle.net/bdd9U/2/
Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
http://jsfiddle.net/bdd9U/3/
The original post was asking how to center the collapsed navbar. To center elements on the normal navbar, try this:
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
There's another way to do this for layouts that doesn't have to put the navbar inside the container, and which doesn't require any CSS or Bootstrap overrides.
Simply place a div with the Bootstrap container class around the navbar. This will center the links inside the navbar:
<nav class="navbar navbar-default">
<!-- here's where you put the container tag -->
<div class="container">
<div class="navbar-header">
<!-- header and collapsed icon here -->
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- links here -->
</ul>
</div>
</div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->
If you want the then align body content to the center navbar, you also put that body content in the Bootstrap container tag.
<div class="container">
<! -- body content here -->
</div>
Not everyone can use this type of layout (some people need to nest the navbar itself inside the container). Nonetheless, if you can do it, it's an easy way to get your navbar links and body centered.
You can see the results in this fullpage JSFiddle:
http://jsfiddle.net/bdd9U/231/embedded/result/
Source:
http://jsfiddle.net/bdd9U/229/
For Bootstrap 4:
Just use
<ul class="navbar-nav mx-auto">
mx-auto will do the job
Bootstrap 5 (Update 2021)
The Navbar is still flexbox based in Bootstrap 5 and centering content works the same as it did with Bootstrap 4. Examples
Bootstrap 4
Centering Navbar content is easier is Bootstrap 4, and you can see many centering scenarios explained here: https://stackoverflow.com/a/20362024/171456
Bootstrap 3
Another scenario that doesn't seem to have been answered yet is centering both the brand and navbar links. Here's a solution..
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
#media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
Also see:
Bootstrap NavBar with left, center or right aligned items
This code worked for me
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
from the bootstrap official site (and, almost, like Eric S. Bullington said.
https://getbootstrap.com/components/#navbar-default
the example navbar looks like:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
...etc
to center the nav, that what i've done:
<div class="container-fluid" id="nav_center">
css:
#media (min-width:768px) { /* don't break navbar on small screen */
#nav_center {
width: 700px /* need to found your width according to your entry*/
}
}
work with class="container" and navbar-right or left, and of course you can replace id by class. :D
Seems like all these answers involve custom css on top of bootstrap. The answer I am providing utilizes only bootstrap so I hope it comes to use for those that want to limit customizations.
This was tested with Bootstrap V3.3.7
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-5 col-xs-2 text-center">
<p>I am centered text<p>
</div>
<div class="col-xs-5"></div>
</div>
</div>
</footer>
this should work
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
Use following html
<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li><h5>Home</h5></li>
<li>|</li>
<li><h5>About</h5></li>
<li>|</li>
<li><h5>Contacts</h5></li>
<li>|</li>
<li><h5>Cart</h5></li>
</ul>
</div><!-- /.container-fluid -->
</nav>
And css
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-default {
background-color: white;
border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
background-color:white;
}
Modify according to your needs
V4 of BootStrap is adding Center (justify-content-center) and Right Alignment (justify-content-end) as per: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
it because it apply flex. you can use this code
#media (min-width: 992px){
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
justify-content: center;
}
in my case it workded correctly.
Related
can you help me. my header navbar didn't move to leftside. i want my header to be in corner. it did not change when i used css code. and even the text color. i use font-color and color but did'nt event change. what the problem of my code?
also the header navbar it's not responsive. did'nt working
.head2 {
background-color: lightgreen;
margin-left: -10px;
}
.navbar {
background-color: black;
}
.navbar-brand {
padding-left: 70px;
text-align: center;
}
.nav .navbar-nav li a {
color: white;
}
.color-me {
color: white;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header head2 col-sm-2 ">
<a class="navbar-brand " href="#">androbo</a>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
By default you parent element .container-fluid has a padding left and right set of 15px... You need to remove that padding in your .container-fluid, I would recommend you to create a CSS rule like below and apply it to any element you need/want to to remove the padding:
.no-padding {
padding: 0 !important;
}
.head2{
background-color: lightgreen;
margin-left:-10px;
}
.navbar{
background-color:black;
}
.navbar-brand {
padding-left:70px;
text-align: center;}
.nav .navbar-nav li a{
color:white;
}
.color-me{
color:white;
}
.no-padding {
padding: 0 !important;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid no-padding">
<div class="navbar-header head2 col-xs-3 " >
<a class="navbar-brand " href="#">androbo</a>
</div>
<div class="col-xs-5">
</div>
<div class="col-xs-4">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
For a quick fix, add this to your CSS
.container-fluid { padding: 0; }
You can try this with Bootstrap framework.
kindly see to this:Bootsrtap navbar.This will solve your problem.
I am building a portfolio project using Bootstrap. I wanted to have the navbar be responsive but not use the default hamburger menu. Instead, I have a media query that changes the text links into icons. However, when the screen is resized to 767 and below, the icons collapse into a second row. I want them to just get closer to the navbar header.
I've been searching all day but everyone else seems to be asking about adding the hamburger menu.
Any suggestions?
http://codepen.io/anthkris/pen/xwpPrE/
<!-- Fixed navbar -->
<nav id="mobile-nav" class="navbar navbar-default navbar-fixed-top">
<div class="container nav-mobile">
<div class="navbar-header">
<a class="navbar-brand" href="#">K. Anthony</a>
</div>
<div>
<ul class="nav navbar-nav navbar-left">
<li>
<i class="fa fa-home"></i>
</li>
<li>
<i class="fa fa-file-photo-o"></i>
</li>
<li>
<i class="fa fa-book"></i>
</li>
<li>
<i class="fa fa-envelope"></i>
</li>
</ul>
</div><!-- #mobile-nav -->
</div>
</nav>
If you want the navigation to stay the same and just change icons you can try:
#media only screen and (max-width : 768px) {
.navbar-header {
float: left;
}
.navbar-nav {
float: right;
}
}
This will pull the header, which is your name to the left and the icons to the right. Keeping it the same as if you have it with the words.
#media only screen and (max-width : 768px) {
.navbar-header {
display: inline-block;
float: left;
}
}
Try this in media query this might help you.
I am building a site where I use the Bootstrap Sticky Footer and Navbar. However, with Google's recent release of the Material Design Lite library, I want to use the cards for a portion of my site. However, as soon as I include the MDL library (just the CSS, no other changes), my sticky footer does something odd. The footer is set to the bottom of the viewport (no matter the height of that window) but then it just sticks there. If I scroll up, it scrolls up as well.
When I actually inspect the footer, body, etc., I see nothing that is affecting the layout from the material design CSS. Something obviously is, but I'm fairly stuck on what it might be. (To see it work, remove the reference to the material-lite.css. Currently it is broken within the snippet.)
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 20px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
color: white;
background-color: black;
}
#footer-content {
margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a asp-controller="Home" asp-action="Index" class="navbar-brand">
<i class="fa fa-globe fa-lg visible-sm visible-xs"></i>
<i class="fa fa-globe fa-3x hidden-sm hidden-xs"></i>
</a>
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav main-links">
<li><a asp-controller="Home" asp-action="Index">Home</a>
</li>
<li><a asp-controller="Home" asp-action="About">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="http://placekitten.com/300/450" />
<br/>
<img src="http://placekitten.com/300/450" />
<br/>
</div>
<footer>
<div class="container">
<div id="footer-content" class="pull-right">
My Footer
</div>
</div>
</footer>
I found the correct solution to keeping footer stuck to bottom even if the content of a new tab is a different height.
https://github.com/google/material-design-lite/issues/913
This js fiddle specifically had useful html and css.
http://jsfiddle.net/eggbox/gk7u32b6/
In short add this to your html above the footer
<style>
.mdl-layout__content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.mdl-layout__content > *:not(.mdl-layout-spacer) {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
</style>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--middle-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer--link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
This should fix your problem. See plunker
html {
height: auto;
}
Following this example from the official documentation, i noticed that on pages who are going to be < 2000px in height, i will have a lot of white space below the footer.
I can't specify the height of the footer as per this example (it might increase dynamically) so i guess i can't stick it to the footer?
How to work around this?
Use the Boostrap's sticky footer, and for the height of Footer, use this jquery, it checks height of footer and adds it to the html tag.
It runs on page load as well as on Window.resize event, so it works great for Responsive projects.
$(document).ready(function(){
$(window).resize(function(){
$("html").css("padding-bottom",$(".footer").outerHeight())
}),
$("html").css("padding-bottom",$(".footer").outerHeight()
);
});
What actually makes the footer stick to the bottom of the page in the example you are linking to in your comment is not the footer height, but the following CSS rules:
.footer {
position: absolute;
bottom: 0;
}
You can see this for yourself if you view the footer through your browser's developer tools and disable the height CSS rule, the footer will continue to be at the bottom of the page.
As far as the body margin is concerned, since your footer does not have a fixed height the only way you can set this is use Javascript to measure the footer and set the body margin on document.ready. See the attached example:
$(document).ready(function(){
var footerHeight = $('.footer').height();
$('body').css('margin-bottom', footerHeight);
});
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
I've tried a few option but i can't manage to get 4 links to span across the navbar. I thought it would be quite easy to add the span3 class to each <li>.
Here's my HTML:
<div class="navbar center">
<div class="navbar-inner">
<div class="container row">
<ul class="nav span12">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
To center the links I've used the solution described here: Modify twitter bootstrap navbar
Here's the CSS:
.navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
All I've managed to get is this:
How can I get those four links spanned on the same row?
Using spanX is not the best solution here (unless you're using bootstrap-resonsive.css, see below). You can uses percentages, as long as you're willing to modify you CSS when the number of items in the navbar changes.
You can make this work with default navbar markup:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
And two CSS rules. The first removes the margin on the <ul class="nav">, removes the float and sets its width to be 100% of its container (in this case, the <div class="container"> within <div class="navbar-inner">.
The second rule sets the width of each <li> to be a certain percentage of the width of the <ul>. If you have four items, then set it to 25%. If you have five, it'd be 20%, and so on.
.navbar-inner ul.nav {
margin-right: 0;
float: none;
width: 100%;
}
.navbar-inner ul.nav li {
width: 33%;
text-align: center;
}
jsFiddle DEMO
UPDATE
If you are using the responsive bootstrap CSS, you CAN use the built-in spanX classes, like so:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav row-fluid">
<li class="span4">Home</li>
<li class="span4">Link</li>
<li class="span4">Link</li>
</ul>
</div>
</div>
</div>
Then, all the CSS you need is:
.navbar-inner ul.nav li {
text-align: center;
}
jsFiddle DEMO
You did a good start but your markup doesn't reflect the real grid :
You don't put .spanX in a .span12
.container and .row might have conflicting properties
It seems to work with this :
<div class="navbar center">
<div class="navbar-inner">
<div class="container">
<div class="row">
<ul class="nav">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
</div>
Demo (jsfiddle) and fullscreen