I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me.
I tried these answers for example:
Bootstrap footer not at bottom
Flushing footer to bottom of the page, twitter bootstrap
Height not 100% on Container Fluid even though html and body are
But I still have the problem that when my page content is to "small" and doesn't fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.
This is the code for my footer:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
</div>
</footer>
I'm using Bootstrap 4.1 and Chrome, here's also a codepen to my site:
https://codepen.io/anon/pen/oMZVxq
Note: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly.
You can use built-in bootstrap class to achieve this.
What you need is the container to be a column flex container . class to use are : d-flex flex-column
To set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;
For the footer, a margin-top:auto will do, the class to use is : mt-auto;
example below to run in full page mode
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
Link1
</li>
<li class="nav-item">
Link2
</li>
<li class="nav-item">
Link3
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
Forgot Password?
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>
codepen updated https://codepen.io/anon/pen/PBpgNN
reminder for boostrap classes https://getbootstrap.com/docs/4.5/utilities/flex/ about sizing see https://getbootstrap.com/docs/4.5/utilities/sizing/
If you want a fixed footer, just add the class fixed-bottom to the footer tag like shown below.
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
First add display: flex; and flex-direction: column; to #page-container.
Now you have "set the stage" for aligning the footer to the bottom. Set its margin-top to auto (by adding the class mt-auto) and you are done;
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
See this codepen.
So this helped me - if someone is still looking for an answer:
on your <HTML>, <body> and your container div add a class h-100 and your footer will stay on the bottom.
Important
One thing I did to remove the extra height is that on my container div I changed the h-100 styling to height: calc(100% - 200px) !important; (where -200px was the height of my navigation and footer)
if you are not using the bootstrap, here is the styling .h-100{height:100% !important}
Related
Beneath is some code for a website I am working on.
<div
class="container-fluid px-0">
<!-- row start -->
<div class="row no-gutters align-items-center h-full">
<div class="col-lg-3 offset-lg-2 col-md-8 offset-md-2 col-sm-10 offset-sm-1 sm:px-20 z-2">
<div class="masthead__content">
<div data-split="lines" data-split-page-reveal class="mr-minus-lg md:mr-0">
<h1 class="masthead__title fw-700 text-white js-title">
Title
</h1>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
Subtitle
</p>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow "></span>
</span>
<span class="button-text">Learn More</span>
</button>
</p>
</div>
</div>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 offset-lg-1 z-1">
<div data-parallax="0.7" class="masthead__img overflow-hidden h-100vh ml-minus-sm md:ml-0">
<div data-parallax-target class="bg-image js-lazy js-image" data-bg="img/index/light.jpg"></div>
<div class="masthead__img__cover js-image-cover"></div>
</div>
</div>
</div>
<!-- row end -->
</div>
Currently the div columns are situated as shown in the image beneath:
How can I change my bootstrap columns so that the first div actually overlaps the second (desired output shown in screenshot)
I know a resolution to this can be done purely through bootstrap and would greatly appreciate any help with this. I have tried changing the col-lg-x sizes, however, this only changes the width of the columns. I am also unable to find a solution to this online.
While it’s a little difficult to understand what you’re trying to do without an operational version of your code (as #Grumpy was asking), but if all you need is to have part of your left-side column overlap part of your right-side column, then you can do that by using absolution positioning on the left-side column and offsetting the right-side column.
I setup a quick example using some different column sizes for different widths
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-lg">
<div class="row position-relative vh-100">
<div class="col-9 col-sm-8 col-md-7 position-absolute vh-100" style="background-color: rgba(255, 128, 149, 0.5); z-index: 1;">
<p class="Left-right">Left Text</p>
</div>
<div class="col-4 col-sm-5 col-md-6 offset-8 offset-sm-7 offset-md-6 bg-primary vh-100">
<p class="text-right">Right Text</p>
</div>
</div>
</div>
The left-side background-color is setup with an alpha of 50% so you can see the overlap area.
You didn't say which version of Bootstrap you're using, so I used Bootstrap 4.
I'm designing a side list-group of recent blogs with bootstrap 4 in my angular application but facing some problems when the aspect ratio is changed to mobile view. In some mobile view the images are resizing and getting smaller to fit into the div as the title gets bigger. I want the title to resize and if it's too long, then should break and get into next line but all the image size should remain same. Also I want the image to take the full height of the element. Please look at the image below to have a better understanding.
HTML:
<div class="container">
<div class="row">
<div class="col-12">
<h6 class="text-muted">Recent Blogs</h6>
<ul class="list-group" *ngFor="let blog of blogs">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="image-parent">
<a [routerLink]="['/blog', blog.blogId]">
<img src="http://localhost:4000/{{blog.imagePath}}" class="img-fluid" alt="lay">
</a>
</div>
<a [routerLink]="['/blog', blog.blogId]">
{{blog.title}}
</a>
</li>
</ul>
</div>
</div>
</div>
Change your code like this. It'll help
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<h6 class="text-muted">Recent Blogs</h6>
<ul class="list-group" *ngFor="let blog of blogs">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="row">
<div class="col-md-4">
<div class="image-parent">
<a>
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg" class="img-fluid" alt="lay">
</a>
</div>
</div>
<div class="col-md-8">
<a>
Text Test
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I'm trying to spread the elements across to the corner of the screen. I did try making use of the following code, but it isn't working.
<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
<div class="container">
<small class="text-white">
<div class="d-flex justify-content-between">
<span class="text-white">Copyright © my website 2020</span>
<a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
</div>
</small>
</div>
</div>
</footer>
This is how it is apprearing:
I would like to have the Copyright text and Privacy Policy spread across the edges of the screen
<small> is an inline element so it doesn't span the 100% width... try using a block level element like <div> instead. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
You should also make sure width is set to 100% on this element.
<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
<div class="container">
<div style="width:100%;" class="text-white">
<div class="d-flex justify-content-between">
<span class="text-white">Copyright © my website 2020</span>
<a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
</div>
</div>
</div>
</div>
</footer>
I am a beginner at css or bootstrap.
I want to make a page that shows like below
but it can't work now
This is just for PC show
This is for mobile status but logo has to be in the center of the image.
This is my code
<a href="#" class="open_menu bg-light radius_full">
<i class="fas fa-bars lh-40"></i>
</a>
<div class="col-lg-3 logo" data-aos-duration="600" data-aos="fade-down" data-aos-delay="1200">Startup 3</div>
<i class="fas fa-times"></i>
<div class="navigation_mobile bg-dark type1">
<div class="px-40 pt-60 pb-60 inner">
<div class="logo color-white mb-30">Startup 3</div>
</div>
<div class="socials mt-40">
</div>
<div class="mt-50 f-14 light color-white op-3 copy">© 2018 Designmodo. All rights reserved.</div>
</div>
</div>
<!-- Header 1 -->
<header class="pt-195 pb-110 bg-light header_1">
<!-- Header Menu 1 -->
<nav class="header_menu_1 pt-30 pb-30 mt-30">
<div class="container px-xl-0">
<div class="row justify-content-center align-items-center f-18 medium">
<div class="col-lg-3 logo" data-aos-duration="600" data-aos="fade-down" data-aos-delay="1200">Startup 3</div>
</div>
</nav>
Please help me
Thank you
I solved it.
This is what i was searched.
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
I have a site in which the header image is not displaying correctly in mobile. I'm using bootstrap 4, so the site should be responsive. But when I load my site in mobile browser the header image repeats. I remove the no-repeate in css, but then the image covers half of the div, the other half is blank. The header works just fine in laptop, and desktop. is just mobile I'm having problem displaying.
here's the site JV Computers
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>JV Computer Service</title>
<meta name="description" content="JV Computer Service main page">
<meta name="keywords" content="Desktop Support, Computer Repair, Virus Removal, Data Recovery, Server Administration, Printer Repair, Network Installation, Wireless, Website Development">
<meta name="author" content="JV Computer Servic"e>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="wireframe.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container"> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar13">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar13"> <a class="navbar-brand d-none d-md-block" href="#">
<img class="head-logo" src="../../work/graphics/logo.png" width="30" height="30" class="d-inline-block align-top" alt="" >
<b><span class="title"> JV Computer Service</span> (305) 680 4659</b>
</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="support.html">Support</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#contact">Contact</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="https://twitter.com/geoVT25" target="_blank">
<i class="fa fa-twitter fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/pctechtips25" target="_blank">
<i class="fa fa-facebook fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.youtube.com/channel/UCOH7oeWBE2pgcFPFmj7lCqw" target="_blank">
<i class="fa fa-fw fa-youtube"></i>
</a> </li>
</ul>
</div>
</div>
</nav>
<div class="text-center py-5 head-section" >
<div class="container">
<div class="row my-5 justify-content-center">
<div class="col-md-9">
<h1><strong>Simplified IT Solutions</strong></h1>
<h2 class="bg-warning">Technology solutions for small business and homes</h2>
learn more
get support
</div>
</div>
</div>
</div>
<div class="py-4 bg-light" id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead text-center">Bellow you can see a brief description of our services and price. These fall into three main category: Desktop Support, System Maintanance, and Network Installation. If you would like to know more details, go to the Service page.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 p-3">
<div class="card box-shadow rounded border border-secondary" >
<img class="card-img-top" src="assets/styleguide/thinkstockphotos-479282847.jpg">
<div class="card-body">
<h3 class="text-center">Desktop Support</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 contenteditable="true">60 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1506399309177-3b43e99fead2.jpg">
<div class="card-body">
<h3 class="text-center">System Administration</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 style="">100 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1544197150-b99a580bb7a8.jpg">
<div class="card-body">
<h3 class="text-center">Network Installation</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5>150 $ 1hr</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mb-3">About Us</h1>
<p>JV Computer Service is a small Computer Repair and IT Solution company. It's own and operated by its owner who has over 20 years experience in the computer and IT field. He acquired most of his experience working for the school district and managing and supporting multiple schools with over 500 computers. During that time he was responsible for providing user support, and system administration.<br>He was responsible for the management and completion of several projects. One project, involved the installation of more than 100 computers in a new student building. This project included physical installation of PC's, cabling, and rolling out the operating system and different application. </p>
</div>
</div>
</div>
</div>
<div class="py-5 bg-dark" id="contact">
<div class="container">
<div class="row">
<div class="mx-auto text-center col-lg-8">
<h1 class="mb-3">Contact Us</h1>
<p class="lead mb-4">If you experiencing any computer issues, lets us assist you. Fill the form bellow with a description and phone</p>
</div>
</div>
<div class="row">
<div class="p-0 order-2 order-md-1 col-lg-6"> <iframe width="100%" height="350" src="https://maps.google.com/maps?hl=en&q=New%20York&ie=UTF8&t=&z=14&iwloc=B&output=embed" scrolling="no" frameborder="0"></iframe> </div>
<div class="px-4 order-1 order-md-2 col-lg-6">
<h2 class="mb-4">Create a ticket</h2>
<form>
<div class="form-group"> <input type="text" class="form-control" id="form44" placeholder="Name"> </div>
<div class="form-group"> <input type="email" class="form-control" id="form45" placeholder="Email"> </div>
<div class="form-group"> <textarea class="form-control" id="form46" rows="3" placeholder="Your message"></textarea> </div> <button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>
<footer class="py-5 bg-secondary text-dark">
<div class="container">
<p class="float-right text-dark">
Back to top
</p>
<p>JV Computer Service website was designed with Pingendo and Bootstrap<br>All rights reserved JV Computer Service LLT</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS code
.head-logo {
background-image: url(assets/styleguide/logo.png);
background-position: top left;
background-size: 100%;
background-repeat: repeat;"
}
.title {
color:#f9b751;
}
.head-section {
background-image: url(assets/styleguide/jonathan-SwVkmowt7qA-unsplash.jpg);
background-position: left top;
background-size: 100%;
background-repeat: repeat;
}
.card {
border-style: solid;
}
.card-img-top {
background-position: top left;
background-size: 100%;
background-repeat: no-repeat;
}
this should do it: background-size: cover;