I am building an app that uses Bootstrap. I want this app to have a footer. The footer needs to "stick" to the bottom. In other words, if the content is larger than the height of the screen, the footer should still be visible, the content goes under it. If the content takes less than the height of the screen, I still need the footer to stick tothe bottom. I tried using the sticky footer. However, that doesn't work. Currently, I am trying the following:
Here's My Plunker
My HTML looks like this:
<div class="footer">
<div class="container text-center">
<button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
<button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
</div>
</div>
How do I build a footer that permanently sticks to the bottom? I'm basically trying to build an "action bar" that is visible only when the site runs on a phone.
Thank you for your help.
use the following code
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed;
width: 100%;
}
you should change the footer position :
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed; /*change it*/
width: 100%;
}
Bootstrap comes with its nav elements ready to roll as a footer.
Simply create your element and add these classed navbar navbar-default navbar-fixed-bottom.
<footer>
<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<div class="container">
<p>this is your footer that sticks to the bottom</p>
</div>
</div>
</footer>
You can then expand on this by splitting the containing div into blocks with something like
<div class="row">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
the above would go inside the container div
as shown here http://jsfiddle.net/showcaseimagery/5y14pqgv/
Related
In my angular 7 application, we are using bootstrap 4 for our styling. When this modal opens, the text inside of it spills outside of the box, how can I modify the css so that the content is responsive and stays within the modal?
I am debugging someone else's code, so it is difficult for me to figure out exactly how they've set this up.
Here is the modal element that they are using, it is actually set up as an aside element:
<aside class="modal fade model-demographic" tabindex="-1" id="name-information" role="dialog" aria-labelledby="System Warning" aria-hidden="true">
<div class="demographic-name-dob modal-dialog modal-dialog-centered modal-lg blue" role="document">
<div class="modal-content modal-info-content">
<div class="modal-header model-info-header">
<h5 class="modal-title"><b>Name</b></h5>
</div>
<div class="modal-body d-flex justify-content">
<div class="row">
<h4 class="col-12">To make any changes to your first name, middle initial or last name, please contact us.</h4>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-modal" aria-label="cancel">Close</button>
</div>
</div>
</div>
</aside>
From some debugging, I believe this is the css class they are using that is causing the problem:
.modal-info-content {
width: 55%;
height: 35%;
margin: 0px auto;
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
}
I'm assuming it has to do with position: fixed but am not sure how to change this so that it is responsive in mobile view.
I would start by removing the unnecessary code. This should eliminate the unexpected behavior.
.d-flex and .justify-content are unnecessary at this point. If they're required, I would recommend applying them to a child element of the .modal-body, below your h4 header.
Also, inside the .modal-body you can remove the div.row around the h4 and and remove the .col-12 class. These are both unnecessary because h4 tag already spans the entire row.
Your .modal-body node would then look like:
<div class="modal-body">
<h4>
To make any changes to your first name, middle initial or last name, please contact us.
</h4>
<div class="d-flex justify-content">
...
</div>
</div>
Using Bootstrap4 to create a two column layout, the left column should scroll (currently it's not) and the right column should not scroll (currently it does as shown by the scroll bar in the image). The map should always be the height of the window (referred to as the "viewport" in Bootstrap, I think). FYI, the contents of the left column grows with time as the server pushes more hosts into it:
HTML:
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">list of hosts (should scroll)</div>
<div class="col-md-10" id="map">google map (should NOT scroll)</div>
</div>
</div>
</div>
CSS:
.col-md-2 {
border-right: 1px solid black;
min-height: 100vh;
overflow-y: scroll;
padding: 0;
}
Thanks
Here's an example that uses a fixed sidebar: https://jsfiddle.net/Lbn21js8/1/
I added an id selector to the sidebar, and a background color:
<div id="app">
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-md-2 bg-light ">list of hosts (should scroll)</div>
<div class="col-md-10 ml-auto" id="map">google map (should NOT scroll)</div>
</div>
</div>
</div>
With this CSS:
#sidebar {
border-right: 1px solid black;
overflow-y: scroll;
padding: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
The linked jsFiddle appends a new paragraph to the sidebar every 1.5 seconds, so if you wait long enough you'll see the sidebar's scrollbar become active/scrollable.
With this, as long as you constrain the map section to never be bigger than the viewport, you won't see a scrollbar for the page.
I used this CSS and it worked for me:
CSS:
#map {
margin-left:20%;
position:fixed;
}
This will allow the left column col-md-2 to be scrollable and prevent the right column col-md-10 from scrolling. By adding margin-left:20%;, the right column won't overlap the content on the left.
Am I missing something on this? I feel like I have looked through their site documentation a handful of times and have not found anything on footers.
I am just looking to have a regular inverse color footer that will stick to the very bottom of the screen even if there is nothing to keep it there. When there is content that is longer than the screen's height it will push it down to the bottom still.
Right now I have this:
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<span>testing</span>
</div>
</div>
</div>
but every time the screen resolution goes under 980px the footer jumps to the very top of the screen. I haven't worked with bootstrap very much and this seems like something that they should have accounted for and that I am probably missing something critical here. Would anyone be able to explain the reasoning for this?
You can achieve the sticky footer in Bootstrap 3 with this:
CSS
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;
background-color: #f5f5f5;
}
HTML
<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 the sticky footer with a fixed navbar if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
DEMO HERE
This works for me in Bootstrap 3.3.1
<div class="container">
[...]
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">my footer</p>
</div>
</footer>
make sure the footer tag is outside the container div
you need the sticky-footer.css too which is here
Edit:
To do what you're asking in the comments, have you tried this?:
<footer class="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<span>testing</span>
</div>
</div>
</div>
</footer>
Also you need to tweak the css class for .footer:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
background-color: #f5f5f5;
}
I am using Bootstrap 3, and have a problem getting a div to sit over a jumbotron header.
I am using the jumbotron class to give me a full width, responsive header with a background image as below...
<div class="container-fluid">
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8">text here</div>
<div class="col-md-4">text here</div>
</div>
</div>
</div>
Here is the rest of the site...
<div class="container">rest of site goes here
</div>
What I want to do is have my entire site/container BELOW the jumbotron - slide up and cover half of it's height. Obviously as is, the container for the site content is cleared below the jumbotron, but i need a solution to get it up about 100px to cover the lower half of jumbotron.
I have tried both z-index methods and absolute positioning but can't get either to work. Any suggestions?
A SAMPLE TO WORK WITH HERE - http://jsfiddle.net/9b9Da/7/
As stated in comments, Bootstrap 3 doesn't have a .container-fluid class, which was removed in Bootstrap 2.3.2 as .rows are full width by default (Mobile first approach). position: relative was then used to offset your overlying content <div> to appear half way over the .jumbotron
<div class="jumbotron">
<div class="col-md-8 jumbotext">text here</div>
<div class="col-md-4 jumbotext">text here</div>
</div>
<div class="container" id="content">
<div class="row">
This content needs to float over the Jumbotron above
</div>
</div>
<style>
#content {
position: relative;
bottom: 80px;
z-index: 500;
opacity: 0.6;
}
#content > .row {
min-height: 400px;
background: #cccccc;
}
.jumbotron > .jumbotext {
z-index: 700;
}
</style>
Fiddle: http://jsfiddle.net/9b9Da/9/
I'm using bootstrap 3 and it has .container-fluid. It's also listed in the bootstrap docs and on the W3.
Bootstrap classes
Ok so if you do:
<div class="row-fluid">
<div class="span6"></div><!--span6 END-->
<div class="span6"></div><!--span6 END-->
</div><!--row END-->
picture that as 2 red boxes both taking 50% of the screen.. but every time I do this the span6 has a margin our in between each other and the row above it... How do I make it so that there is no margin above or in between the spans .. I want them to touch above and to the sides.
As you probably don't want to override all .span6 elements, I'd suggest the following:
<div class="row-fluid">
<div class="span6" style="margin: 0px; background-color: red; width: 50%;">foo</div><!--span6 END-->
<div class="span6" style="margin: 0px; background-color: blue; width: 50%;">bar</div><!--span6 END-->
</div><!--row END-->
JSFiddle
EDIT:
As .row-fluid uses width: 100% and .row-fluid .span6 uses width: 48.93617021276595%;, you also need to change width of those divs. See updated code and fiddle.
I would recommend not using grid spans if you don't need grid spans rather than overriding. If you're overriding practically every property of a class, you're better off just using a new class.
.half {
margin: 0;
background-color: red;
width: 50%;
float:left;
}
<div class="row-fluid">
<div class="span12">
<div class="half">First</div>
<div class="half">Second</div>
</div>
</div>
http://jsfiddle.net/cGCHa/4/