I'd like to create single row with two overlapping columns like that:
.row
.col-sm-7
.col-sm-6
so that 6th column of the grid is overlapped.
It's partially possible with a .col-sm-pull-1:
.row
.col-sm-6
.col-sm-6.col-sm-pull-1
but the 12th column becomes empty. I tried:
.row
.col-sm-6
.col-sm-7.col-sm-pull-1
but the second column moves to the next row.
I found the answer for Bootstrap 2 (How to overlap columns using twitter bootstrap?). Is it possible with the Bootstrap 3?
After seeing your image example, I think perhaps this is what you are looking for. (I made them overlap 2 columns because that will center it better)
.blue{
background-color: rgba(0,0,255,0.5);;
}
.row .red{
background-color: rgba(255,0,0,0.5);
position: absolute;
}
.red, .blue {
height: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="red col-xs-7"></div>
<div class="blue col-xs-7 col-xs-push-5"></div>
</div>
</div>
Fiddle If you want to overlap the two columns in one row, you'll need negative margins. The bootstrap gutters/margins are layed out using positive and negative margins. I would recommend ids for the columns and then you can use z-index if you want one over the other one.
So change right margin on first and left margin on the second.
margin-right: -5%;
margin-left: -5%;
How the grid works is a great reference for how its built.
You need to place the new column under the same div as the one you want to overlap.
Here is an example
<style>
.first {
background-color: #dedef8;
border: solid black 1px;
}
.second {
background-color: #dedef8;
border: solid black 1px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7 first">
<p>This is the first column</p>
<div class="col-xs-6 second">
<p>This is the second </p>
</div>
</div>
</div>
</div>
</body>
Here's a jfiddle example: http://jsfiddle.net/NachoSupreme/o0fs78fv/
Related
I am using Zurb Foundation 6. I have a row with 2 columns, as such:
<div class="row">
<div class="columns medium-4 left-col">
Left column.
</div>
<div class="columns medium-8 right-col">
Right column. Needs to reach far right hand side of screen.
</div>
</div>
Naturally, Foundation .rows have a max-width of 75rem, meaning there will be margins either side if the screen is larger than 75rem. That's fine, I want to leave that. However, I want the right side column to extend all the way to the right, passed that 75rem width.
In other words, I want to try and have the left column behave like its within a max-width: 75rem; wrapping row, but the right column to behave like it's in a max-width: 100%; wrapping row.
See here for more info: https://jsfiddle.net/u4x5owc0/11/
Is there a way I can achieve this (with Foundation)?
I've tried making the right column position: absolute; width: 100%; but that just covers the left side as well.
Would anyone know if this is possible and if theres a way to do this?
I don't think foundation has this feature but using position: absolute; right: 0; on the right column worked for me.
Updated fiddle
You should use .right-col{position: absolute; right: 0;}. But it won't support for small devices. You should use #media query for responsive. Please check DEMO it's working fine with responsive.
.left-col, .right-col {
height: 40vh;
color: white;
margin-bottom: 20px;
}
.left-col {
background: green;
}
.right-col {
background: red;
}
#media(min-width:640px){
.right-col{
position: absolute;
right: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="columns medium-4 left-col">
</div>
<div class="columns medium-8 right-col">
Needs to reach far right hand side of screen. ==>
</div>
</div>
<div class="row expanded">
<div class="columns medium-4 left-col">
Needs to remain the same width as above.
</div>
<div class="columns medium-8 right-col">
</div>
</div>
I have a 2 row layout, with 1 column in the first row, and three columns in the second row. The text is aligned left in the one column, and the three columns in the second row are all center aligned like so:
What I want to do is to somehow align the text in the one column with the left edge of the first item in the 3 column layout, but I'm not sure if this is possible? (at least not without using js). Is there a simple way to do this using the bootstrap classes?
You can put the top text inside the same container as 'Centered 1', and then move it up using position:absolute. See fiddle: https://jsfiddle.net/avgh4x67/.
HTML:
<div id='above'></div>
<div class='container'>
<div class='row'>
<div class='col-sm-4'>
<div>
Centered 1
<div id='centered-1-aligned'>aligned</div>
</div>
</div>
<div class='col-sm-4'>
<div>Centered 2</div>
</div>
<div class='col-sm-4'>
<div>Centered 3</div>
</div>
</div>
</div>
CSS:
#above {height: 80px; border: solid 3px red; margin-bottom: 10px;}
.col-sm-4 {text-align:center; border: solid 3px red; }
.col-sm-4 > div {display:inline-block;}
#centered-1-aligned {text-align: left; position: absolute; top: -80px;}
I have a row in Bootstrap 3 and 3 columns in that row. I want to align two of the columns to the bottom of the row and keep the first column at the top. When I use the traditional approach with position relative in the parent and absolute for both columns I get a weird behavior which I imagine is because of something in twitter bootstrap. Here's a bootply of what's happening:
http://www.bootply.com/125735
The absolute forces all the columns on top of eachother, can anyone help me out? The end result is to have something like so:
http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/
Thanks
You can use display: table-cell and vertical-align: bottom, on the 2 columns that you want to be aligned bottom, like so:
.bottom-column
{
float: none;
display: table-cell;
vertical-align: bottom;
}
Working example here.
Also, this might be a possible duplicate question.
Vertical align bottom and remove the float seems to work. I then had a margin issue, but the -2px keeps them from getting pushed down (and they still don't overlap)
.profile-header > div {
display: inline-block;
vertical-align: bottom;
float: none;
margin: -2px;
}
.profile-header {
margin-bottom:20px;
border:2px solid green;
display: table-cell;
}
.profile-pic {
height:300px;
border:2px solid red;
}
.profile-about {
border:2px solid blue;
}
.profile-about2 {
border:2px solid pink;
}
Example here: http://www.bootply.com/125740#
When working with bootsrap usually face three main problems:
How to place the content of the column to the bottom?
How to create a multi-row gallery of columns of equal height in one .row?
How to center columns horizontally if their total width is less than 12 and the remaining width is odd?
To solve first two problems download this small plugin https://github.com/codekipple/conformity
The third problem is solved here http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns
Common code
<style>
[class*=col-] {position: relative}
.row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
.row-centered {text-align:center}
.row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top}
</style>
<script src="assets/conformity/conformity.js"></script>
<script>
$(document).ready(function () {
$('.row-conformity > [class*=col-]').conformity();
$(window).on('resize', function() {
$('.row-conformity > [class*=col-]').conformity();
});
});
</script>
1. Aligning content of the column to the bottom
<div class="row row-conformity">
<div class="col-sm-3">
I<br>create<br>highest<br>column
</div>
<div class="col-sm-3">
<div class="to-bottom">
I am on the bottom
</div>
</div>
</div>
2. Gallery of columns of equal height
<div class="row row-conformity">
<div class="col-sm-4">We all have equal height</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
3. Horizontal alignment of columns to the center (less than 12 col units)
<div class="row row-centered">
<div class="col-sm-3">...</div>
<div class="col-sm-4">...</div>
</div>
All classes can work together
<div class="row row-conformity row-centered">
...
</div>
I don't know why but for me the solution proposed by Marius Stanescu is breaking the specificity of col (a col-md-3 followed by a col-md-4 will take all of the twelve row)
I found another working solution :
.bottom-column
{
display: inline-block;
vertical-align: middle;
float: none;
}
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/
Can someone please help me with this problem as i have been dealing with it for a long time now....
I am trying to get 3 divs on the same line next to each other one of the divs looks like this:
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center">
<font size="+1">
<em class="heading_description">15 pence per slot</em>
</font>
<img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">
<a href="gfh" class="order-small">
<span>order</span></a>
</div>
and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left
I'm surprised that nobody gave CSS table layout as a solution:
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
Works in IE8+
Check out a JSFiddle Demo
See my code
.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>
I'm not sure how I ended up on this post but since most of the answers are using floats, absolute positioning, and other options which aren't optimal now a days, I figured I'd give a new answer that's more up to date on it's standards (float isn't really kosher anymore).
.parent {
display: flex;
flex-direction:row;
}
.column {
flex: 1 1 0px;
border: 1px solid black;
}
<div class="parent">
<div class="column">Column 1</div>
<div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
<div class="column">Column 3</div>
</div>
here are two samples: http://jsfiddle.net/H5q5h/1/
one uses float:left and a wrapper with overflow:hidden. the wrapper ensures the sibling of the wrapper starts below the wrapper.
the 2nd one uses the more recent display:inline-block and wrapper can be disregarded. but this is not generally supported by older browsers so tread lightly on this one. also, any white space between the items will cause an unnecessary "margin-like" white space on the left and right of the item divs.
Old topic but maybe someone will like it.
fiddle link http://jsfiddle.net/74ShU/
<div class="mainDIV">
<div class="leftDIV"></div>
<div class="middleDIV"></div>
<div class="rightDIV"></div>
</div>
and css
.mainDIV{
position:relative;
background:yellow;
width:100%;
min-width:315px;
}
.leftDIV{
position:absolute;
top:0px;
left:0px;
height:50px;
width:100px;
background:red;
}
.middleDIV{
height:50px;
width:100px;
background:blue;
margin:0px auto;
}
.rightDIV{
position:absolute;
top:0px;
right:0px;
height:50px;
width:100px;
background:green;
}
2019 answer:
Using CSS grid:
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
Just add float left property on all the divs you want to make appear in a row other than last one. here is example
<div>
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
</div>
This is easier and gives purpose to the never used unordered/ordered list tags.
In your CSS add:
li{float: left;} //Sets float left property globally for all li tags.
Then add in your HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Now watch it all line up perfectly! No more arguing over tables vs divs!
Check out the foundation rapid prototyping framework they handled this quite nicely, basically they allow you to use HTML like this:
<div class="row">
<div class="four columns">
</div>
<div class="four columns">
</div>
<div class="four columns">
</div>
</div>
This is the simplest HTML/CSS grid system that I've come across, it's based on 12 column grid.
Basically the columns are given a % width and left margin relative to the parent row. They columns have float set to left, position set to relative, and display set to block.
The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting 'pushed' down as they should.
You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php
If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:
.row:after {
content: "";
clear: both;
display: table;
}
.four.column {
float: left;
width: 33%;
}
If you really specifically want a left center and right columns then use code like this:
CSS:
.row:after {
content: "";
clear: both;
display: table;
}
.left {
float: left;
width: 100px;
}
.center {
margin: 0 auto;
width: 100px;
}
.right {
float: right;
width: 100px;
}
HTML:
<div class="row">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
Put the divisions in 'td' tag. That's it done.
Another possible solution:
<div>
<h2 align="center">
San Andreas: Multiplayer
</h2>
<div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
</div>
</div>
Also helpful as well.
Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/