I'm building a rails app right now using bootstrap for the UX. I need help figuring out how to keep the container class from appearing under the navbar. This is what the html for the page looks like:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<span class="pull-right"> Title text goes here </span>
</div>
</div>
</header>
<div class="container">
<%= yield %> <br / >
</div>
The only CSS on the page is css from bootstrap.
look at bootstrap samples, maybe you need to add style for the body:
body {
padding-top: 40px;
}
Any particular reason you need the div with the "container" class inside of the "navbar-inner" div? I would suggest changing the class of that to "brand", ditching the span, and putting your title text inside that brand div, like so:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="brand pull-right">Title text goes here </div>
</div>
</header>
Bootstrap can be picky about how various classes are nested and you should follow the same structure as outlined in the documentation:
http://twitter.github.io/bootstrap/components.html#navbar
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'm using Twitter Bootstrap 3.3.1, with the template "Jumbotron".
Here, my page :
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<!-- content -->
</div>
</div>
<div id="root" class="container">
<div id="main" class="row">
<section id="content">
<!-- content -->
</section>
</div>
<footer>
<!-- content -->
</footer>
</div>
On the browser, the header (the div with role "navigation" + div with class "jumbotron") has a 290px size.
When I'm trying to push the footer at the bottom with all what I found, I have always the same problem. The "root" and "main" div will always be longer than the screen display because of the header, I guess.
A lot of internet's solutions don't include a header... :(
I don't want to fix the footer with a "position:fixed", I realy want to push it at the bottom with CSS only.
To be more specific, my footer has to stay at the bottom of the page with or without content. If the content is sorter than the screen, the footer will be at the bottom of the screen. If the content is longer than the screen, the footer will be at the end of the page.
EDIT: I don't want to do it WITH Bootstrap. I just want some CSS to do it without Bootstrap if Bootstrap can't do it !
I hope it's clear enough.
If someone has an idea, it'll make my day!
Thanks.
Bootply Example
Did you try this?
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<!-- content -->
</div>
</div>
<div id="root" class="container">
<div id="main" class="row">
<section id="content">
<!-- content -->
</section>
</div>
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
</footer>
</div>
Also if this isn't what you're looking for, edit your question and try to be more detailed.
EDIT
OP is looking for the navbar-static-bottom, which renders the footer at the very bottom of the page REGARDLESS* of page content/height. The only issue is, this class has not yet been added to bootstrap. It's in the list of commits, but has yet to be reliably implemented.
Commit Log for Bootstrap
See this document on the status of navbar-static-bottom class. As of right now, there is not reliable way to do this in Bootstrap.
In bootstrap you can style your footer with the class of
navbar-fixed-bottom
A default footer might look something like this:
<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
<div class="container">
...
</div>
</nav>
Have you looked into these examples?
http://getbootstrap.com/examples/sticky-footer/
or
http://getbootstrap.com/examples/sticky-footer-navbar/
This is my favorite:
http://www.cssstickyfooter.com/
It's been working like a charm for years.
Hope this helps!
So you want to keep the footer at the bottom of the page with css, you could just do:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
bottom: 0;
}
I've just started learning twitter bootstrap and I was wondering what the correct method is to clear floats with it.
Normally I would just do something like this:
HTML:
<div class="container">
<div class="main"></div>
<div class="sidebar"></div>
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
.main {
float: left;
}
.sidebar {
float: right;
}
Please ignore the infrastructure of the above as it's just an example.
Now say in bootstrap if I am trying to float some text next to a nav section what is the correct way of doing that?
Consider this example in bootstrap:
<div class="main_container">
<header id="main_header" class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
</nav>
<div class="contact">
</div>
</header>
</div>
I am wanting to float the contact field next to the navbar field.
I have read about bootstrap's .clearfix class, do I just apply this as I have done above (after the floats)? ....or should I apply the class to something else?
You need to utilize the proper bootstrap classes. If inside a container (a true Bootstrap container), you need a row to offset the padding.
<div class="container">
<div class="row">
<header id="main_header" class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
</nav>
<div class="contact pull-left">
</div>
</header>
</div>
</div>
Bootstrap has pull-left and pull-right already to float content. clearfix shouldn't be needed if you are utilizing a container/row.
Realistically you could also (or instead) use the grid utilities on the nav/contact.
I am trying to have my sidebar at full height. I am using bootstrap for my blog and here is a sample page:
http://blog-olakara.rhcloud.com/blog/2013/12/11/welcome-to-jekyll/
I am trying to avoid that white space at the bottom of the screen and have the blue backgound till the bottom . I tried to implement the second solution mentioned in this SO question
But, it spoils the responsive nature for the webpage.
I also found some solution that recommend to modify the base of bootstrap like "row" class.. Is there a solution for bootstrap with responsive retained?
From their sample page:
<!-- Container-->
<div class="container-fluid">
<div class="row">
<!-- sidebar -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div> <!-- sidebar -->
<!-- main pane -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<p>hello world</p>
</div> <!-- main -->
</div> <!-- .row -->
</div> <!-- .container-fluid -->
You may have to tweak some settings from their custom CSS file
Add style="height:100%;" at your <html> tag. So it will be <html style="height:100%" class="js">
Add height to html tag
html {
height: 100%;
}
In the link below:
http://bootply.com/69899
You can see that the input text box is left aligned in the navbar. Is there any way I can align it at the center of the navbar (both horizontally and vertically)?
Try this
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Test</a>
<form class="navbar-search pull-left">
<input type="url" placeholder="none">
</form>
</div>
</div>
</div>
Worked fine for me. Considering you are using bootstrap.
Setting line-height to your div height and using the common align-center should help.