Make a footer with Bootstrap - html

Question

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?

Answer 1

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
}

Answer 2

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;
}
}