The footer is not fixed at the bottom when the contents of the page are less than the window height. Below is the screenshot..
contents more than window size:
contents less than window height:
HTML :
<footer class="page-footer text-center font-small mt-4 wow fadeIn">
<div class="pt-4">
<a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank"
role="button">Download MDB
<i class="fas fa-download ml-2"></i>
</a>
<a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start
free tutorial
<i class="fas fa-shopping-cart ml-2"></i>
</a>
</div>
<!--/.Call to action-->
<hr class="my-4">
<div class="footer-copyright py-3">
© 2019 Copyright:
MDBootstrap.com
</div>
<!--/.Copyright-->
</footer>
CSS:
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
strong text
just add fixed-bottom in footer class
footer class="page-footer text-center font-small mt-4 wow fadeIn fixed-bottom"
Hope this solves your problem
This solved my issue. Now footer is fixed at the bottom regardless of the content and window size.
<footer style="position: fixed; bottom: 0; width: 100%;" class="page-footer text-center font-small mt-4 wow fadeIn ">
Related
I'ma having trouble making the footer stick to the bottom. I don't want to make it fixed, I want it to stay at the bottom and not move when I scroll.
I found a solutions with bootstap but that messes up the order of the items on the page. I want the entire page to stay the way it is, just keep the footer at the bottom of the screen.
What I'm I doing wrong?
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
footer {
background-color: #f4e6f5;
height: 5rem;
width: 100%;
}
<body>
<nav class="navigationBar">
<img class="logoImg" src="photos/logo.png" alt="logo">
<h1 class="col-md-9">Japan Store</h1>
<div class="mediaIcons col-md-1">
<i class="fa-brands fa-facebook-square btn--facebook"></i>
<i class="fa-brands fa-instagram-square btn--instagram"></i>
<i class="fa-brands fa-twitter-square btn--twitter"></i>
</div>
</nav>
<nav class="filterContainer m-5 p-5 float-left d-flex flex-column shadow col-md-2 col-9">
<h2 class="pb-4">Filtrar Items</h6>
<div>
<input type="checkbox" id="todo" name="Todo" value="Todo">
<label for="todo">Todo</label>
</div>
<div>
<input type="checkbox" id="bebidas" name="bebidas" value="Bebidas">
<label for="bebidas">Bebidas</label>
</div>
<div>
<input type="checkbox" id="snacks" name="snacks" value="Snack">
<label for="snacks">Snacks</label>
</div>
<div>
<input type="checkbox" id="golosinas" name="golosinas" value="Golosinas">
<label for="golosinas">Golosinas</label>
</div>
<button type="button" class="filterButton btn btn-outline-dark mt-5">Filtrar</button>
</nav>
<div class="itemsContainer float-right col-md-9">
<div class="row">
<! -- The next code repeats 15 times (store items) -->
<div class="itemBox p-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="photos/Befco Kuriyama Bakauke Rice Crackers Hokkaido Corn.jpg" alt="..."/>
<div class="card-body p-4">
<div class="text-center">
<h5>Befco Kuriyama Bakauke Rice Crackers</h5>
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
</div>
<span class="text-muted text-decoration-line-through"></span>
$18.00
</div>
</div>
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Agregar al carrito</a></div>
</div>
</div>
</div>
</div>
</div>
<div>
<footer class="col-md-12">
<p>This is my footer</p>
</footer>
</div>
</body>
without using position fixed you could use position absolute on the footer and relative on the body
body {
margin: 0;
padding: 0;
overflow-x: hidden;
position: relative; /*new
height: 100vh /*new
footer {
background-color: #f4e6f5;
height: 5rem;
width: 100%;
position: absolute; /*new
bottom: 0; /*new
I added a section to wrap the body content just for simplicity. And added some CSS to make the footer stick to bottom without scrolling or overlapping the content.
body {
margin: 0;
padding: 0;
height: calc(100vh - 100px); /*new*/
}
section {
overflow-x: hidden; /*new*/
height: calc(100vh - 100px); /*new*/
}
footer {
background-color: rgba(255,0,0,0.05);
height: 100px;
width: 100%;
position: fixed; /*new*/
bottom: 0; /*new*/
overflow: hidden; /*new*/
}
<body>
<section>
...content...
</section>
I hope it helps!
I have a modal with fixed size. It contains multiple panes selectable with nav buttons. On one of the panes I have a div containing a grid of thumbnail images and a button at the bottom. Currently the images and the button extend far past the bottom of the modal window. I would like the button to remain at the bottom of the pane, and the remaining height of the pane be occupied with the thumbnail div.row, wherein if the image content does not fit inside of the div.row, the content scrolls.
My attempt at this was to make the pane flex-column, and make the div.row overflow-auto, but it has no effect it seems.
HTML
<div class="modal modal-base">
<div class="modal-overlay"></div>
<div class="modal-window">
<div class="close">×</div>
<div class="modal-content">
<div class="nav-wrapper">
<ul class="nav nav-pills flex-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
</li>
<li class="nav-item">
<a class="nav-link mb-3" href="#" role="tab">Upload</a>
</li>
</ul>
</div>
<div class="card shadow mb-0">
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active d-flex flex-column" role="tabpanel">
<div class="row overflow-auto">
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
</div>
<button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
</div>
<div class="tab-pane fade" role="tabpanel">
<div class="upload-widget"></div>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS (scss)
.modal {
&.modal-base {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-overlay {
position: absolute;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
&-window {
background: #fff;
border-radius: 4px;
margin: auto;
position: relative;
width: 400px;
height: 300px;
z-index: 2001;
.close {
position: absolute;
right: 2px;
top: 2px;
color: gray;
font-size: 25px;
z-index: 2002;
}
}
&-content {
width: 100%;
height: 100%;
padding: 20px;
}
}
Codepen
Using Bootstrap 4 CSS framework. The JS code for the pane switching has been omitted since it is superfluous. I would like a solution that does not require me to fix the height of the div containing the images.
Note: this is a continuation of the question asked here. In that question I had simplified my setup to make everyone's life easier, and was able to get a working solution for that simplified setup, but it does not seem to work when translated over the actual setup I have, hence this question.
Thank you for looking at my question!
Just provide your div containing the card class with appropriate overflow property like this:
<div class="card shadow mb-0" style="overflow-x: hidden; overflow-y: scroll;">
You should include an overflow:auto; or do the css code at your containing element
containing element {
content:"";
display:table;
clear:both;
}
I solved this issue (with help from an online friend) over the course of a few hours, allow me to share the insight gained.
Essentially, flex is the way to go here. We need flex in the pane to keep the button on the bottom while the images take up the remaining space with scrolling overflow. We should also make enclosing divs have a height of 100% (.tab-content, .card-body).
When we get to the .card itself is where things get tricky. We want it to fill the parent, but applying h-100 here is not acceptable since it has a sibling, its height shouldn't be 100% of the parent content area, but rather 100% - height of the .nav-wrapper. It's close to what we want, but not quite.
Seems like we need another flex here to allow the .card to grow just into the remaining space, but if you set the flex here, it is not respected and the card extends way outside of the modal. The secret sauce is that by default, the .card with .d-flex is getting min-height:auto, and what this means is that it will not shrink smaller than the size of its content. Setting min-height:0 on the div.card solves the problem. Since I do not see any Bootstrap utility to do this, I've added one myself globally for this purpose to use in the future as well.
.d-flex > .flex-shrink-content {
min-height: 0;
}
The full code / demo can be found here for those interested:
Codepen
<div class="modal modal-base">
<div class="modal-overlay"></div>
<div class="modal-window">
<div class="close">×</div>
<div class="modal-content d-flex flex-column">
<div class="nav-wrapper flex-grow-1">
<ul class="nav nav-pills flex-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
</li>
<li class="nav-item">
<a class="nav-link mb-3" href="#" role="tab">Upload</a>
</li>
</ul>
</div>
<div class="card flex-shrink-content shadow">
<div class="card-body h-100">
<div class="tab-content h-100">
<div class="tab-pane fade show active d-flex flex-column h-100" role="tabpanel">
<div class="row flex-grow-1 overflow-auto">
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
</div>
<button type="button" class="btn btn-primary w-100 btn-lg mt-2">Insert</button>
</div>
<div class="tab-pane fade h-100" role="tabpanel">
<div class="upload-widget"></div>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.modal {
&.modal-base {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-overlay {
position: absolute;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
&-window {
background: #fff;
border-radius: 4px;
margin: auto;
position: relative;
width: 400px;
height: 300px;
z-index: 2001;
.close {
position: absolute;
right: 2px;
top: 2px;
color: gray;
font-size: 25px;
z-index: 2002;
}
}
&-content {
width: 100%;
height: 100%;
padding: 20px;
}
}
.d-flex > .flex-shrink-content {
min-height: 0;
}
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
My navbar is getting on top of my sidebar. What I needed was that the side bar "was over" the navbar, so that when the side bar colpasse, the nav bar would be visible.
As the sidebar will collapse, the navbar will need to appear when this happens. To the way it is, it looks like the sidebar gets cut, and ends up losing a space in the sidebar
Side bar/ nav bar image:
<nav class="navbar navbar-light fixed-top flex-md-nowrap p-0 shadow">
<a class="navbar-brand " href="#"> </a>
<img src="~/Content/img/Principal_h_cor_RGB.png" alt="Logo" style="width:150px;">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
</li>
</ul>
</nav>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand text-center">
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header text-center">
<h6 style="text-align:center">
<img src="~/Content/img/boat_block2.png " alt="Logo" style="width:70px;" />
</h6>
<div class="user-info">
<span class="user-name">
<strong>#Html.Partial("_LoginPartial")</strong>
</span>
<!-- <span class="user-role">Administrator</span> -->
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>
</div>
</div>
</div>
</div>
</div>
</nav>
<script>
.sidebar-wrapper {
width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: -300px;
z-index: 999;
padding-top: 45px;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper a {
text-decoration: none;
}
Just change the Z-Index of the fixed-top to 10
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
}
codepen below
https://codepen.io/nightcoder21/pen/BxwVdJ
HTML below
<section id="footer">
<div class="container mb-1">
<div class="row text-center text-xs-center text-sm-left text-md-left mb-2">
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5">
<ul class="list-unstyled list-inline social text-center">
<li class="list-inline-item"><i class="fab fa-facebook"></i></li>
<li class="list-inline-item"><i class="fas fa-mobile-alt"></i></li>
<li class="list-inline-item"><i class="fas fa-envelope"></i></li>
</ul>
</div>
</hr>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
<p>PC Handyman NZ - Small business / Home office IT solutions</p>
<p class="h6">© All right Reversed.<a class="text-green ml-2" href="https://www.sunlimetech.com" target="_blank">PC Handyman 2018</a></p>
</div>
</hr>
</div>
</div>
</section>
I cant seem to get the 3 social icons in my footer to stay in proportion when resizing down to mobile size, I have got them looking perfect in all big size,
it looks distorted as per my picture
how do i get them to line up?
Thanks
I think you should have a look at flexbox. There is a really nice tutorial here
I've made a snippet that solves your problem:
footer{
position: absolute;
bottom: 0;
left: 0;
background-color: rgb(250, 75, 83);
width: 100%;
}
footer #icons{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
footer #icons i{
font-size: 60px;
font-style: normal;
color: rgba(0,0,0,0.4);
margin: 10px 30px;
}
#media (max-width: 520px){
footer #icons{
flex-direction: column;
}
}
<footer>
<div id="icons">
<i>☼</i>
<i>☂</i>
<i>☃</i>
</div>
</footer>
cheers!
In this case, you can use media queries to handle style for smaller screen
#media only screen and (max-width: 600px) {
#footer ul.social li{
padding: 3px 1rem;
}
}