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
Related
I'm a backend guy and trying to figure out a few details for a project we have that's using Bootstrap 4.
Simply put, we want to create the layout that's executed here:
https://codepen.io/mediumandmessage/pen/xVeXop
(this example and the code below is from the original Bootstrap 3 example I found, not Bootstrap 4)
HTML:
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
However, that example uses Bootstrap 3 and breaks in Bootstrap 4 (the text displays horizontally below the image) and also does not stack the divs responsively.
I've tried screwing around with absolute and relative positioning, etc. it became a lot of code to execute cleanly and make responsive and I was hoping someone out there may have some insight into implementing in pure Bootstrap4...
If anyone out there can share any expertise here, I'd greatly appreciate it!
You could add a transform to your overlay column (you may need to cancel this with a media query for your smaller screens).
Please note in the html below, I have fixed your code to work with boostrap 4 - columns have to be inside a row (they cannot be on a row) and I don't think there is a -xs class any more
.overlay-text {
/* these two are needed - the align self makes the column not stretch the whole height of the image column and the translate moves the column over the image */
align-self: flex-start;
transform: translateX(-20%);
/* the following are for example only */
background-color: #ffffff;
padding:20px;
}
<div class="container somesection">
<div class="row">
<div class="col col-sm-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80" class="w-100">
</div>
<div class="col col-sm-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
</div>
Example bootply
Just add position:relative; to the .overlay-text
You can also adjust the value of bottom
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
position:relative;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
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 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/
Building a portfolio site with TB v3.0.0 and encountered a horizontal scrolling issue that I can't seem to figure out.
Trying to achieve a full bleed for the images on mobile devices so I striped the left/right padding, but horizontal scrolling occurs. Here's the css I added that's causing the problem:
#media (max-width: 767px) {
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
}
Here's the staging site I'm working off of: http://www.kesernio.com/playground/
I wonder if changing the padding helps to set the images 100% in the first place.
The code below will be 100% viewport (green). Also mention your content has a padding. This padding is set on your col-xs-12 (to remove it: set the padding of .col-xs-12 to zero )
In your case remove the padding of your col-- with images.
<div class="container" style="background-color:green;">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
</div>
About your scrollbar, in fact you do this:
<div class="container" style="background-color:green;padding:0">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
add padding:0 this will give you a horizotal scrollbar cause your .row classes have a negative margin of 15px on both sides.
To remove the scrollbar set the margin of the .row to zero to:
<div class="container" style="background-color:green;padding:0">
<div class="row" style="margin:0">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
See also: https://stackoverflow.com/a/19044326/1596547 about the construction of the gutter of the grids