This question already has answers here:
What is the difference between Bootstrap .container and .container-fluid classes?
(8 answers)
Closed 5 years ago.
enter image description here
here's my codes.
<header class="top-nav">
<div class="container">
....
</div>
</header>
that container has 'width : 720px' , 'padding : 0 15px' and 'margin: 0 9px'.
I think It has right width (768px) on iPad(768px x 1024px), but that isn't to fit my page. How can I solve this?
++ I work on Chrome develope tool.
container => container-fluid isn't work for me :(
after using container-fluid, width=738, padding=0 15px, I think It is right too, but It has same problem
container-fluid will be used for 100 % screen.
<header class="top-nav">
<div class="container-fluid">
....
</div>
</header>
if its not work, then try like this, and add styles like below
.newclassname {
padding: 0px;
}
Lets try this,
<nav class="navbar navbar-default">
<div class="container-fluid">
...
</div>
</nav>
Please try class="container-fluid".
Use the class container-fluid instead. Example code:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#">Bootflat</a>
</div>
</div>
</nav>
Manually you can set container width in style.css page like .container{width:1180px;}
Related
I would like my navbar to be divided into 12 sections with each element taking up 1 section, i.e have 12 elements in the navbar. I would also like them to start from the very left of the screen, instead of what I currently have in the image below;
I thought container-fluid and navbar-left would align the elements fully to the left of the navbar but I am really struggling in trying to move them over.
What I Have Tried (my code so far)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Am I able to A) Align all the elements in the navbar fully to the left and B) Divide the navbar into 12 "sections" that each element shall take one of?
I am using Bootstrap v3.3.7.
Add the row class to the container:
<div class="container container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container row">
<div class="navbar-header">
<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="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
jsFiddle
A)
I think you have to take away the container class in the first line, like that:
<div class="container-fluid">
B)
You can add the col-md-1 Bootstrap class to the li elements, like that:
<li class="col-md-1">Directories</li>
If you inspect the navbar you created you will find some padding/margin left generated by bootstrap, just add your own class to that element and set margin or padding you want. You can create as many li elements as you want.
I am trying to make a full length navbar logo with links under it which are justified to the right like so:
If possible, I want the rainbow lines to extend left and right and the actual logo to be somewhat centered/fixed. However I really suck at CSS (I can't even resize correctly), and it comes out not full length and covers the rest of the page like this:
_Layout:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header navbar-brand">
<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>
Site.css:
.navbar-brand {
height: 120px;
margin: auto;
width: 100%;
padding: 0px; /* firefox bug fix */
background-image: url('Site/Header_FeinTune-logo-banner.png');
background-repeat: no-repeat;
}
Please write navbar-brand like this inside of navbar-header
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
</div>
Try using container-fluid instead of container. That will set a full screen width.
<div class="navbar navbar-fixed-top">
<div class="container-fluid">
...
I am facing an issue with Bootstrap 3. I have a single page navigation with sections and a fix after scroll navbar. As it scrolls the navbar gets fixed and changes background color. However when it comes to small screens the navbar isnt collapsing and it doesnt remain fixed.
This is part of the html.
<div class="navigate clearfix">
<div class="inner">
<h3 class="navigate-brand">Brand</h3>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="menu">
<ul class="nav navigate-nav menu-right" >
<li class="active">Home</li>
<li>s1</li>
<li>S2</li>
<li>s3</li>
<li>s4</li>
</ul>
</div>
</nav>
</div>
</div>
The js with the background change:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".navigate").css({"background-color" : "red"});
}else{
$(".navigate").css({"background-color":"transparent","background":"transparent"});
}
})
})
You may want to follow the instructions in: https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Based on the above, I have prepared a fiddle for you where navbar remains fixed at any given width of screen: http://jsfiddle.net/dmv73fzr/
Hope it helps you!
I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:
<div class="navbar navbar-fixed-top">
This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)
example
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Get started
</li>
...
<li>
Customize
</li>
</ul>
</div>
</div>
</div>
</div>
or throw
.navbar {
max-width: 1170px; /* width of .container */
margin: 0 auto;
}
into the css
You should have a container class nested inside your navbar
<div class="navbar navbar-fixed-top">
<div class="container">your menu and logo go here</div>
</div>
That will give you the same width as the body container if you do not have a fluid layout and will give auto margins to the container so it is centered in the middle of the screen. It will also keep the navbar itself at 100%
I'm using twitter bootstrap.
I have its navigation bar on top, and it shrinks if I narrow down browser's width.
I don't want it. How can I?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
.
.
.
The fix for this lies in the CSS for responsiveness (responsive.css?)
Search for the
"container-fluid"
rule and disable it.
Use <div class="container"> instead of <div class="container-fluid">
for reference go through this link