I am trying to make my #home background image to be responsive so when I resize my browser or see it through my mobile it should be responsive please tell me how do I do this? as you can see when I resize my browser the background image does not cover the complete browser.
and on the right side there is white space which means the background image does not stretch to cover the whole section
I hope you understand.
here is my code
HTML:
<!DOCTYPE html>
<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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/jumbotron.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar" >
<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="/"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper -->
<!-- Home -->
<section id="home">
<div class="col-sm-7 hero-text">
<h1>I'm <span>Ali</span></h1>
<p class="subtitle">Front End Developer | Web Designer | SEO Specialist</p>
<ul id="social-icons">
<li><i class="fa fa-facebook fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-google-plus fa-2x"></i></li>
</ul>
</div>
</section>
<footer>
<p>© Muhammad Ali</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.11.3/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
and CSS
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/*Header*/
body {
margin-top: 50px;
font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
font-size: 16px;
background: url('../img/tile.jpg') top left repeat;
}
#home {
background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') 50% 0 repeat fixed;
min-height: 500px;
padding: 40px 0;
}
.hero-text {
text-transform: uppercase;
}
.hero-text h1{
position: relative;
top: 20px;
}
.hero-text h1 span {
color: #FBB829;
}
.subtitle {
padding: 15px 25px;
border: 2px solid black;
text-transform: uppercase;
font-size: 18px;
color: black;
font-weight: 250;
letter-spacing: 0.3em;
margin-right: 25px;
display:inline-block;
position:relative;
left:600px;
top: 20px;
transform: translateX(-50%);
}
Thanks for the help
You can use the background-size: cover css attribute. So it would go on your #home selector like this.
#home {
background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') no-repeat center center fixed;
background-size: cover;
min-height: 500px;
padding: 40px 0;
}
See this for reference https://css-tricks.com/perfect-full-page-background-image/
Try this:
#home {
min-height: 500px;
padding: 40px 0;
background-image: url("http://cookusart.com/images/2/images-background/images-background-02.jpg");
background-repeat: no-repeat;
background-position: center center; /* center the image */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I wanted to add a bootstrap collapse navbar for smaller screen sizes for tablets and mobile phones. For some reason the navbar collapses in general even at the regular laptop screen size. Also when I press the button, the links appear below the navbar instead of inside the navbar. Don't understand the issue as I have used this same bootstrap collapse code before on a different project and had no issues. Please help if you can, thank you.
body {
margin: 0;
padding: 0;
background: url(../Images/td.jpg) center/cover fixed no-repeat;
opacity: 5;
}
/* Navbar */
.navbar {
background: #0c0452;
padding: 20px 20px;
width: 100%;
height: 80px;
}
.logo {
height: 50px;
margin: 5px 10px;
}
.links {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.links li {
display: inline;
}
.links li a {
padding: 40px;
color: gold;
font-family: "Calistoga", cursive;
}
/* End of Navbar */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Lavonte Hights</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Calistoga&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- Latest compiled and minified CSS Bootstrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img src="Images/sheplogo2.jpg" alt="" class="logo" />
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNavbar"
>
<div class="toggler-btn">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="links navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Bio</li>
<li class="nav-item">
Career Stats/Awards & Accolades
</li>
<li class="nav-item">Film</li>
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
</body>
</html>
body {
margin: 0;
padding: 0;
background: url(../Images/td.jpg) center/cover fixed no-repeat;
opacity: 5;
}
/* Navbar */
.navbar {
background: #0c0452;
padding: 20px 20px;
width: 100%;
}
.logo {
height: 50px;
margin: 5px 10px;
}
.links {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.links li {
display: inline;
}
.links li a {
padding: 0 40px;
color: gold;
font-family: "Calistoga", cursive;
}
.navbar-toggler {
color: #ffffff;
}
#media screen and (max-width:768px) {
.links li a {
padding: 0 0 5px;
color: gold;
font-family: "Calistoga", cursive;
}
}
/* End of Navbar */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="css/style.css" />
<title>Lavonte Hights</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Latest compiled and minified CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-expand-md navbar-fixed-top">
<div class="container-fluid">
<img src="Images/sheplogo2.jpg" alt="" class="logo" />
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="links navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Bio</li>
<li class="nav-item">
Career Stats/Awards & Accolades
</li>
<li class="nav-item">Film</li>
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
</body>
</html>
I'm not sure why my content is disappearing almost completely, the navbar is still intact, but it won't open, the text in the navbar won't center, the paragraphs aren't responsive, my subscribe button isn't aligned. I'm extremely frustrated and I've been working on this site for a couple of weeks already. Can someone please help me with this. This is a link to the site: http://bit.ly/1kPKVzR Thanks in advance. This is the code for one of the pages in the site...
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="...">
<meta name="author" content="...">
<title>...</title>
<link rel="icon" href="images/favicon.png" type="image/x-icon" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/customstyle.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
::-moz-selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
::selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
.navbar {
color:#000000;
width: 100%;
background-color: rgba(255, 255, 255, 0.0);
border-color: rgba(255, 255, 255, 0.0);
}
.logo{
display:inline-block;
position: absolute;
left:40%;
font-size: 20px;
font: 80px "munich", Sans-serf, Ariel;
margin-top: 60px;
}
.logo a:focus, .logo a:hover{
-webkit-transition:1s;
color:#999999;
text-decoration: none;
}
.logo li a:focus, .logo li a:hover{
-webkit-transition:1s;
color:#000000;
}
#font-face{
font-family:"munich";
src:url("munich.ttf") format("truetype");
}
.starter-template img{
width:450px;
height:450px;
margin: 40px 100px auto;
}
audio{
width:200px;
}
.starter-template .pull-right{
position:absolute;
}
.starter-template img{
width:450px;
height:450px;
margin:20px 100px auto;
}
#albumlinks{
margin-top:440px;
margin-right: -40em;
}
#signup{
position: absolute; right: -5000px;
}
#mc_embed_signup{
background:none; font:14px Helvetica,Arial,sans-serif; margin:500px;padding:0;
}
/**************** #media screen ********************/
#media screen and (min-width: 480px) {
#albumlinks .clear-fix .pull-right{
width:5em;
height:4em;
}
}
.navbar-default{
background-color: rgba(245, 245, 245, 0.1);
}
.navbar-nav{
margin-top: -20px;
}
</style>
</head>
<body>
<div class="logo">
<p>...</p>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Bio
</li>
<li>
Lessons
</li>
<li>
Shows
</li>
<li>
Music
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="clearfix">
<div class="container">
<div class="pull-left">
<img src="../images/piano-1599x1066.jpg"/>
</div>
<p class="lead pull-right ">...</p>
</div>
</div>
<footer class="navbar-fixed-bottom ">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
<p class="pull-right">...</p>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
There is an error that says "Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"
So you need to change the JQuery that is loaded to a newer version.
Where yours says
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
change it to
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Jquery and Bootstrap .js files are not linked properly.
Once script is working, add css to .navbar-toggle .icon-bar and navbar.
Go to your site and press Ctrl+Shift+I if you are using chrome otherwise right click and choose inspect element. Doing this will bring up the dev tools and most importantly the console.
Looking there we can see that there are errors about JQuery not being loaded.
You can include it in your site by adding the below to the section of your site.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Or alternatively fix the link to your jQuery - http://ericarodriguez.me/jarodkashkin/js/jquery.js
If you click that link you will see that the file does not exist
I have a one page scrolling site using bootstrap. In the header section there is a logo image that is supposed to stay centered at the bottom of the section. However the image consistently stays at the top
HTML:
<header>
<a class="page-scroll" href="#about">
<div class="logo container"> <img src="img/logo_black.png" alt="logo"></div>
</a>
</header>
CSS:
header {
position:relative;
text-align: center;
background-attachment: scroll;
background-image: url(../img/me.png);
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
}
.logo {
position: absolute;
bottom: 0;
}
Harry Robinsob, Here is a Fiddle of your code.
As you had it in the fiddle the logo was stuck to the bottom, it was not centered.
With a little change it is now center.
.logo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here is a link to start your own fiddle.
Sign up to have your own.
Here is a youtube video for a Introduction to jsFiddle.
<!DOCTYPE html>
<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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
header {
position:relative;
text-align: center;
background-attachment: scroll;
background-image: url('http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg');
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
}
.logo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<header>
<a class="page-scroll" href="#about">
<div class="logo container">
<img src="https://saasu.com/media/assets/Saasu-Logo-RGB-Black-400px.png" alt="logo">
</div>
</a>
</header>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
For some reason, my html file will not have the navbar fixed at the top when the website is accessed through a mobile phone. It is, however, fixed at the top for my PC web browsers. What exactly is wrong here?
Note: If I remove responsive.css, then the mobile version is fixed at the top, but not responsive.
Various different answers suggested nav bar fixed top, 0 pixel padding, and user scalable no. None of those seemed to work for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<title>T6</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 0px;
padding-bottom: 0px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
</head>
<br><br><br>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">TMedia</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
<li>Contact Us
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<a href="http://google.com">
<img src="google.jpg" alt="HTML tutorial" width="100" height="100"></a></p>
<a href="http://yahoo.com">
<img src="yahoo.jpg" alt="HTML tutorial" width="100" height="100"></a></p>
<!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Actually, my only problem here was my version of Bootstrap.
In the above code, I was running 2.2.2 and it does not support all mobile aspects fully. After ugprading to 3.0.3, everything works fine.
Trying to modify bootstrap's Sticky footer example http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html to have vertically centred content, but still fail to do that.
The full code is below. I'm trying to vertically align the part between "Begin page content" and "End page content" comments.
Would appreciate any help.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#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;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding-top: 60px;
}
.container .credit {
margin: 20px 0;
}
code {
font-size: 80%;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Header</h1>
</div>
<p class="lead">Content</p>
</div>
<!-- End page content -->
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
</body>
In Bootstrap 3 - sticky footer with vertical and horizontal content.If you don't need horizontal center remove the class text-center.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="col-sm-12 text-center navbar-text">
your content....
</div>
</div>
</nav>
When you set a fixed height then use padding-top to get content centered vertically.
Or you can try to use on your content:
vertical-align: middle;