I want to put an image on top of the footer, but my image is lying somewhere in the middle of the screen. I have tried vertical-align, wokaround using margin, but no success yet.
Here's jsFiddle
Here's my HTML structure,
<body id="extranav">
<div class="wrapper">
<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">
<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.php"><img src="images/logo.png" ></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">
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>FAQ</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<br><br>
<div class="text-center">
<a href="#" class="fa icon fa-twitter fa-lg" ></a>
<br><br>
<div class="footer-links">
Feedback
AboutUs
FAQ
<p>© All Rights Reserved</p>
</div>
</div>
</div>
</body>
And the CSS
html,body
{
height: 100%;
/*font-size: 15pt;*/
font-family: 'Varela Round', sans-serif;
background-color: #fff;
min-height: 1024px;
}
.footer
{
background-color: #2D3339;
color: white;
}
.footer a
{
line-height: 2.8em;
}
.footer-links a,.footer-links p
{
color: #aaa;
text-align: center;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
.footer, .push {
height: 200px;
font-size: 15px;
}
.push
{
background: url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom transparent;
}
Why don't you put the footer image div directly inside the footer? It will naturally fall right above the footer that way, then you just need to adjust the CSS so that the footer is 400px tall(200px for the image and 200px for the footer section below the image):
.footer
{
height:400px;
font-size: 15px;
background-color:#2D3339;
color:white;
}
.push
{
height:200px;
background:url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom;
}
JSFiddle
Do you mean like this?
Relevant HTML:
<div class="footer">
<div class="push"></div>
<br />
<br />
<div class="text-center">
<br />
<br />
<div class="footer-links">
Feedback
AboutUs
FAQ
<p>© All Rights Reserved</p>
</div>
</div>
</div>
Relevant CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -400px;
}
.footer {
height: 400px;
font-size: 15px;
}
.push
{
height:200px;
background: url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom transparent;
}
Related
I couldn't find anything like this on internet so I'm asking you guys! The problem is that my icons overlap my collapsed navbar.
My code:
<div class="container-fluid">
<div class="row">
<div class="">
<div id="black">
<nav class="navbar navbar-default navbar-inverse" 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 collapsed" 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>
<a class="img-responsive col-xs-4 col-sm-8 col-md-10 col-lg-12" href="#">
<img id="logo2" alt="Logo" class="" height="80%" width="73%" src="images/logo1.png">
</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="">
<div id="black">
<nav class="navbar navbar-default navbar-inverse" 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 collapsed" 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>
<a class="img-responsive col-xs-4 col-sm-8 col-md-10 col-lg-12" href="#">
<img id="logo2" alt="Logo" class="" height="80%" width="73%" src="images/logo1.png">
</a>
</div>
<!-- Navbar contentas -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="visible-lg" href="#">Pagrindinis</a></li>
<li><a class="visible-lg" href="#">Kontaktai</a></li>
<li><a class="visible-lg" href="#">Apie mus</a></li>
<li><a class="visible-lg" href="#">Paslaugos</a></li>
<li></li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li></li>
<li>Pagrindinis</li>
<li>Apie mus</li>
<li>Kontaktai</li>
<li>+370 67651008</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text" style="margin-left: 15px;" >Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div id="mint"></div>
<div class="" id="background1">
<div class="container-fluid">
<img class="img-responsive" id="logo1" src="images/logo1.png"/>
</div>
<div class="container-fluid">
<p id="p1" class="" >A great new free psd theme to showcase your<br>new application.</p>
</div>
<div id="sicons">
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" src="images/icon1.png"/>
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" style="margin-left: -15px; margin-right: -15px;" src="images/icon2.png"/>
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" src="images/icon3.png"/>
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#black {
height: 48px;
background-color: #282828;
}
/*------------NAVBAR DALYKAI-------------------------*/
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
/*-------------------------------------------------------------------------------------------------------------------------*/
#mint {
height: 10px;
background-color: #2ecc71;
}
#background1
{
height: 600px;
background-image: url("images/background1.jpg");
background-repeat: no-repeat;
background-size:100%;
}
.p {
font-family: Myriad Pro;
}
#logo1 {
width: 10%;
margin-left: 20%;
margin-top: 11%;
}
#logo2 {
margin-top: 5%;
}
#p1 {
font-family: helvica-thin;
margin-left: 20%;
margin-top: 2%;
color: white;
font-size: 1.5vw;
}
#sicons {
position: absolute;
margin-left: 20%;
background-color: grey;
}
#sicons a:hover {
color: green;
}
#white {
height: 245px;
}
#icons {
position: absolute;
}
#iframe {
/*margin-top: 55px;
margin-left: 350px;*/
border-radius: 10px;
overflow: hidden;
max-width: 560px;
max-height: 315px;
}
#button {
border-radius: 0px 10px 10px 0px;
height: 56px;
width: 141px;
background-color: #2ecc71;
border: 0;
box-shadow:none;
color: white;
font-size: 24px;
}
#p2 {
position: absolute;
text-align: center;
}
#grey {
height: 427px;
background-color: #e3e3e3;
}
#white1 {
height: 468px;
}
#grey1 {
min-height: 130px;
background-color: #e3e3e3;
}
From looking at your code sample, it appears the culprit is #sicons having a value of position: absolute;. Items positioned absolutely will always sit on top of relatively position items. Try assigning your navbar and #sicons containers with z-index values, making #sicons's value lower than your navbar.
For more information about how z-index works, how it interacts with positioned elements, and the stacking order, check out the answer on this Stack Overflow question: "Understanding z-index stacking order"
I have read a lot of posts about this but I still didn't find an answer.
I have a footer that I want to be at the end of the page, not fixed.
The problem is that the footer is where the content ends. Look at picture.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li> Početna strana </li>
<li class="active"> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Prošić 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> Facebook </li>
<li> Twitter </li>
<li> Google+ </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my CSS, for the footer only:
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
Please check the examples: Bootstrap 4 Bootstrap 5
In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
Please check this example:
Bootstrap 3
In my case for Bootstrap4:
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
You can just add:
style="min-height:100vh"
to your page content container and place the footer in another container
Use this stylesheet:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
© 2021 Company, Inc
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
:root {
--text: #daf7a6;
--header: #581845;
--main: #900c3f;
--footer: #ff5733;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
header,
main,
footer {
color: var(--text);
height: 100px;
padding: 1rem;
}
header {
background-color: var(--header);
}
main {
background-color: var(--main);
}
footer {
background-color: var(--footer);
position: sticky;
top: 100vh;
}
<header>header</header>
<main>content</main>
<footer>footer</footer>
Layout - Line up 3 images in bootstrap grid. .col-sm-3 doesn't help. What am I doing wrong? How to achieve that? I was thinking bootstrap grid makes it perfectly one next to each other with column width. Please help!
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
this should work
Demo: http://codepen.io/anon/pen/JdWrKX?editors=110
As you can see there is a responsive table inside ".panel" which you can scroll horizontally. Great.
But it makes the entire page expand horizontally and not fit in the window.
Try on small screens to see the bug.
HTML:
<div id="wrap">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
<div class="content content-primary content-sm">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="table-responsive">
<table class="table-bordered">
<tr>
<td>
<div>a</div>
</td>
<td>b</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Copyright</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
</footer>
</div>
CSS:
html,
body {
height: 100%;
}
#wrap {
height: 100%;
display: table;
width: 100%;
}
#wrap > nav,
footer {
display: table-row;
}
nav.navbar {
margin-bottom: 0;
}
.content-sm {
padding: 15px 0;
}
.content-primary {
background: #337ab7;
}
.content {
display: table-cell;
height: 100%;
}
td {
text-wrap: no-warp;
}
td div {
width: 900px;
}
Since the child elements of .content seems to be ignoring % width values, the work around that worked for me was:
.content > * {
width: 100vw;
}
I also added the class .table to your table element
<table class="table table-bordered">
Here is a Demo
NOTE: The vw unit only works in modern browsers. Check support here
Change the table code like this:
<div class="content content-primary content-sm">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-responsive table-bordered">
<tr>
<td>
<div>a</div>
</td>
<td>b</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
and remove this from your css file
td div {
width: 900px;
}
Try editing the width of your td's child div like this
td div {
width: auto;
}
I hope it helps fixing the bug.
If the window size is less or equal to 900px the td content will go beyond that. You should not fix the td div size in px. Use instead % (percentage).
td div
{
width: 100%;
}
The problem is that tables are by nature not responsive. You have resorted to using display table, table-row, and table-cell which are expanding beyond the veiwport with the content, and creating your undesired effects.
As you can see in this fiddle: if you remove the table elements, your width issue goes away, but then you don't get the sticky footer you're looking for.
changing your CSS to:
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
background: #337ab7;
}
.page-wrap:after {
content: "";
display: block;
height: 51px;
}
nav.navbar {
margin-bottom: 0;
}
.content-sm {
padding: 15px 0;
}
.box-content {
width: 9000px;
height: 5000px;
background: red;
}
.box-responsive {
width: 100%;
max-width: 100%;
overflow-x: scroll;
border: 1px solid green;
}
You will get your desired responsive width, as well as a full height webpage with sticky footer.
I'm currently making a website using bootstrap, but at the end of the homepage's background image there is a piece of white space about 50px in length.
Is it possible to get rid of this strip of white space? I have provided my html and css code for the site. Help would be much appreciated.
HTML
<!-- html-->
<div id="title-page">
<div class="container">
<div id="nav" class="navbar navbar-inverse navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="pic-headings">
<h1 class=" text-center" ></h1><>
<br>
<h2 class=" text-center"></h2>
</div>
</div>
</div>
CSS
<!--css-->
#nav{
margin-bottom: 0px;
background-color: transparent;
border: none;
padding-right: 20px;
}
.navbar-brand{
color: #fff;
}
#title-page{
background-size: 100%;
background-size: cover;
background-image: url(stephen1.jpg);
color: #fff;
height: 830px;
margin-bottom: 0px;
}
#pic-headings{
padding-top: 200px;
text-align: center;
}
h1{
font-family: eb-garamond, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h2{
font-family: eb-garamond, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
On line 24 you have some stray characters <> which can't be helping your situation. And you may consider restructuring your code without the nested container classes and overall just not nesting your div's so deeply. In the process of doing that you will most certainly identify the problem.
Please post link or jsfiddle or more code, and which version of Bootstrap your trying to use to get more help.
this may or may not help get you started
<div id="header">
<div class="container clearfix">
<ul id="nav">
<li></li>
</ul>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span12">
something
</div>
</div>
</div>