This has been asked several times. I've checked several different answers, and found no resolution in any of them. I've set margin-bottom: 0 for the navbar. I'm not using the fixed-top navbar. My HTML tags are all closed. None of the resolution in the questions I've seen have helped.
The MCVE for this is super simple. I feel like the answer must be as well, but this is my first experience with bootstrap, and I don't see it. Here's a bootply. For completeness, I'll copy the material here.
HTML
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<li onclick="navigateToSettings()" id="settingsHeaderItem">Settings</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<!-- Content Pane -->
<div id="contentPane" class="contentPane">
<h1>TEST</h1>
</div>
CSS
.navbar {
margin-bottom: 0;
}
.contentPane {
background-color: black;
}
RESULT
Your h1 and nav has margins... and also use a class so it does not affect every other h1 and nav tags.
h1.someclass {
margin-top: 0px;
}
nav.someclass {
margin-bottom:0px;
}
http://www.bootply.com/eVIT3PIaJb
Set display: inline-block and width: 100% to .contentPane css class. This will make the container to take the height of the child.
http://www.bootply.com/nsERfrADNA
You can try It :
<nav class="navbar navbar-default" style="margin-bottom:0px;">
Related
I am trying to change the color of a HTML page in my Angular app.
I have tried to set the height of the div to 100% as you can see below, but the div is still not reaching the bottom of the screen.
Here is my latest attempt:
HTML:
<div class="full-height">
<nav class="navbar navbar-expand-lg" style="background-color: #373F51;">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/welcome']">Welcome</a>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
</div>
CSS:
.full-height {
height: 100%;
background: yellow;
}
I read this was a solution on W3Schools here
But this is what's currently being displayed:
Can someone please tell me how I can make this div fit the entire screen? It will need to be responsive also. Thanks a lot in advance!
You could use min-height and a value in vh (Viewport Height) unit
.full-height {
min-height: 100vh;
background: yellow;
}
I want to centralize the tab's items and the style to be the same, but I cannot modify my css currently.
I want the tab element to takes 100% width(to be stretched) and the li elements to be at the center of the tab element.
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women</li>
<li>Men</li>
</ul>
</div>
</div>
Thanks,
B.
The navbar links are set to float: left by default, you need to reset it to float: none so that text-align: center will have the necessary effect.
Also display: block on the list elements make them stack vertically. Set them to display: inline-block
.centered-tabs {
text-align: center;
}
.centered-tabs .nav-tabs > li {
float: none !important; /* Avoid !important, added for SO snippet priority */
}
.centered-tabs .nav > li {
display: inline-block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women
</li>
<li>Men
</li>
</ul>
</div>
</div>
I want to align li values right most of the screen. but it does not appear.
Codepan: http://codepen.io/
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div>
</div>
text-align:right; or align="right" does not help
Try using the Bootstrap pull-right class inside of your ordered list tags like so:
<ul class="pull-right">The text you want aligned to the right</ul>
You need to apply the text-align: right to the anchor tags inside the list.
CodePen
CSS
.navbar-right li a {
text-align: right;
}
Add text-align: right; to the ul instead of the li
How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?
http://jsfiddle.net/3GQyq/3/
I have tried different methods such as
display:inline-block;margin:0 auto; text-align:center;
But I cannot get it to work.
If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.
EDIT:
Just like how they are centered here ^.
Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:
<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Demo: http://bootply.com/72519
Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
Add the style
.nav{
text-align: center;
}
This will center the text in li.
Check Fiddle
These styles should be sufficient. You were trying to apply styles to to the wrong element.
// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
padding : 0 25px;
}
// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
width:110px;
}
Suppose we have the following markup for navigation bar using Twitter Bootstrap 2.0.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active">HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
What is the best way to center .nav inside navbar-inner?
I only came up with adding my own CSS styles:
#media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
Override the width of the container within the navbar from auto to 960px.
.navbar-inner .container {width:960px;}
To align it in the center with a dynamic width, I used the following:
HTML:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
....
</ul>
</div>
</div>
CSS:
.navbar .navbar-inner {
text-align: center;
}
.navbar .navbar-inner .nav {
float: none;
display:inline-block;
}
Didn't test it, but I guess only display:inline-block; could be a problem, which is supported in all browsers except for IE7 and lower..
http://caniuse.com/inline-block
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Just using the container class as per http://twitter.github.com/bootstrap/components.html#navbar is centering my nav; however, it is fixed width and the formatting is off (the height of the nav bar is increased and its very possible something I'm doing wrong).
It would be nice to have the nav centered in a fluid, percentage-based width, with a minimum width, based on some minimum supported device screen size, and nowrap. (I'm a newbie wrt the responsive media queries and perhaps that is the better alternative to percentage based.)
Still investigating the minimum width and nowrap, but another alternative to the bootstrap container class fixed width is to add a child of the navbar-inner. I would like to know if there is a built-in bootstrap solution such as the row-fluid and spanN classes, but I haven't been able to get that formatted correctly within the nav either.
<div style="margin-left: 15%; margin-right: 15%;">
I have found this useful and clean:
<div class="navbar navbar-fixed-top">
<div class="container">
<ul class="nav">
<li class="active">HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
where, css is:
.container {left:auto;right:auto}
This will center the div on the base of the width of your current navbar.
Responsiveness is managed apart.