I'm creating a simple web page using Bootstrap v3.3.1. I got stucked when trying to force the form-inline in mobile view. It doesn't turn into inline-form like I want.
How to make form-inline works on mobile view too?
Demo
My codes:
index.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">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js 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/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]-->
</head>
<body>
<!-- Page Content -->
<div class="container full">
<div class="row">
<div class="col-md-12">
<h1 class="text-center hero">Mauris risus nisi, hendrerit id orci non, tempor hendrerit enim</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container dropdown-section">
<div class="row">
<div class="col-md-6 col-md-offset-3 dropdown-wrapper">
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control input-lg date-input" id="exampleInputEmail2" placeholder="Date">
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Moving from <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Moving to <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<button class="btn btn-primary btn-lg" type="submit">Search</button>
</form>
</div><!-- /col-md-6 col-md-offset-3 dropdown-wrapper -->
</div><!-- /.row -->
</div><!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
style.css:
body {
background: none;
}
.full {
background: url(http://i.imgur.com/BwqePti.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 400px;
width: 100%;
z-index: 1;
}
.text-center {
text-align: center;
}
h1.hero {
margin-top: 170px;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.8);
font-family: 'Arvo', serif;
font-size: 30px;
}
.dropdown-section{
width: 100%;
background-color: #000000;
}
.dropdown-wrapper{
margin-top: 20px;
margin-bottom: 20px;
}
.date-input{
width: 220px !important;
}
Desktop view:
Mobile view:
Your form elements are inline (more likely inline-block), but their combined widths are wider than the mobile viewport. If you want to restrict them to one line (which doesn't seem like a great idea given the available space) you need to set widths on them. I'd advise percentages. The whitespace between elements will cause you problems with that method if you don't comment it out or account for it in your measurements.
I think your problem is nudging you in the right direction. On such a small screen, inputs are better off spaced out like this. If I were you, I'd widen the Search button and date input to 100% on mobile and reset the width with a media query on desktop/large tablets.
You have to set to inline block and reset the width of the form controls to auto:
.form-inline .form-control {
display: inline-block !important;
width: auto!important
}
You can add custom CSS to these input and button elements.
Add display: inline-block to them and you may remove form-inline then.
Related
I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.
I have a problem with hiding some of my content. I am very new to coding, i started with coding for a week ago. Until now i have learned html, the most inportaint css, and how to use bootstrap 4. My problem is I want to hide some content. I have searched around on the web for hours, and the only ting i found useful was the d-none and d-sm-block and all the other hide and show tags. I tried it several places in my code without any luck, so hope anyone can help.
I want the search bar, log in and register button on small screens to disappear, and then a small dropdown menu shows up instead(only on the small screens). In the dropdown menu i want to have the log in an register button. I know i didn't use boopstrap as navbar at the top, but thats beacause I hadn't learn it yet, and i didn't want to change it since I liked the size on the buttons.
Hope anyone can help.
The top of my html code.(The hotpink buttons are bigger in my real code since I have other text in it)
<head>
<title>hello world</title>
<link rel="stylesheet" href="../test_sublime/css/bootstrap.css">
<link href="test1.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h2><em><u>Header</u></em>.no</h2>
<nav class="headnav">
<ul>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
</ul>
</nav>
<div class="btn-group">
Logg In
Register
<!--This is the search bar I want to hide when the screen is small-->
</div>
<form class="form-inline my-lg sok">
<input class="form-control mr-sm-2 msok" type="search" placeholder="Søk" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 msok" type="submit">Søk</button>
</form>
<!--I want this dropdown menu to show up when the screen is small-->
<div class="dropdown-menu d-block d-sm-none" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="../test_sublime/logg in.html">Logg Inn</a>
<a class="dropdown-item" href="../test_sublime/registrer.html">Register Deg</a>
<div class="dropdown-divider"></div>
</div>
</header>
...
<footer>
...
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script scr="../test_sublime/jQuery/jquery.js"><\/script>');</script>
<script type="text/javascript" src="../test_sublime/js/test.js"></script>
<script src="test_sublime/js/bootstrap.min.js"></script>
</footer>
</body>
Parts of my css
body {
background: pink;
margin-left: 12px;
margin-right: 12px;
margin-top: 10px;
}
h2 {
display:inline;
background: mediumvioletred;
padding: 20px 40px 7px 40px;
margin: 0px 5px 40px -15px;
border-radius: 4px;
}
ul {
display: inline;
margin: 0px 0px 0px -38px
}
.sok {
display: inline-block;
float: right;
margin-right: 35px;
margin-top: 10px;
}
.msok {
margin-top: 0px;
}
.btn-group {
padding: 0px 10px 0px -10px
display: inline;
float: right;
margin-top: 10px;
}
nav.headnav {
display: inline-block;
}
Is it any ways to fix it with bootstrap, or do i have to use JavaSript or something else?
(Sorry for the colors)
Use a media query in your css
#media (max-width: 767.98px) {
form.sok {
display: none;
}
You can hide the elements based on screen size.
Bootstrap Responsive Break Points
This will solve your problem using navbar class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- expanded="false">
<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="#">yourbrand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>About</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="btn input-group-addon">Search</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<div class="btn-group">
Logg In
Register
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
I couldn't find an answer that could really help me out so I decided to ask it (sorry if this has already been asked but I need an answer cause it's annoying me for days now.)As you can see in the picture the navbar is way too long for the actual page
Here's the code:
<!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="">
<title>Afterburners.be - Homepage</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/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]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
<div class="container-fluid">
<!-- 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>
</button>
<p><a class="navbar-brand" href="index.html">Afterburners</a></p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Sponsors
</li>
<li>
Kalender
</li>
<li>
Contact
</li>
<li>
Spelregels
</li>
<li class="dropdown">
Teams <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Jeugd
</li>
<li>
Volwassenen
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<p><img src="images/header.jpg" alt="header" width="100%" height="100%" /></p>
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<img src="images/Welkom.jpg" width="100%" height="100%"/>
</div>
</div>
<hr />
<!-- /.row -->
<div class="row">
<div class="col-md-2">
<p><a class="btn btn-default" href="sponsors.html">Sponsors</a></p>
</div>
<div class="col-md-2">
<p><a class="btn btn-default" href="kalender.html">Kalender</a></p>
</div>
<div class="col-md-2">
<p><a class="btn btn-default" href="contact.html">Contact</a></p>
</div>
<div class="col-md-2">
<p><a class="btn btn-default" href="spelregels.html">Spelregels</a></p>
</div>
<div class="col-md-2">
<p><a class="btn btn-default" href="volwassenen.html">Volwassenen</a></p>
</div>
<div class="col-md-2">
<p><a class="btn btn-default" href="jeugd.html">Jeugd</a></p>
</div>
</div>
<hr />
<!-- Footer -->
<footer style="color:white">
<p>Afterburners.be © 2016</p>
<div id="fb-root">
</div>
<span class="right"><!-- {%FOOTER_LINK} --></span>
<p>Facebook</p>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fhodbafterburners&width=100&layout=standard&action=like&show_faces=true&share=false&height=80&appId=139068449493341" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:80px;" allowTransparency="true"></iframe>
</footer>
<!--footer end-->
</div>
<script type="text/javascript"> Cufon.now(); </script>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
CSS:
.dezelfdegrootte img{
min-height:29em;
max-height: 100%;
width: 100%;
}
body{
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
}
h1{
color:white;
}
hr{
color: white;
}
.sponsor{
width: 100%;
text-align: center;
}
.btn-default{
display: flex;
margin:0 auto;
align-items:center;
}
.btn-default:hover{
background-color:black;
color:white;
}
If anyone could help me out with this problem that would be awesome!
Seems like using a different browser on my phone also did the trick
seems like there was no problem at all sorry for the misunderstanding guys ^-^
It looks to me like the android device; rather than the markup or CSS. I just viewed it in Safari in a few different devices and it renders absolutely fine see.
afterburners.be on iOS
I am pretty new to web development and trying to do my first site in bootstrap. I have everything working perfectly and suddenly my dropdown menu no longer works. Whenever I click the button, it glows like the action is taking place but the list items never appear. I even copied and pasted the template code from the bootstrap components page to test it out and that button also doesn't work.
Am I missing a style link in the head?
Here is the CSS and HTML I am using for the header, the only CSS I added to the drop down menu so far was to change the button color and border:
#header {
margin: 20px 20px 50px 20px;
padding-bottom: 10px;
border-bottom: #3d3935 solid 3px;
overflow: visible;
}
.navbar {
background: #d9d9d6;
padding: 15px 50px;
border-bottom: #3d3935 solid 2px;
}
#header #logo {
float: left;
padding: 0px;
margin-left: 5px;
}
#header #nav {
float: right;
font-family: 'Molengo', sans-serif;
font-size: 18px;
margin-right: -15px;
}
#dropdownMenu1 {
border: none;
background: #d9d9d6;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nate Delforge - Graphic Designer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//use.typekit.net/dpm0esa.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div id="logo" class="col-sm-6">
<img class="img-responsive" src="img/header/natedelforgeHeaderLogo.jpg" alt="Nate Delforge Logo">
</div>
<div id="nav">
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">MENU
<span class="glyphicon glyphicon-menu-hamburger"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#home">HOME</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#about">ABOUT</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#porfolio">PORTFOLIO</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="contact">CONTACT</a></li>
<!-- Adding an External Blog Later -->
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Thanks in advance for any help.
I'm pretty sure you need to load jquery before the bootstrap js as if I remember correctly, bootstrap relies on some of their classes
You should load them in this order. (please let me know if this worked for you. I tested and it seemed to work for me)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
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;