I am using Bootstrap 4, and I have a pretty complex footer:
...that adjusts its height dynamically. This is a PHP application, so the content in the center of the screen changes. When the content is bigger than the screen, it pushes the footer to the bottom as desired. However, I have scenarios where the content is pretty small and then the footer has whitespace underneath it.
I also have a header.
How can I use CSS to adjust the bootstrap classes so that if (and only if) the height of the content plus the height of the footer is not 100% of the viewport height, it expands the content so that it is?
Here is what it looks like currently:
As you can see, the whitespace is at the bottom of the screen below the footer. I do not want to make a sticky footer and scroll in the middle, I just want the footer to be at the bottom of the screen if the content in between the header and footer isn't taking up the remaining height.
Everything I've seen so far requires you to fix the height of the footer but then I fear the footer will not respond properly on different screen sizes.
Here is my general HTML layout, with bootstrap classes:
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top top-nav-collapse">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="https://dization.com/" target="_blank"><img src="../public/images/cropped-logo_white.png" width="185" height="58px"></a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!--/.Navbar-->
<!--Main layout-->
<main class="mt-4">
<div class="container">
<div class="row justify-content-center" id="divCardSignUp">
<div class="col-lg-12">
<div class="card my-5">
<!-- Logo -->
<div class="card-header pt-4 pb-4 text-center bg-light">
<span><img src="../public/images/Logo-no-text.png" alt="" height="30"></span>
</div>
<div class="card-body p-4">
<!-- boot strap rows and cols divs in here -->
</div>
</div>
<!-- end card -->
</div> <!-- end col -->
</div>
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small unique-color-dark mt-2">
<!-- Social buttons -->
<div class="primary-color">
<div class="container"></div>
</div>
<!-- Social buttons -->
<!--Footer Links-->
<div class="container mt-5 mb-4 text-center text-md-left">
<div class="row mt-3"></div>
</div>
<!--/.Footer Links-->
<!-- Copyright -->
<div class="footer-copyright text-center py-3"></div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
Here is the only custom CSS I added to the page:
html,
body,
header {
height: 100%;
}
body {
padding-top: 70px;
}
Any help would be appreciated.
Thanks.
Ok, I solved this problem with probably not the most elegant of solutions, but it works for me.
I used a combination of Javascript and CSS as I could not figure out a CSS-only trick.
Again, my biggest constraint is that the footer dynamically changes size based on the screen size, AND the content in the main section changes based on what the server serves. Sometimes the content is large which will require the user to scroll to see the footer (I do not want a sticky footer), and sometimes the content is small which means the footer was showing up right below the content and there was whitespace at the bottom of the footer. Again, I'm using bootstrap 4.5 classes and the only other CSS is listed below.
In order to fix the whitespace, and not use a sticky footer, here is what I did.
CSS:
html,
body,
header {
height: 100%;
}
body {
padding-top: 70px;
}
HTML shell code is the same as it was above:
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top top-nav-collapse">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="https://dization.com/" target="_blank"><img src="../public/images/cropped-logo_white.png" width="185" height="58px"></a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!--/.Navbar-->
<!--Main layout-->
<main class="mt-4">
<div class="container">
<div class="row justify-content-center" id="divCardSignUp">
<div class="col-lg-12">
<div class="card my-5">
<!-- Logo -->
<div class="card-header pt-4 pb-4 text-center bg-light">
<span><img src="../public/images/Logo-no-text.png" alt="" height="30"></span>
</div>
<div class="card-body p-4">
<!-- boot strap rows and cols divs in here -->
</div>
</div>
<!-- end card -->
</div> <!-- end col -->
</div>
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small unique-color-dark mt-2">
<!-- Social buttons -->
<div class="primary-color">
<div class="container"></div>
</div>
<!-- Social buttons -->
<!--Footer Links-->
<div class="container mt-5 mb-4 text-center text-md-left">
<div class="row mt-3"></div>
</div>
<!--/.Footer Links-->
<!-- Copyright -->
<div class="footer-copyright text-center py-3"></div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
And here is the JS I added before the body closing tag:
<script language="JavaScript">
function footerAlign() {
//Get the height of the footer
var footerHeight = $('footer').height();
//Get the height of the nav bar
var navHeight = $('nav').height();
//Set the min-height of the content to 100% of the viewport height minus the heights of the footer and the nav and in my case 32 px of padding.
$('main').css('min-height', 'calc(100vh - ' + (footerHeight + navHeight + 32) + 'px');
}
$(document).ready(function() {
footerAlign();
});
$(window).resize(function() {
footerAlign();
});
</script>
Related
This question already has answers here:
Bootstrap 3.3.7 "row" causing horizontal scroll bar
(7 answers)
How to make bootstrap 3 fluid layout without horizontal scrollbar
(21 answers)
Closed 4 years ago.
I made a page with Bootstrap 4 and there's a white space on the right.
I have everything except the nav bar in a div with class col. I didn't put the rows and cols inside a container div because Bootstrap documentation suggests going without it for an edge-to-edge design. (I tried putting them inside a container-fluid div and the gap was still there).
Since col adds 15px on the right and left, I also tried the following, and it didn't remove the gap:
.col {
padding-right: 0 !important;
padding-left: 0 !important;
}
CodePen
There is no need to overwrite bootstrap classes. Use the inbuilt utilities class to overwrite if you have to. Since hero image has to be edge-to-edge you can use p-0 to remove the padding. In footer also you are missing the row-col structure. and wrap your content inside container-fluid as shown in example below.
Try this
Check Demo HERE
HTML
<nav class="navbar navbar-expand-md bg-dark sticky-top navbar-dark">
<!-- Navbar Content -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<div class="hero-image">
<div class="hero-text text-white">
<h1>NC</h1>
<h5>Web developer</h5>
<form action="mailto:email#gmail.com" method="post" enctype="text/plain">
<button class="btn btn-dark btn-top btn-contact">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row about">
<div class="col">
<h2>About</h2>
<!-- Content -->
</div>
</div>
</section>
<section id="portfolio">
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<!-- Content -->
</div>
<!-- End of row div -->
</section>
<section id="contact">
<div class="row contact">
<div class="col center-block">
<h2>Contact</h2>
<p>Have a question or want to work together?</p>
<!-- Content -->
</div>
</div>
</section>
<div class="footer bg-dark row">
<div class="col">
<!-- Content -->
</div>
</div>
</div>
try this
.col{
padding: 0 !important;
}
.row{
margin-left: 0;
margin-right: 0;
}
this is why I hate using bootstrap, since you have to use !important to override bootstrap default style. it even worse using themes based on bootstrap, since its already using !important to override bootstrap style, and you want to override it again
All you need to do is wrap all row in container-fluid like this
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
</div>
</div>
</div>
</div>
<section id="about">
<div class="container-fluid">
<div class="row about">
<div class="col">
</div>
</div>
</div>
</section>
same you will have to do in portfolio and contact
I have a layout that uses 100% height DIVs. When I add the footer however it jumps to the first DIV and floats somewhere around the middle of it. I looked at the code and it seems .articleBody and item-page are the parents of my children DIVs but according to the inspector only wraps the first DIV (all the DIVs are inside of container and the DOM tree has my 100% height DIVs as children).
I have tried using position absolute, giving the footer a height and trying to force it to bottom. It only forces it to the bottom of the first 100% height DIV.
My only thought now is if I can remove .articleBody and item-page to solve this problem? If they are only wrapping the first DIV maybe the .container-fluid would be the only parent and the footer can rest at the bottom. If anyone else has another solution, I'm all ears, I just need this issue fixed as it's dragged on for a while. For the record, I am loading Bootstrap 3 successfully.
Thank you!
HTML - INDEX.PHP
<div class="container-fluid">
<nav class="navbar" role="navigation">
<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>
</div>
<div class="collapse navbar-collapse">
<jdoc:include type="modules" name="nav" style="html5" />
</div>
</nav>
<jdoc:include type="message" />
<jdoc:include type="component" />
<!--END CONTAINER-->
</div>
<footer>
<div class="container">
<div class="row footer-container footer-row">
<div class="col-sm-3">
<div class="footer-logo">Logo</div>
</div>
<div class="col-sm-9">
<p class="footer-about">
About
</p>
<p class="footer-text">
Footer content here
</p>
</div>
<div class="col-sm-3">
<p class="footer-about">
Contact Info
</p>
</div>
</div>
</div>
</footer>
HTML - IN CODE EDITOR OF THE AFFECTED PAGE
<div class="container-fluid">
<div id="landing-bkg">
<div class="row">
<div class ="col-sm-7 col-xs-12">
<h1>Headline</h1>
<h3>Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END LANDING BKG-->
<div id="another2">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Headline</h2>
<h3 class="center">Subhead</h3>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER2-->
<div id="another3-bkg">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class ="col-md-7 col-sm-12 col-xs-12">
<h2>Headline</h2>
<h3> Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END NESTED COLUMN -->
</div>
<!-- END NESTED ROW -->
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER3 BKG-->
<div id="another4">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Subhead</h2>
<form>
<input type="email" placeholder="Input Field" class="center-block">
</form>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- ANOTHER 4 -->
</div>
<!-- END CONTAINER -->
CSS
/****HTML & BODY ****/
html,
body{
width:100%;
height:100%; //Makes my DIVs 100% height, works great
margin:0;
padding:0;
}
/****CONTAINER ****/
.container-fluid{
height:100%;
}
/**** JOOMLA CLASSES I OVER RIDE TO GET THE DIVS AT 100% DOESN'T WORK WITHOUT IT ****/
.item-page{
height:100%;
}
div[itemprop="articleBody"]{
height:100% !important;
}
/**** FOOTER ****/
.footer-container{
background-color:#565A5C;
width:100%;
padding-top:50px;
padding-bottom:25px;
}
footer{
position:relative;
}
.footer-row{
width:100% !important;
margin:0 !important;
}
The only way I found is by changing the core code. It is very easy, but it is never good to change core files from Joomla.
The file is located:
/components/com_content/views/article/tmpl/default.php
when I change the page,in the first page has bottom navbar and in the second page do not has bottom navbar.When I from the second page the first page ,the bottom navbar is show ,but has nothing
<div class="navbar navbar-app navbar-absolute-top" ui-yield-to="headNavigation"
ng-if='headNavigationShow' style="background: #C20404;padding-top:20px;height:65px;">
<div class="btn-group pull-left" ui-yield-to="leftHeadNavigation">
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="centerHeadNavigation">
</div>
<div class="btn-group pull-right" ui-yield-to="rightHeadNavigation">
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom" ui-yield-to="footNavigation"
ng-if='footNavigationShow'>
<div class="btn-group pull-left" ui-yield-to="leftFootNavigation">
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="centerFootNavigation">
</div>
<div class="btn-group pull-right" ui-yield-to="rightFootNavigation">
</div>
</div>
<!-- App Body -->
<div class="app-body">
<div class="app-content" style="margin-top:13px;">
<ng-view></ng-view>
</div>
</div>
this is the first page,it has the bottom navbar and has the menuthis is first page ,back from the second page ,the bottom navbar has nothing
the first page's bottom navbar has nothing ,because of the the bottom navbar has the.
<div ui-content-for="footNavigation" ng-if="$parent.headNavigationShow">
<footnavigation-directive info="{{foot_navigation_position}}"
</footnavigation-directive>
</div>
like this use ng-if to contol the load order.
This code uses and bootstrap 3.
How can I get the span with class="badge" to vertically line up with the left cell content i.e. baseline with the menuItem? (I tried some text alignment for no avail ) Thank you
body {
padding-top: 70px;
}
//---main.html-------------------------------
<head>
<title>Tasks</title>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<header class="container">
<div class="row">
<h1>
<button class="col-xs-2" type="button">☰</button>
<label class="col-xs-8 text-center">Select item</label>
<button class="col-xs-2" type="button">⋮</button>
</h1>
</div>
</header>
</nav>
</header>
<div>
{{> mainMenu}}
</div>
</body>
//---main_menu.html-------------------------------
<template name="mainMenu">
<div class="container">
<div class="row">
<section class="col-xs-12">
<div class="list-group">
{{#each menuItems}}
<a href="#" class="list-group-item">
<img src="/abc.png">
{{menuItem}} <span class="badge">></span>
</a>
{{/each}}
</div>
</section>
</div>
</div>
</template>
If your list-group-items are fixed height the simplest way to handle this is margin css.
.list-item-group > span.badge {
margin-top: 20px;
}
Other vertical align tricks such as line-height don't work on badges because they already have specific styles.
Here is another possible related solution:
Vertically align Bootstrap 3 badge inside heading
Note: Your question does not actually relate to Meteor, you might have better luck getting answers if you remove the meteor templating from your snippet.
I am learning bootstrap. At this time, I'm trying to add a footer to my page. I need my footer to look like this:
+-----------------------------------------------------------------+
| Hello Thank you for visiting [logo] |
+-----------------------------------------------------------------+
Basically, the idea is to have three sections. The content in the first is left aligned. The content in the second is centered. Finally, the content in the third is right aligned. In an attempt to do this, I did the following:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<span class="navbar-brand">Hello</span>
<span class="center-block"><span class="center-text">Thank you for visiting</span></span>
<span class="pull-right"><div class="pull-right">[logo]</div></span>
</nav>
Unfortunately, this does not work. The content does not appear on the same line (its all jagged, I was hoping for it be vertically centered). Also, the "Thank you for visiting" is not centered. It is left justified.
I'm not sure what I"m doing wrong.
I'm not sure why you are using nav but this solution might work for you:
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<p>Hello</p>
</div>
<div class="col-sm-4 text-center">
<p>Thank you for visiting</p>
</div>
<div class="col-sm-4 text-right">
<p>[logo]</p>
</div>
</div>
</div>
Hello use this code this works perfect. Make sure that you add the bootstrap js and css files.
<footer class="navbar navbar-static-bottom navbar-default">
<div class="container" style="width">
<div class="navbar-header">
<div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
Hello
</div>
</div>
<div class="navbar-header">
<div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
Welcome to my website
</div>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-brand">
Logo goes here
</div>
</div>
</div>
</footer>
Enjoy....!