On this website avoirundevis.fr i need to center content like this on this picture : http://www.evernote.com/l/AMM-nvY7omBHtLzs4VFLBhTzw6wkkTS5rjw/
I have trying with this code http://jsfiddle.net/94150148/utxnmr1h/ but i don't know how do this, thanks for help
<div class="row-fluid">
<div class="span6">Fenêtres (PVC, bois, alu)</div>
<div class="span6">Façade (ravalement, enduit,...)</div>
</div>
<div class="row-fluid">
<div class="span6">Construction - Extension</div>
<div class="span6">Sols intérieurs</div>
</div>
Styles baby:
I updated the html/css on your jfiddle: http://jsfiddle.net/utxnmr1h/7/
css:
.container {
text-aling:center;
width:100%;
}
.row-fluid {
width:80%;
margin:auto;
}
html: I added a div outside the ones you provided and named it container.
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>
I am trying to create a "sticky" navigation on my page where a div gets position:fixed; once the user has scrolled to the element. The functionality is working as expected, but the widths of the two columns that are supposed to stick to the top change once the sticky class is added. I tried adding width:100%; to the CSS of the sticky element, but then the element expands beyond the container.
How can I make sure the column widths stay where they should be when position:fixed; is added?
HMTL:
<div class="container">
<div class="padding"></div>
<div class="anchor"></div>
<div class="row sticky">
<div class="col-sm-6">
Testing
</div>
<div class="col-sm-6">
Testing
</div>
</div>
<div class="padding2"></div>
</div>
CSS:
.padding {
height:250px;
}
.padding2 {
height:1000px;
}
.sticky {
background:#000;
height:50px;
line-height:50px;
color:#fff;
font-weight:bold;
}
.sticky.stick {
position:fixed;
top:0;
z-index:10000;
}
JS:
function stickyDiv() {
var top = $(window).scrollTop();
var divTop = $('.anchor').offset().top;
if (top > divTop) {
$('.sticky').addClass('stick');
} else {
$('.sticky').removeClass('stick');
}
}
$(window).scroll(function(){
stickyDiv();
});
stickyDiv();
JSFiddle
Thanks!
Fixed position is relative to body, so it will count the 100% width from body width. If using javascript is ok, you can set the sticky width by getting the container width. Check the Updated Fiddle
You can add a 100% width wrapper around the container and have that stick instead.
<div class="wrap">
<div class="container sticky">
<div class="row">
...
</div>
</div>
</div>
updated fiddle:
https://jsfiddle.net/mileandra/omeegfc7/
add:
width:inherit;
to your .sticky.stick
JSFiddle
like Nanang Mahdaen El-Agun said, a fixed position relates the width to the body. With width:inherit; it will use the width of the .container class
reference: Set width of a "Position: fixed" div relative to parent div
I was able to get it to work by setting your container to "container-fluid" then adding the width: 100%; to your .stick class.
In Bootstrap 4 it's sufficient to add a <div class="sticky-top">...</div> around your row div: https://getbootstrap.com/docs/4.4/utilities/position/
<div class="sticky-top">
<div class="row">
<div class="col-sm-6">
Testing
</div>
<div class="col-sm-6">
Testing
</div>
</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 ;).
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
Im working on my very first website/freelance project. I have some knowledge of html/css ruby rails and bootstrap so far.
I was wondering if you could help me out with something I havn't been able to look up. I have tried to find out how to make certain part of the page take up the entire portion of the browser's window. The site I am working on is 1 long page, with 4 different sections, each of which needs to take the entire browser's view. I was wondering if there was an easy way with bootstrap to do this? Any help is appreciated, thanks so much.
Use the fluid grid (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem) and add 100% width to your container divs, like:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
</style>
html:
<div class="container">
<div class="row-fluid">
<div class="span4" style="background-color:red;">...</div>
<div class="span8" style="background-color:yellow;">...</div>
</div>
</div>
update:
Split in rows of 50% height:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
body, html, .container,.row-fluid .hunderd{ height:100%; min-height:100%; !important;}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
.fifty {height:50%;min-height:50%;}
</style>
html:
<div class="container">
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:red;">...</div>
<div class="span6 hunderd" style="background-color:yellow;">...</div>
</div>
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:blue;">...</div>
<div class="span6 hunderd" style="background-color:orange;">...</div>
</div>
</div>