Using Bootstrap for a responsively designed web-app, I am looking to replicate the typical mobile-app layout:
Fixed Navbar + Overflowing Body + Fixed Footer
Check out the Smartphone preview (right-side icon) of: http://www.bootply.com/124373
I have the following CSS, which is close, but the fixed footer cuts-off the body - instead of the body scrolling:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: -60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px 0;
}
.boxes {
margin-bottom: 22px;
}
.middle {
margin-top: 4%;
overflow: auto;
}
And here's the HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mobile App Format Replication</a>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container middle">
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
...
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
</div>
<!-- Fixed Footer -->
<div id="footer">
<div class="container">
<p class="text-muted">Fixed Footer Content</p>
</div>
</div>
What about using position: fixed on the footer element, and removing the negative margin on the body (instead, use 60px bottom padding instead):
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px;
}
See fork here: Bootply
If you are trying to replicate the mobile app layout, you should try Ratchet:
http://goratchet.com/
And here are some of the examples: http://goratchet.com/examples/
You can use "Tab bar" to have a fixed footer on there. Hope this helps
Just add .bar-nav~.content{padding-top: 44px;padding-bottom: 44px;} in your styles.
It's completely done!
Related
I do not know how is that space coming. I do not want fixed footer but only want fixed navbar. My navbar is working fine but footer is having some white space below it.
body {
padding-top: 4.5rem;
min-height:100%;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
left: 0;
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #000000;
}
This is the CSS for footer. I am using Bootstrap 4.
<body>
<div class="container-fluid">
<nav ..... #code for navbar
</nav>
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
~~~~MY CONTENT~~~
</div>
</div>
</div>
<div class="row">
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer></div>
</div>
</div>
However, when I change the CSS to position:fixed. It works fine but I do not want that. Thank you in advance.
Your content element's height is not the screen's height. Therefore your footer will be like that, you can do it with JavaScript or just put content in your container.
I have a layout using a fixed navbar and sticky footer. In the main body, I have a fluid container with a column aligned to the left. I want that column to vertically fill the main body (between the navbar and footer), however I can't get it to work. I've tried all the examples I can find, to no avail.
I've build this JSFiddle to show what I have so far.
This is what I'm hoping to achieve:
My HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 ">
<div class="main-content">
<h1>Hello world.</h1>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
Sticky footer based on Boostrap example.
</div>
</footer>
And my CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #999999;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container-fluid {
padding-top: 50px;
}
.container-fluid .col-sm-6 {
padding: 0;
}
.navbar {
margin-bottom: 0;
}
.footer {
padding: 15px 0;
}
.main-content {
background: #efefef;
padding: 20px;
height: 100%;
min-height: 100%;
}
You can use height:calc(100vh - 110px); on the .main-content div. The 110px is the height of the footer + height of the header which is subtracted from the viewport height.
http://www.bootply.com/v8XITHB4fP
I need to make a bootstrap footer like the one on the bottom of this site http://drantipov.com/ . But I don't need it to be ".container-fluid", I want it be a responsive fixed width container - ".container". I don't want it to be sticky. I just need to know how to make those 3 columns with links. Without the column with the logo. Can someone please help me?
Created a fiddle for you, check it out :
http://jsfiddle.net/vm3m74q1/7/
To make the 3 columns you can use bootstrap. You can read more about bootstrap columns here: http://getbootstrap.com/css/#grid
<div class="container">
<nav class="row" role="navigation">
<div class="col-sm-4 center"><p>Content here</p></div>
<div class="col-sm-4 center"><p>Content here</p></div>
<div class="col-sm-4 center"><p>Content here</p></div>
</nav>
</div>
CSS for center :
.center {
text-align: center;
}
Added a new fiddle for you with bootstrap 2.3.2 : http://jsfiddle.net/vm3m74q1/11/
With bootstrap 2.3.2 you need to use span as a div class (change col-sm-4 with span 4 to get the same effect), like this.
<div class="container">
<nav class="row" role="navigation">
<div class="span4"><p>Content here</p></div>
<div class="span4"><p>Content here</p></div>
<div class="span4"><p>Content here</p></div>
</nav>
</div>
To delete the spaces between you need to remove margin and change width of .span4, updated fiddle : http://jsfiddle.net/vm3m74q1/12/
.span4 {
background: red;
margin:0;
width: 33.3%
}
nav {
margin: 0
}
.row {
margin:0
}
Try this Courtsey of GetBootstrap:
http://codepen.io/anon/pen/zGpPjX
//Needed since no content
<div id="wrap">
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<div class="col-md-4">
<p>content</p>
</div>
<div class="col-md-4">
<p>content</p>
</div>
<div class="col-md-4">
<p>content</p>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
I have a fairly complex layout that I am building, it relies on a is affected by height, and min-height's so the usual tricks to position the footer at the bottom aren't working.
Given my JSFiddle how can I position the footer at the bottom when the content is a lot or minimal?
Here is some of the css I am currently using:
body, html, #wrapper {
height: 100%;
min-height: 100%;
}
.header {
height: 30%;
background-color: aliceblue;
}
.main {
background-color: antiquewhite;
}
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
If I understand your requirement correctly, you want the footer to sit at the bottom of the content box.
One solution is to make the content box position:relative and move the footer inside it, so that its position:absolute will bind it to the content box, and the bottom:0 will achieve the desired effect of having it sit against the bottom of said content box.
See http://jsfiddle.net/wn6uvske/5/.
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="body-content">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Toggle Menu
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="content container">
<p>Content</p>
<div class="footer"> <!-- moved up into content container -->
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
(relevant) CSS:
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
position:relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
you can use the sticky footer trick. Wrap all of your content in a wrapper excluding the footer, set min-height:100% and margin: -(footer height) on said wrapper to keep it at the bottom:
FIDDLE
UPDATE
You can take the header section out and use CSS calc() to adjust the height:
NEW FIDDLE
First div is navbar and I am creating with the help of twitter-bootstrap. It has 90px height.
Rest of the height will taken by another div with an image background. Here is the code for first nav bar div:
<div id="firstDiv" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="./index.php">Home</a>
</div>
</div>
<div id="secondDiv" class="invite-bg">
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
First Div CSS:
.navbar {
*position: relative;
*z-index: 2;
margin-bottom: 20px;
overflow: visible;
}
.navbar-inner {
min-height: 5.7em; /*change*/
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa;
}
Second Div CSS:
div.invite-bg {
background-image:url('../img/b1g.jpg');
margin:0 auto;
width: 100%;
height: 70%;
position: absolute;
}
I am facing following issues:
How put second div after navbar without using <br/>?
Second Div is overlapping first Div. I want to divide them with height 30% and 70%.
What size of background should choose so that it can fit second div perfectly?
div.invite-bg {
background-image:url('../img/b1g.jpg');
margin:0 auto;
width: 100%;
height: 70%;
position: absolute;
top: 30%;/*moves the div down 30% from the top of the screen*/
}
The added top: 30%; attribute should work for what I think you are asking.