Trying to add the typical bootstrap sticky footer - but cannot get it to work. I've been through it loads of times and suspect I am making some kind of stupid mistake - but I can't find it. I've done loads of searching on stackoverflow and been unable to make the numerous solutions work and I don't know why. I think I've got everything in the wrapper, and I've got the 'push' div too - but it's still refusing to work.
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href="footerspecs.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
</style>
</head>
<body>
<div class="wrapper">
<div class = "navbarandwideimage"><!-- HERE STARTS IMAGE AND NAVBAR -->
<div style="background-image: url(http://i.imgur.com/3w90pjv.jpg); position:absolute; left: 0%; width:100%; top:7%; bottom: 7%;">
<div class = "turnips2" style="position:absolute; bottom:15%; left:5%; right:70%; color=white;">This summer, five adventurers from Inverness and one Northern Irishman completed the first unsupported hike across Iceland from the south to the north - a distance of 400 miles across <b>Europe's last wilderness.</b>
</div>
</div>
<div class="navbar"
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<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>
</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 nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<style>
text-align:justify;
</style>
</div> <!-- HERE ENDSIMAGE AND NAVBAR -->
<!-- HERE STARTS MAIN BODY - PUT YOUR WORK HERE MAGS (in mainbody div)-->
<div class="mainbody" style="position: absolute; top:100%;" >
<div class="col-sm-12">
<h3> Krygyzstan - the land of horses </h3>
<p> lots <br> of <br> text <br> here </p>
</div>
</div>
<div id="push">
</div>
</div><!-- HERE ENDS MAIN BODY -->
<div class="footer"> <!-- FOOTER GOES HERE -->
<footer class="footer">
<div class="container">
<div class="socialmedia">
<a target="_blank" title="follow me on instagram" href="http://www.instagram.com/PLACEHOLDER">
<img alt="follow me on instagra" src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/logos_glyph/Oxi2BIzyfeN5INYU7lta/Glyph_Logo_thumbnail200.png" style=" width:3%; height:3%; border=50px;">
</div>
</a>
</div>
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</div> <!-- HERE ENDS FOOTER -->
</body>
</html>
CSS for footer:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.socialmedia {
border-style:solid;
border-spacing: 10px;
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
REST OF CSS:
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
ul.nav li a>h2 {
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {
min-height:28px !important;
}
.navbar button {
position:absolute;
left:50px;
top:0px;
border-style:none;
border-radius:0px;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bolder;
}
.synopsis {
color:white;
text-align: center;
}
.teampics .row {
margin-top: 17%;
text-align:center;
}
h3 {
text-align:center;
}
.turnips2 {
border-radius: 10px;
font-size: 2.3ex;
text-align:justify;
padding:10px;
color:white;
border-style: solid;
}
Try this:
.footer {
position: fixed;
/*Your other styles go here...*/
}
Related
I'd like to create the main page, with a navtop, a nav left side and content in middle. The menu and the navtop should be fixed on the screen. Only the content should be scrollable.
When the menu is expanded, the content is pushed to the right, without element reordering inside, just pushed as it is on the right, so a part of the content on the right will be hidden out-out the screen while a menu is expanded.
Here are images to illustrate:
Collapsed menu
Expanded menu
(Sorry I can't embed images because of my low reputation)
So when I hover the menu, it expands and pushes the content to the right. When a mouse is out the menu, it collapses and only shows icons.
I nearly managed to do this, but I can't give you the code, it's professional.
I'm the beginner in CSS, it's hard for me I tried a lot but no way to managed to build this page.
I put the menu and the content on float: left, but when I load a new page, the content is on the menu, so I can't click on menu icons anymore.
You can try this demo,
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
I made this that should work how you want if I understood your post correctly. It uses a few lines of Jquery for the animation when you hover over the side navigation menu. The icons and text are just placeholders
$(document).ready(function(){
$(".sidenav").hover(function(){
$(".hidetext").stop(true).toggle("fast");
});
});
html, body{
height: 100%;
min-height: 100%;
}
.navbar {
margin-bottom: 0 !important;
}
.sidenav-wrapper {
margin-top: 51px;
}
.sidenav {
background-color: aquamarine;
height: 100%;
display: inline-block;
float: left;
z-index: 1;
position: fixed;
}
.sidenav span {
font-size: 45px;
padding: 20px;
}
.sidenav span .hidetext {
font-size: 18px;
margin-left: 30px;
margin-top: 12px;
float: right;
display: none; /* Changes to inline-block on hover */
}
.main-content {
margin-top: 51px;
margin-left: 89px;
z-index: -1;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="topnav">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<div class="sidenav">
<div class="sidenav-wrapper">
<span class="glyphicon glyphicon-home home" aria-hidden="true"><p class="hidetext">Home</p></span>
<br>
<span class="glyphicon glyphicon-cog" aria-hidden="true"><p class="hidetext">Options</p></span></div>
</div>
<div class="main-content">
<p>Stuff on the right of side navigation bar</p>
<div class="test"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.
I am trying to make some text responsive. For some reason, media queries are not working and the font is pushed below the image, whereas it should be above.
Here is my code:
// Bootstrap callback test
if ($('#bootstrapCssTest').is(':visible') === true) {
$('<link href="/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css" />').appendTo('head');
}
// Make .navbarButtonDiv go to its child 'a' tag's href on click
$(".navbarButtonDiv").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
// Collapse navbar on nav link click
$(document).on('click', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});
// Collapse navbar on document click
$(document).on('click', function() {
$('.collapse').collapse('hide');
});
/* Font imports */
#import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
#font-face {
font-family: "FuturaNewLight";
src: url("fonts/FuturaNewLight.otf")
}
/* Navbar padding */
body {
padding-top: 100px;
overflow-x: hidden !important;
}
/* Navbar */
.navbar {
font-family: "Bitter", serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
top: 0;
display: block;
width: 100px;
text-align: center;
padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
margin-left: -55px;
margin-top: 10px;
}
.navbar .nav.navbar-nav {
font-size: 150%;
}
.navbar-logo {
height: 145%;
}
/* Media queries */
#media (min-width: 768px) {
.wrapper {
padding-right: 15px;
}
.navbar.navbar-custom .navbar-nav > li > a {
line-height: 60px;
transition: background 200ms linear;
}
.navbar.navbar-custom .navbar-nav > li > a:hover {
background: #96D5FF;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom {
padding: 20px 0;
}
.navbar.navbar-custom .navbar-collapse {
margin: 20px 0 -20px;
border: none;
box-shadow: none;
height: 260px;
}
.navbar.navbar-custom .navbar-nav > li > a {
text-align: center;
}
.navbar-logo {
margin-left: 20px;
height: 110%;
}
.futuraNewLightHeader {
font-size: 20px;
}
}
/* Header styling */
#jumbotronHeader {
position: relative;
font-family: "Bitter", serif;
width: 100%;
bottom: 9px;
}
#homePageImage {
position: relative;
-webkit-filter: blur(5px);
filter: blur(5px);
bottom: 30px;
z-index: -1;
width: 70%;
}
/* Font styling */
.futuraNewLightHeader {
position: absolute;
top: 550px;
font-size: 150px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
.futuraNewLightSubHeader {
position: absolute;
top: 750px;
font-size: 60px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
#dynamicHeaderText {
color: #2099FF;
}
/* General styling */
.centerText {
text-align: center;
}
<!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">
<title>Education for Everyone</title>
<link rel="icon" type="image/png" href="images/edufeLogo.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
<div class="wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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>
</div>
<a class="navbar-brand navbar-brand-centered" href="#/">
<img class="navbar-logo" src="images/edufeLogo.png">
</a>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>About
</li>
<li>Learn
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron" id="jumbotronHeader">
<h1 class="display-3 centerText">Education for Everyone</h1>
<p class="lead centerText">Learn. Create. Share.</p>
<hr class="m-y-3">
</div>
<!-- Image header -->
<div class="imageHeader">
<span class="futuraNewLightHeader centerText"><span id="dynamicHeaderText">Learn</span> something new.</span>
<span class="futuraNewLightSubHeader centerText">From the internet to real life.</span>
</div>
<img src="images/homePageImage.png" id="homePageImage" class="center-block img-responsive">
</div>
<!-- Script tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Thanks! Any help is appreciated!
Move all text formatting options into the media queries and try then.
First you need set #media queries to #media screen and (max-width: ....).
Some cases browsers need screen parameter.
Second, you need change font size of elements when responsive. I suggest using em unit to make responsive.
I'm currently working on a new bootstrap markup for a website and it looks completely as wanted in the Google Chrome - but when I switch to IE11 it looks like the grid system is screwed.
I've specified viewport, IE=edge etc. and tried to include respond.js as various google searches suggested. The website looks fine with xs screen size but for bigger screen sizes the container overflows the window, thus not adapting to the size of the screen.
Can you help me out? The website is available at
thyrace.dk/etape and the markup right beneath.
Thank you very much.
#-ms-viewport { width: device-width; }
#viewport { width: device-width; }
html, body {
height: 100%;
}
body {
background-image: url("../img/bg.png");
background-repeat: repeat;
font-size: 13px;
}
.wrapper {
height: 100%;
display: table;
}
.navbar {
background-color: white;
}
.content {
background-color: white;
height: 100%;
padding: 20px;
}
main, aside {
margin-top: 10px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav li > a:hover {
color: #FFF;
background: grey;
}
aside {
padding: 0;
width: 100%;
}
aside img {
float: left;
margin: 0 0 5px 5px;
}
/* Carousel */
.carousel {
margin-bottom: 20px;
margin: 0 10px 0 10px;
}
.carousel .item {
height: 225px;
background-color: #555;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
}
.carousel-caption h4 {
margin: 0;
background-color: rgba(175, 0, 0, 0.50);
}
.carousel-indicators {
top: 10px;
height: 20px;
}
.carousel-text {
z-index: 1;
position: absolute;
bottom: 20px;
right: 0;
padding: 15px;
width: 400px;
max-width: 100%;
background-color: grey;
color: white;
}
.carousel-text h2 {
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0;
}
.navbar-default .navbar-nav li {
margin-bottom: 1px;
}
#media (min-width: 768px) {
.wrapper {
padding: 20px 0 20px 0;
}
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar {
margin-right: 0;
margin-left: 0;
border-radius: 0px;
}
.navbar-nav, .navbar-nav > li, .navbar-left,
.navbar-right, .navbar-header {
float: none !important;
}
.navbar-right .dropdown-menu {
left: 0;
right: auto;
}
.navbar-logo {
padding: 0 10px 10px 10px;
}
.page-return {
width: 100%;
text-align: center;
margin-top: 5px;
font-size: 11px;
}
}
<!DOCTYPE HTML>
<html lang="da" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ThyRace.dk - Løb med naturoplevelser i Thy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/purple-color-scheme.css">
</head>
<body>
<div class="container wrapper">
<div class="col-xs-12 col-sm-3 col-md-2">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-xs page-return">
Tilbage til hovedoversigten
</div>
<img src="img/logo_etape.png" class="img-responsive navbar-logo hidden-xs" alt="" />
<a class="navbar-brand visible-xs" href="#">
Etapeløb Thy Trail
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="visible-xs">Tilbage til thyrace.dk</li>
<li class="active">Løbsinformation</li>
<li>Rute</li>
<li>Tilmelding</li>
<li>Startliste</li>
</ul>
</div>
</nav>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="navbar navbar-default content">
<div class="row">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/slider/1.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/4.jpg" alt="" />
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-text">
<h2>Fredag d. 30. oktober - Søndag 1. november 2015</h2>
</div>
</div> <!-- End carousel -->
</div> <!-- End carousel row -->
<div class="row">
<div class="col-xs-12 col-sm-9">
<main>
Bla bla bla
</main>
</div>
<div class="col-xs-12 col-sm-3">
<aside>
<img src="http://dummyimage.com/250x100/000/ffffff&text=250*100" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
</aside>
</div> <!-- End aside wrapper -->
</div> <!-- End main + aside row -->
</div> <!-- End navbar -->
</div> <!-- End content col -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Your DOM is not as per bootstrap you've to use something like that
<div class="wrapper">
<div class="container">
<div class="row>
<div class="col-xs-12 col-sm-3 col-md-2">
And You've used display:table for your wrapper viz causing the layout issue for IE as well as in FF
Also for better results stop using your custom class along with bootstrap class otherwise it will misbehave at some points.
For e.g:
Instead of using:
<div class="col-md-6 yourClass">
you should use:
<div class="col-md-6">
<div class="yourClass">
I'm building a simple landing page using Boostrap 3. I'm having trouble getting the contents of my jumbotron to be vertically centered. I'm also having trouble getting the jumbotron to show through my transparent navbar; it's currently pinned to the bottom of the navbar. Here is my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Normalize.CSS -->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<title>Hair by Dennis</title>
</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="#">Hair by Dennis</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 navbar-right text-center">
<li>Services</li>
<li>About Me</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Jumbotron -->
<div class="jumbotron">
<div class="container text-center">
<h1>Hair by Dennis</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- Triggers Modal -->
Make an Appointment
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.navbar, .jumbotron {
margin-bottom: 0;
}
.navbar {
border-radius: 0;
background: none;
}
.navbar .nav > li > a {
color: #F44336;
}
.navbar-default .navbar-brand {
color: #F44336;
padding-left: 50px;
}
.jumbotron {
border-radius: 0;
background-color: #F44336;
color: #FFF;
height: 520px;
}
/***********************
OUTLINE BUTTONS
************************/
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #FFF;
color: #FFF;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
color: #F44336;
background-color: #FFF;
}
.btn-primary.outline:active, .btn-primary.outline.active {
border-color: #FFF;
color: #FFF;
box-shadow: none;
}
/***********************
CUSTOM BTN VALUES
************************/
.btn {
padding: 14px 24px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;
}
.sharp {
border-radius: 0;
}
Please let me know if my questions are unclear. Any help is appreciated!
Add this to your CSS and the vertical centering should work:
.jumbotron > .container {
position: relative;
top: 50%;
transform: translateY(-50%);
}