Using flexbox sticky footer with bootstrap
You need to give the flexbox item a width
of 100%
.
In this case, that would be that .content
element:
Updated Example
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
@media only screen and (max-width: 768px) {
.content {
width: 100%;
}
}
How to make the footer stick to the bottom of the page and centered in Bootstrap?
The simple way is to use flexbox on the BODY or some wrapper element. Then use mt-auto
to push the footer to the bottom of the page.
<body class="d-flex flex-column min-vh-100">
<div class="container">Other page content..</div>
<div class="footer mt-auto text-center">
<span id="bottom">
<hr>
<p>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
</p>
</span>
</div>
</body>
https://codeply.com/p/prWsoALtSD
Also see: Bootstrap 4 Sticky Footer Not Sticking
Sticky footer with flexbox
Yes, this is a normal set-up. That's what justify-content: space-between
is supposed to do: Pin the first and last elements to the edges of the container.
main { display: flex; flex-direction: column; justify-content: space-between; height: 100vh;}
article { background-color: lightgreen; }footer { background-color: orangered; }body { margin: 0; }
<main> <article>inner div</article> <footer>footer</footer></main>
Footer not sticky to bottom bootstrap 5.2.2
From the example where you got the code for the sticky footer, there is an external css
file where the footer gets it's stickyness from. I have copied it and I will paste here(Inline CSS)
Change your blade code to this:
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="utf-8" />
<meta name="description" content="Website name" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
<link href="{{ asset('/css/offcanvas.css') }}" rel="stylesheet"/>
<script src="{{ mix('/js/app.js') }}" defer></script>
<style>
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
@inertia
</body>
</html>
How to create a sticky footer that plays well with Bootstrap 3
The answer, as Schmalzy points out, can be found here in the examples section of the getbootstrap site.
But that example does not include a top nav. For fixed top nav with sticky footer, see this plnkr, or code below.
Style CSS:
/* Styles go here */
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
Index.html:
<!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.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</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">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Implementing Bootstrap 4 Sticky Footer with nav links AND copyright message
The Bootstrap 4 sticky footer example is simple text with a single line, so having line-height
the same as height
(60px) works fine.
Your footer has multiple "lines" so setting line-height:60px
is going to double the rendered height of the footer. I'd recommend removing the line-height (as it's used for centering in the example) and set the appropriate fixed height for your content (~ 80px). The 80px is approx. according the vertical spacing you want.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 80px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px; /* Set the fixed height of the footer here */
background-color: #f5f5f5;
}
https://www.codeply.com/go/IUPGbdWmF1 (no line-height)
IMO, in Bootstrap 4, the sticky footer is much easier to implement with flexbox since the CSS is minimal and doesn't require setting fixed heights.
<body class="d-flex flex-column">
<nav></nav>
<div class="container flex-grow-1"></div>
<footer></footer>
</body>
https://www.codeply.com/go/g8PBpRKaPC (flexbox)
Related: Bootstrap 4 - Sticky footer - Dynamic footer height
Flexbox: scrollable content with sticky footer
Use overflow-y: auto;
.
Read this: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
body { margin: 120px;}
.flex-container { display: flex; width: 200px; height: 200px; border: 1px solid black; justify-content: center;}
.flex-item { box-sizing: border-box; width: 150px; border: 5px solid blue; align-self: center; background-color: red; display: flex; flex-flow: column; max-height: 100%;}
.content { background-color: grey; flex: 1; overflow-y: auto;}
<div class="flex-container"> <div class="flex-item"> <header>Header</header> <div class="content"> A <br>B <br>C <br>D <br>E <br>F <br>G <br>H <br>I <br>J <br>K <br>L </div> <footer>Footer</footer> </div></div>
Related Topics
Why Are My Google Web Fonts Pixelated
How to Style Ng-Bootstrap - Alternative to /Deep/
Refinerycms 2.1.0 and Zurb 4 Top Menu with Dropdown Navigation
CSS Form Checkbox Styling with Checked and After Tags
Multi Line Dotted or Dashed Text-Underline
Mysterious Horizontal Lines on My Site When Rendered on Ipad
How to Make Bootstrap Icon Display Inline with Text in a Tag
HTML5Shiv - Why Is It Only for Ie
CSS Selector Wildcard Inside Class Name
Why Am I Unable to Apply a Border to an Angular Mat-Table Row
Pixel Border and Percentage Width in Proportion
Force Last Div on a New Line with Flexbox
How to Have Both CSS and SCSS in Angular
Is It Wise to Use Fractional/Decimal Pixels for Borders in CSS
Center Wrapped Items in a Space-Between Flexbox
What Fonts Are Included (I.E. Installed by Default) with Which Operating Systems