Default navbar spans horizontally across the browser window.
<div class="navbar navbar-static-top">
How do you declare the navbar to be only 750px width and placed at the center?
Setting margin:auto; in the CSS doesn't work.
The .navbar-static-top you are using forces your navbar to become full-width. Remove that class and you will get a resizable navbar. Then, you can wrap it in a span# of the size you want:
<div class="container">
<div class="row">
<div class="span6 offset3">
<div class="navbar">
...
</div>
</div>
</div>
</div>
Here you have an example: http://jsfiddle.net/simbirsk/xAMYF/
Related
I want to add a sticky header to my page and bootstrap provides a class for it, also I added a container to center the content and make it as wide as the content below.
But when I add a row and 12 columns not the full width of the container is taken, see below for the code.
<nav class="navbar fixed-top navbar-light sticky-header">
<div class="container sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
You could add a class to your row like so:
EDIT: As ZimSystem pointed out, there is a w-100 class in bootstrap, so just do:
<div class="row w-100">
Your Elements
</div>
This should get you 100% of the containers width.
Working sample: https://www.bootply.com/J5gKTedgPr
The Bootstrap 4 Navbar isn't designed to contain the grid rows and cols. It's designed to contain the support content.
When you use a container inside a navbar it makes the container display:flex which is making the row you have in the container align to the start (left-side) of the container which won't fill the width.
As a workaround/hack you could revert the container to display:block using d-block, and then remove the default left/right padding from the navbar using px-0:
https://www.codeply.com/go/T81SqA32rJ
<nav class="navbar fixed-top sticky-header px-0">
<div class="container-fluid d-block sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
I am using the grid system (Bootstrap 3.3.4) to try to make about four columns. The only problem is it puts the grid in the background. And the footer just sits on top of everything in the grid. Here is the jsFiddle, notice how the last little bit of text is cut off by the navbar on the bottom. Here is my code:
<div class="jumbotron">
<h1>Example page header</h1>
</div>
<div class="col-md-2">
<div ng-repeat="category in main_business_categories">
{{category}}
</div>
</div>
<div class="col-md-2">
<p>column2</p>
</div>
<div class="col-md-2">
<p>third</p>
</div>
<div class="col-md-6">
<p>fourth</p>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
Made with love by Jeremy Martinez
</div>
</div>
How do I get it to where everything (header, footer, and text in grid) are all on the same depth. Right now, grid is in background and everything else is in foreground.
First you should wrap your columns inside a .container or .container-fluid and .row: https://jsfiddle.net/bhbhv38f/2/
The .navbar-fixed-bottom cause the behaviour you describe. You should remove that class to get the footer at the end of your content, see https://jsfiddle.net/bhbhv38f/3/
I'm confused at a basic problem, and I'm not sure how to go about this --
Take a look at www.hncharity.com
If you look at the content div, it's slightly off center (It becomes more pronounced as you go into mobile view).
The div is structured like so:
<div class="container">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.
This is the css for content
margin:40px;
padding:40px;
position:relative;
margin-top:-200px;
z-index:1201;
background-color:white;
As you can see, the content does not appear to be centered. What would I do to fix this?
you missed to add a container with class row before span and after container.
Correct way:
<div class="container">
<div class="row">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
</div>
I've a fluid row in which i have a item (nontext) and I want to align it horizontal centered
text
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center">
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
</div>
this works pretty fine
but as soon as I add a max-width and max-height the alignment doesn't work anymore.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center;max-height: 300px; max-width: 400px" >
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
What am I doing wrong ? How can I set max width and hight and have a centered alignment?
To follow bootstrap rules, try to center it with the offset class
<div class="row-fluid">
<div class="span4 offset4">
<img src="yourimage" />
</div>
</div>
see documentation
Applying max-height and max-width on one of Bootstrap's span# classes will override grid styling. I would recommend adding the height/width on the image (if the text align doesn't work, you can try margin: 0 auto on the image.
i have a fluid layout based of twitters bootstrap.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
It would be very nice to have the sidebar a fixed width. if a change the layout from fluid to "static" and set the width of sidebar to
220px
and i resize the window or change my resolution to 1024... the body-content jumps under the sidebar. how can i avoid this?
EDIT:
Got it. Will post my "solution" later on. thanks for your responses
I think you are looking something like this:
<div class="sidebar span4">
this is my fixed sidebar
</div>
<div class="main">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">this is fluid</div>
<div class="span3 offset1">yeah!</div>
<div class="span6">Awesome!</div>
</div>
<div class="row-fluid">
<div class="span6">1 half</div>
<div class="span6">2 half</div>
</div>
</div>
</div>
here´s a fiddle for your convenience: http://jsfiddle.net/TT8uV/2/
As as general note:
You don´t need to use bootstrap as your 'main container', so you can place your
sidebar side-by-side with a grid system (like bootstrap
fluid and responsive). This way you have A LOT of control of the
sidebar, without affecting the actual content.
Hope it works for you.
I think this is what you need: http://jsfiddle.net/U8HGz/1/