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;
}
Related
This question already has answers here:
Bootstrap 3.3.7 "row" causing horizontal scroll bar
(7 answers)
How to make bootstrap 3 fluid layout without horizontal scrollbar
(21 answers)
Closed 4 years ago.
I made a page with Bootstrap 4 and there's a white space on the right.
I have everything except the nav bar in a div with class col. I didn't put the rows and cols inside a container div because Bootstrap documentation suggests going without it for an edge-to-edge design. (I tried putting them inside a container-fluid div and the gap was still there).
Since col adds 15px on the right and left, I also tried the following, and it didn't remove the gap:
.col {
padding-right: 0 !important;
padding-left: 0 !important;
}
CodePen
There is no need to overwrite bootstrap classes. Use the inbuilt utilities class to overwrite if you have to. Since hero image has to be edge-to-edge you can use p-0 to remove the padding. In footer also you are missing the row-col structure. and wrap your content inside container-fluid as shown in example below.
Try this
Check Demo HERE
HTML
<nav class="navbar navbar-expand-md bg-dark sticky-top navbar-dark">
<!-- Navbar Content -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<div class="hero-image">
<div class="hero-text text-white">
<h1>NC</h1>
<h5>Web developer</h5>
<form action="mailto:email#gmail.com" method="post" enctype="text/plain">
<button class="btn btn-dark btn-top btn-contact">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row about">
<div class="col">
<h2>About</h2>
<!-- Content -->
</div>
</div>
</section>
<section id="portfolio">
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<!-- Content -->
</div>
<!-- End of row div -->
</section>
<section id="contact">
<div class="row contact">
<div class="col center-block">
<h2>Contact</h2>
<p>Have a question or want to work together?</p>
<!-- Content -->
</div>
</div>
</section>
<div class="footer bg-dark row">
<div class="col">
<!-- Content -->
</div>
</div>
</div>
try this
.col{
padding: 0 !important;
}
.row{
margin-left: 0;
margin-right: 0;
}
this is why I hate using bootstrap, since you have to use !important to override bootstrap default style. it even worse using themes based on bootstrap, since its already using !important to override bootstrap style, and you want to override it again
All you need to do is wrap all row in container-fluid like this
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
</div>
</div>
</div>
</div>
<section id="about">
<div class="container-fluid">
<div class="row about">
<div class="col">
</div>
</div>
</div>
</section>
same you will have to do in portfolio and contact
please take a look at my sample code
<div class="container-fluid">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
the picture is in parallax mode but take a look at the screenshot it still has padding.
im trying to achieve the same result as this site: http://remtsoy.com/tf_templates/traveler/demo_v1_7/index.html
JS Fiddle:
http://jsfiddle.net/uf9np3kq/
The default style of container-fluid has padding left and right of 15px. you can override the default behaviour by applying the following style:
.container-fluid{
padding: 0;
}
.container-fluid{
padding: 0 !important;
}
section.parallax-bg-1{
background-size: cover;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
</div>
change
<div class="container-fluid">
....
</div>
To
<div class="container-fullwidth">
....
</div>
You might want to use the div class of jumbotron.
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p>Subtitle>
</div>
</div>
It would look something like this: http://getbootstrap.com/examples/jumbotron/. Then you can apply the styles as you would like.
Just wrap your content in a div.row: http://jsfiddle.net/uf9np3kq/1/
Just swap your <section> and your .container-fluid. Assuming that your section has the background image. See updated fiddle below:
Fiddle
Current:
<div class="container-fluid">
<section>...</section>
</div>
Change to:
<section>
<div class="container-fluid">...</div>
</section>
Note: This also applies to .container not just .container-fluid
<p>if you using vb.net so please go **-Layout.chtml** and find</p>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<p>and change it to the </p>
<div class="container-fluid">
<section>
#RenderBody()
</section>
</div>
<hr />
<div class="container-fluid">
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
**i hope this method usefull for you..**
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%;
}
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