In my code when size of screen changes, the collapse icon appears but when i click that icon none of contents are visible.
and another problem is i want background of section element to be an image, so i added background-image in css but that's not working.
body {
padding-top: 70px;
}
.navbarhead{
background-color: #BDBDBD;
height: 100px;
border-style: solid;
border-right: none;
border-top: none;
border-left: none;
}
#navitem{
font-size: 20px;
color: black;
}
.btn-small{
padding:10px 25px;
}
#btnin, #btnin:hover,#btnin:focus {
color: #fff;
font-family: 'open_sanssemibold';
font-size:20px;
background-color:black;
text-decoration:none;
}
#btnup, #btnup:hover,#btnup:focus {
color: black;
font-family: 'open_sanssemibold';
font-size:20px;
background-color:white;
text-decoration:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ShortFundly-LeaderBoard</title>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<!-- Style sheet -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/leaderboard.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/leaderboard-responsive.css" media="screen">
</head>
<body>
<!--navbar starts-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top navbarhead">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse in navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="https://www.shortfundly.com">
<img src="https://www.shortfundly.com/tpl/main/v4/images/logo.svg" class="img-fluid" alt="Shortfundly Logo" />
</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item" id="navitem">
<a class="nav-link" href="#">Community</a>
</li>
<li class="nav-item" id="navitem">
<a class="nav-link" href="#">Collaborate</a>
</li>
<li class="nav-item" id="navitem">
<a class="nav-link">LeaderBoard</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right my-lg-0 m-0">
<li>sign in</li>
<li>sign up</li>
</ul>
</div>
</nav>
<!--navbar ends-->
<!-- HEADING STARTS -->
<section style="background-image: url('banner.png');margin-top: 100px;">
<div class="container">
<div class="Jumbotron">
<h1>My Jumbotron</h1>
<p>Think BIG with a Bootstrap Jumbotron!</p>
</div>
</div>
</section>
<!--HEADING ENDS-->
</body>
</html>
mgur.com/CE0Fm.jpg
Add these two scripts in your section, bootstrap doesn't work if you haven't defined jquery and bootstrap.js scripts
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
Make sure you have added all the Bootstrap 4 cdns to your project. It looks like you're missing the necessary JavaScripts.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Also, I'd remove height: 100px; from your .navbarhead in your css to make sure the collapsed menu displays properly.
You should also add some styles to your .navbar-brand at the collapse breaking point for good measure. On very small screens, I would take the margin off of your login buttons. The use of !important here is bad practice, but sometimes it is useful when doing overrides for edge cases.
#media screen and (max-width: 992px) {
.navbar-brand {
align-self: flex-end;
margin-top: -2.5rem;
}
.m-4 {
margin: 0 !important;
}
}
See the: CodePen Demo
Related
Bootstrap 5 tab has a Leaflet map which we want to fill all remaining space when selected. We got this working but now when changing tabs the area of the 1st won't go away.
We think it might be due to the ".tab-content > .tab-pane { display: none; }" property in CSS not being used or overridden as indicated by the strikethrough, but we don't know how to address this.
Simplified example:
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="template.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<ul class="nav nav-tabs d-flex" id="myTab">
<li class="nav-item"><button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button">Map</button></li>
<li class="nav-item"><button class="nav-link" id="table-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button">other tab</button></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="mappanel">
<div id="mapid"></div>
<script>var myMap = L.map("mapid");
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors',}).addTo(myMap);
myMap.setView([20.210183, -87.460003], 20);</script>
</div>
<div class="tab-pane fade" id="profile">other tab content</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
CSS:
html, body, #mappanel { margin: 0px; height: 100%;}
body { display: flex; flex-flow: column wrap;}
#mappanel {flex: 1 1; order: 2; display: flex;}
#mapid, .tab-content {flex: 1;}
What are we doing wrong?
two mistakes
first tab-pane must be id="home" not id="mappanel"
if you need mappanel you have to use additional div inside tab-pane.
see below
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="template.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<ul class="nav nav-tabs d-flex" id="myTab">
<li class="nav-item"><button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button">Map</button></li>
<li class="nav-item"><button class="nav-link" id="table-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button">other tab</button></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home">
<div id="mappanel">
<div id="mapid"></div>
<script>var myMap = L.map("mapid");
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors',}).addTo(myMap);
myMap.setView([20.210183, -87.460003], 20);</script>
</div>
</div>
<div class="tab-pane fade" id="profile">other tab content</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<style>
html, body, #mappanel { margin: 0px; height: 100%;}
body { display: flex; flex-flow: column wrap;}
#mappanel {flex: 1 1; order: 2; display: flex;}
#mapid, .tab-content {flex: 1;}
</style>
I am using the sticky footer navbar template from Boostrap as a starting point and trying to have the gray div a fixed height of 120px, and the blue div taking up the remaining height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../../../favicon.ico">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row bg-primary d-flex flex-1 flex-column">
ermentum, tortor tellus ultricies erat, et ultricies magna nisi at
</div>
<div class="row bg-secondary flex-0" style="height:120px;">
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
and the css file
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
line-height: 40px; /* Vertically center the text there */
background-color: #f5f5f5;
}
body > .container-fluid {
padding: 50px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
I also tried taking the code form codepen I found and pasting it in the template and tweeking the CSS but I never got it to work.
[ is what the code posted above looks like in a browser
and I was looking to end up with something that looks like the image below when the height of the blue div is less then the height of the screen - the 40px sticky footer and the 120px grey div.
[
When the content of the blue screen is greater then the height of the screen, then show the scroll bars as necessary and have sticky footer act as a normal footer and shown below the 120px gray div.
Using Bootstrap 4 beta.
My responsive navbar contains a logo in the navbar-brand on the left side and an inline menu of links on the right side. When the viewport changes, the navbar collapses correctly, but the logo does not shrink as it should. This forces the hamburger to wrap below the logo for the smallest viewports.
I would like the logo to shrink to the point where wrapping the toggler button is not necessary.
MIG Logo
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
#wrapper {
min-height:100%; /* For Sticky Footer */
position:relative;
}
.mig-header-menu-bar{
border-style: solid;
border-width: 3px;
border-color: #7C9D63;
}
.mig-header-menu-bar a:link, a:visited{
color: #00008B;
text-decoration: none;
}
.mig-header-menu-bar a:hover, a:active {
color: #7C9D63;
text-decoration: none;
}
.mig-header-menu-toggle-button{
color: white;
background-color: #7C9D63;
max-height: 50px;
z-index: 9900;
margin-top: 1.5rem;
}
.mig-header-menu-bar .nav-pills .nav-item.show .nav-link {
background-color: #7C9D63;
}
.mig-header-menu-bar .dropdown-menu {
border-bottom-width: 4px;
border-bottom-color: #7C9D63;
}
.more-rounded {
border-radius: .50rem;
}
</style>
</head>
<body>
<div id ="wrapper">
<nav class="navbar navbar-expand-md navbar-toggleable fixed-top pt-0" style="background-color: #515254;"> <!-- navbar-expand -->
<div class="nav w-100 justify-content-between align-middle">
<a class="navbar-brand mt-2" href="http://www.methodinvestmentgroup.com">
<img class="img-fluid" alt="Method Investment Group logo" src="https://i.stack.imgur.com/s3oSY.jpg">
</a>
<!-- </div> -->
<button class="navbar-toggler mig-header-menu-toggle-button" type="button" data-toggle="collapse" data-target="#MIGnavbarToggler" aria-controls="MIGnavbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon ">☰</span>
</button>
<div class="collapse navbar-collapse justify-content-end " id="MIGnavbarToggler">
<div class='mig-header-menu-bar more-rounded bg-faded'>
<ul class='nav nav-pills more-rounded bg-light' >
<li class='nav-item'>
<a class='nav-link' href="index.php">Login</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="About.php">About Us</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="ShowFAQ.php">Frequently Asked Questions</a>
</li>
</ul>
</div>
</div> <!-- End of collapse div -->
</div>
</nav>
<!-- jQuery first, then Popper, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I added an id to the parent div and the following media query:
#media screen and (max-width: 340px){
#mig-header > a {
max-width: 200px;
}
#mig-header > button {
padding: 0.25rem;
}
}
It works perfectly.
This works for me to shrink the logo on mobile:
.navbar-brand img {
max-width: 100%;
}
You should set fixed dimensions for your logo like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/60" width="30" height="30" alt="">
</a>
</nav>
That's because the height of the navbar does NOT change and that's the officially recommended way of doing it:
https://getbootstrap.com/docs/4.0/components/navbar/#brand
The page container shrinks when a cell inside a row is empty or does not have enough contents.
html,
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation</h1>
</div>
<!-- main content -->
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header>
<div class="col-md-5">
<input type="text" name="term" placeholder="Search anythhing ...">
</div>
<div class="col-md-7">
<ul>
<li>Welcome to administration area</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label lable-warning">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label lable-message">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out
</a>
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<footer>
<div class="pull-left"><b>Copyright</b> © 2017</div>
<div class="pull-right"><b>Admin System</b></div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And as you can see i am using bootstrap to build my page. Container class is <div class="container-fluid display-table">
The page is supposed to be 100% width but it is having a left and right margins as shown here :
And when i fill the col-md-5with some text that is what i get :
Any idea why this is happening ??
I got this working with just adding width: 100% to the table element.
.display-table {width: 100%;}
Hope this solves the issue.
Agreed added 100% on display-table will give you your result you are wanting.
See screenshot screenshot
I am using twitter bootstrap in Bonfire. I am trying to have a footer at the bottom page if there is less content, and if there is more content, the footer goes towards the end.
I have been trying for hours, and not able to find out what I am missing. I checked examples and codes available, but not able to find out what is different, or missing.
Would really appreciate if anyone could point out what is missed here.
<!doctype html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/assets/css/bootstrap-responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/footer_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/jumbotron.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/default/screen.css" media="screen" />
<link rel="shortcut icon" href="http://localhost/bonfire/public/favicon.ico">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brokerage Free - PAN Services </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
Apply for PAN <b class="caret"></b>
<ul class="dropdown-menu">
<li >New PAN Application</li>
<li class="divider"></li>
<li>Replacement PAN Application</li>
<li class="divider"></li>
<li>Correction PAN Application</li>
</ul>
</li>
<li >FAQ</li>
<li>Track Application Status</li>
<li>Contact Us</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class = "container">
<h1> Privacy Policy </h1>
We are a financial Services Company, offering a wide variety of Financial Services.
</div><div class="push"></div>
<footer>
<div class="container">
<div class="span12">
<div clas="row">
<div class="span2 offset1">About US</div>
<div class="span2 ">Privacy Policy</div>
<div class="span2 ">Terms of Use</div>
<div class="span2 ">Contact Us</div>
</div>
<div class="push"></div>
</div>
<div class="row">
<p align="center">© Brokerage Free 2014. - All rights reserved.
</div>
</div>
</footer>
</div>
The footer_style.css is given below:
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 150px;
position: relative;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
padding-bottom: 60px;
}
#main {
overflow:auto;
padding-bottom:250px; /* this needs to be bigger than footer height*/
}
.container .credit {
margin: 20px 0;
}
</style>
This problem is a CSS problem and had nothing to do with Bonfire. I am posting this solution so if someone has a similar problem in the future, might benefit out of this.
The following link helped me with finding a solution:
http://css-tricks.com/snippets/css/sticky-footer/
The way to go about fixing this issue was to have a wrapper div, and a footer div that is outside of the wrapper div. The link has details.
Best.