I have a fixed banner at the top of my html page. When I scroll down the idea is to have the body go underneath the top navingation banner.
It works fine except for the icons i have inside the 'col-xs-4' class.
the icons (or what ever i put inside the col-xs-4 class) seem to go over the top banner.
How can I update this so the banner is always on top.
here is link to codepen
below is the html code :
<html>
<head>
<title>hello</title>
<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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
position:fixed;
width:100%;
background-color:white;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
</head>
<body id="top">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header myNavbar">
<a class="navbar-brand" href="#top">HOME</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse myNavbar" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT
</li>
<li>CONNECT
</li>
<li>PROJECTS
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid bg-1 text-center">
<h3>hello world</h3>
<h3 style="color:lightblue;">say something...</h3>
</div>
<div id="connect">
<div class="container-fluid bg-3 text-center">
<h3>Connect</h3>
<div class="row">
<div class="col-xs-4">
<p>
<i class="fa fa-linkedin fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-github fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-stack-overflow fa-lg"></i>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<p>
<i class="fa fa-instagram fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-medium fa-lg"></i>
</p>
</div>
<div class="col-xs-4">
<p>
<i class="fa fa-codepen fa-lg"></i>
</p>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Just add this to your css:
.navbar-default {
z-index: 1;
}
Updated CodePen Demo
You need to set the z-index so your fixed navbar appears in front of the other elements.
Here are some helpful docs/articles on z-index:
MDN web docs
w3schools
css-tricks
What No One Told You About Z-Index
Related
I am trying to build a website (using bootstrap 4) that has a footer containing 3 columns. When the browser is big enough (e.g. open on PC) it looks absolutely fine, but if the browser is compressed (e.g. mobile phone) then you only see part of the footer.
What am I doing wrong please? I have been googling for hours, reading as many other Stack Overflow articles and trying them and not getting anywhere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 200px; /* bottom has to be the same as footer height */
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.copyright-container
{
padding: 10x;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="2.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container"><p>Page Content</p></div>
<footer class="section footer-classic context-dark bg-image" style="background: #000000;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4">
<hr>
<div class="text-center center-block">
<p>You can follow us on:</p>
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
<hr>
</div>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Site</h5>
<ul class="nav-list">
<li>About</li>
<li>Help</li>
<li>Accessibility</li>
</ul>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Legal</h5>
<ul class="nav-list">
<li>Terms of Service</li>
<li>Privacy Policy</li>
<li>Cookie Policy</li>
</ul>
</div>
</div>
</div>
<div class="row copyright-container">
<p class="rights">
<span>© </span><span class="copyright-year">2020</span><span> </span><span>PERSON</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</footer>
</body>
</html>
I think the main issue might be incorrect structure (HTML along with the corresponding Bootstrap classes). If you're going to use Bootstrap's grid system, then it's a good idea to follow the structure that they recommend in order to have a fully responsive website.
Following their convention and structure can be tricky at first, but once you go through the motions it should work fine. Be aware that specific styling and layout does require some research.
The following example was inspired from their project examples page.I adapted the code based on your question regarding the footer responsiveness. I removed the top navbar for simplicity:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sticky Footer inspired by Bootstrap Examples</title>
<!-- Bootstrap 4 CDN as of 01/17/2020 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fontawesome 4.7 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,
body {
height: 100%;
}
.fa {
color: white;
}
</style>
</head>
<body class="d-flex flex-column">
<!-- Main page content -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Main container</h1>
</div>
</main>
<!-- Respoonsive footer using Bootstrap's grid layout -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<div class="row">
<div class="col align-self-center">
<i class="fa fa-twitter-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-envelope-square fa-4x" aria-hidden="true"></i>
</div>
<div class="col">
<h5>Site</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">About</a></li>
<li><a class="text-muted" href="#">Help</a></li>
<li><a class="text-muted" href="#">Accessibility</a></li>
</ul>
</div>
<div class="col">
<h5>Legal</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Terms of Service</a></li>
<li><a class="text-muted" href="#">Privacy Policy</a></li>
<li><a class="text-muted" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Working example here
I have edit your css & HTML
html,body, .wrapper {
position: relative;
height: 100%;
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
}
.copyright-container
{
padding: 10x;
}
https://jsfiddle.net/lalji1051/r5aqxetv/7/
how do i display the image on the .middle div to the full screen, i get a little white space at the end of the image in the right.i am using bootstrap 3 and css and html The image in the middle div is not taking the entire space it happens when i use the row class.I have included the css and html code.
#content{
text-align: center;
padding-top: 25%;
}
.middle {
background-image: url(https://images.unsplash.com/photo-1415369629372-26f2fe60c467);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 700px;
font-family:Lato;
color: white;
}
html{
height: 100%;
}
h1{
font-weight: 700;
font-size: 5em;
}
hr{
width: 400px;
border-top:1px solid #f8f8f8;
border-bottom: :1px solid rgba(0,0,0,0.2);
}
a{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Purfect match</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<span class="glyphicon glyphicon-fire"></span> Purfect Match
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Pets For You</li>
<li>Blog</li>
<li>Careers</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in <i class="fas fa-user-plus"></i></li>
<li>Log in <i class="fas fa-user"></i></li>
</ul>
</div>
</div>
</nav>
<div class="middle">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Perffect match</h1>
<h3>The Only Human-feline dating app</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The issue doens't come from your background-image, but from your last <div class="row">
You MUST put the bootstrap row inside an element with class container or container-fluid
Try to replace your last block with :
<div class="container">
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>
I'm having trouble aligning <h2> in a straight line on a Bootstrap page (centered column) as shown in the snippet below.
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
<!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-sm-4 col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4 col-centered">
<h2>Achievements</h2>
</div>
<div class="col-sm-4 col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
If I add the <ul> after <h2> the remaining <h2> gets misaligned. I have shown the picture here How do I align them?
It is done and worked perfectly check it. Hope this works for you.
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer {
background-color: #AfAfAf;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</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 class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4 col-md-4col-centered">
<h2>Achievements</h2>
</div>
<div class="col-sm-4 col-md-4col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Contact
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i>
</li>
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-google-plus"></i>
</li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
Since you tried to add three columns in a row for small screen, it was break.
Add proper classes for columns. col-xs-12 col-lg-4 col-centered
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none !important;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
<!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-xs-12 col-lg-4 col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-xs-12 col-lg-4 col-centered">
<h2>Achievements</h2>
</div>
<div class="col-xs-12 col-lg-4 col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
use a min-height to your h2 div's min-height:200px;
<!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
<style type="text/css">
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-sm-4" style="min-height:200px;">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4" style="min-height:200px;">
<h2>Achievements</h2>
</div>
<div class="col-sm-4" style="min-height:200px;">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
I'm trying to create a typical user panel with thymeleaf layouts.
As you can see on the expected result picture below, the layout is composed by a header and left menu. The contents chosen from the menu are displayed in the child section:
However, the result I get is this one:
This is my "fixed parts" code where the header is the "header" fragment and the menu is the "menu" fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
<nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/>
</li>
<li>
<i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/>
</li>
</ul>
</div>
</nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
This is my "child" page where I import both, the header and the menu fragments:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>
<div>
my page content
</div>
<script>
function test() {
alert("TEST");
}
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
You can find the gitHub repository with the sample code at this link:
https://github.com/MichaelKnight/thymeleafLayout
Bootstrap Dashboard
This Bootstrap Dashboard example showcases how to achieve a three component page.
Top Navigation Bar
Sidebar Navigation Menu
Content Area
The Top Navigation bar is a root component inside your <body>. The Sidebar and Content Area are <div class="col-xs-*"> columns located inside a <div class="row"> row which resides in a <div class="container-fluid"> container.
Visit the link above and view-source to see the structure of the HTML. Fundamentally this is a CSS problem, as your current GitHub project contains all of the elements, they are just positioned behind each other out of view. Adding the appropriate Bootstrap classes will resolve the problem.
The Thymeleaf fragments are being included properly.
The layout sample is uploaded to my gitHub repository which you can find at the end of the issue description.
The top bar:
<div layout:fragment="header">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
</div>
The side menu:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
Then you have to create the layout page:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
I'm using Bootstrap columns to lay out my administration page and I'm having some trouble getting the footer to stay at the bottom. For some reason, the footer keeps flying up into the bottom of the second column instead of saying below the columns, despite not being included in the column structure. Why might this be happening?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administration</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/Administration.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Football Pool 2014</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Rules</li>
<li>Results</li>
<li>Weekly Picks</li>
<li>Winners Pool</li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="xxx" /> <ul class="nav navbar-nav navbar-right">
<li>Administration</li>
<li>
Hello User!
</li>
<li>Log off</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Administration</h2>
<div>
</div>
<div>
<div class="col-md-6">
<a class="adminButton" href="/Home/CreatePerson">Create Person</a>
<a class="adminButton" href="/Administration/UpdateOrDeletePerson">Update or Delete Person</a>
<a class="adminButton" href="/Administration/ManageResults">Manage Results</a>
</div>
<div class="col-md-6">
<a class="adminButton" href="/Administration/UpdateWeeklyPicks">Manage Weekly Picks</a>
<a class="adminButton" href="/Administration/UpdateWinnersPicks">Manage Winners Picks</a>
</div>
</div>
<hr />
<footer>
<p>© 2014 - us</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"xxx"}
</script>
<script type="text/javascript" src="http://localhost:123/xxx/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
CSS:
body {
}
.adminButton
{
display:block;
background-color:#0072C6;
padding:30px;
width:300px;
border-radius:5px;
text-align:center;
font-size:20pt;
margin:1px;
color:#FFFFFF;
font-family:'Segoe UI Light';
}
.adminButton:hover
{
background-color:#1E82CC;
text-decoration:none;
color:#FFFFFF;
}
.adminButton:active
{
background-color:#212121;
}
Yeah I think drip is correct. Check out the Bootstrap docs on grids. The order should be container > row > column, though the column class is unneeded if you just want a single full width column. This will work:
<div class="row">
<footer>
<hr />
<p>© 2014 - us</p>
</footer>
</div>
you missed to add row check this
HTML
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>