The problem I'm having can be better describe in code.
I have some HTML like following
<div class="page">
<div class="slider-wrap">
<div class="products ">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
</div>
<div class="page">
<div class="products">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
And the CSS code look like this,
.page {
clear: both;
.products {
.product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
}
}
Now these codes results in all the DIVs with ´product´ class to have a background green.
What I'm looking for is, how can I, not apply ´product´ styles for ´slider-wrap´ container. That means, the first page container's product will not be green.
Use CSS selector >. What the > does is that it calls that CSS function only when its a direct parent.
So by assigning .page > .products , the css rules you applied will only take place if .page is the direct parent of .products.
.slider-wrap comes in between the .page and .products, so that particular section won't get affected as .slider-wrap is now the direct parent.
You can read more about this at https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
Try this:
.page {
clear: both;
}
.page > .products .product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
<div class="page">
<div class="slider-wrap">
<div class="products ">
<div class="product">1</div>
<div class="product">1</div>
</div>
</div>
</div>
<div class="page">
<div class="products">
<div class="product">2</div>
<div class="product">2</div>
</div>
</div>
You may instead :not(), filter only direct children > from the .page class:
.page {
clear: both;
> .products {
.product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
}
}
https://codepen.io/gc-nomade/pen/YzKJQmv
You can target it using :first-of-type to overwrite the styles.
.page {
clear: both;
}
.page .products .product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
.page:first-of-type .products .product {
background: tomato;
}
<div class="page">
<div class="slider-wrap">
<div class="products ">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
</div>
<div class="page">
<div class="products">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
You can use this instead of :not
.page {
clear: both;
.products {
.product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
}
.slider-wrap{
.products {
.product {
background: yellow;
}
}
}
}
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I have the following code:
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.colspan2 {
/* What to do here? */
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2">Cell</div>
</div>
</div>
Pretty straightforward. How do I add a colspan (or the equivalent of colspan) for elements with display: table-cell?
As far as I know, the lack of colspan/rowspan is just one of the limitations of display:table. See this post:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Since OP does not explicitly rule that solution must be pure CSS, I'll be stubborn and throw in my workaround I figured out today, especially since it's much more elegant than having a table inside a table.
Example equals to <table> with two cells per row and two rows, where the cell in the second row is a td with colspan="2".
I have tested this with Iceweasel 20, Firefox 23 and IE 10.
div.table {
display: table;
width: 100px;
background-color: lightblue;
border-collapse: collapse;
border: 1px solid red;
}
div.row {
display: table-row;
}
div.cell {
display: table-cell;
border: 1px solid red;
}
div.colspan,
div.colspan+div.cell {
border: 0;
}
div.colspan>div {
width: 1px;
}
div.colspan>div>div {
position: relative;
width: 99px;
overflow: hidden;
}
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
</div>
Live action (demo) here.
EDIT:
I finetuned the code to be more printer-friendly, as they leave background-colors out by default. I also created rowspan-demo, inspired by late answer here.
A simpler solution that works for me in Chrome 30 :
Colspan can be emulated by using display: table instead of display: table-row for the rows :
.table {
display: block;
}
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
display: block;
}
The only pitfall is that the cells of stacked rows won't align vertically, as they're from different tables.
If you're looking for a straight CSS way to simulate a colspan, you could use display: table-caption.
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #000;
}
.colspan2 {
/* What to do here? */
display: table-caption;
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2">Cell</div>
</div>
</div>
Simply use a table.
table's are only frowned upon when being used for layout purposes.
This seems like tabular data (rows/columns of data). Therefore I would recommend using a table.
See my answer to this question for more information:
creating the same thing with divs as tables
Here's one way to span columns in CSS I used for my own situation.
https://jsfiddle.net/mb8npttu/
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px dotted red;
}
.colspan {
max-width: 1px;
overflow: visible;
}
<div class='table'>
<div class='row'>
<div class='cell colspan'>
spanning
</div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'>1</div>
<div class='cell'>2</div>
<div class='cell'>3</div>
</div>
</div>
There is a solution to make the colspan the widht of the entire table. You can not use this technique to colspan a part of the table.
Code:
* {
box-sizing: border-box;
}
.table {
display: table;
position: relative;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.colspan {
position: absolute;
left: 0;
width: 100%;
}
.dummycell {
border-color: transparent;
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell dummycell"> </div>
<div class="cell colspan">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>
Explanation:
We use position absolute on the colspan to make it the full width of the table. The table itself needs position relative. We make use of a dummycell to maintain the height of the rows, position absolute does not follow the flow of the document.
Of course you can also use flexbox and grid to tackle this problem these days.
CSS
.tablewrapper {
position: relative;
}
.table {
display: table;
position: relative
}
.row {
display: table-row;
}
.cell {
border: 1px solid red;
display: table-cell;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
.cell.colspan {
position: absolute;
left: 0;
right: 0;
}
HTML
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell rowspanned">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell empty"></div>
<div class="cell colspan">
Bottom right
</div>
</div>
</div>
</div>
Code
It can be done just with pure CSS and centering the text across the "fake" colspan.
The trick is to set the rows to position:relative, then to place "empty divs" in the row where you want to make the colspan (they must have height in order to work), set the cell where the content is in as display:grid, and finally, applying position:absolute to the element inside the cell (and center it as you may center any other absolute element).
.table {
display: table;
}
.row {
display: table-row;
position: relative;
}
.cell {
display: table-cell;
background-color: blue;
color: white;
height: 26px;
padding: 0 8px;
}
.colspan2 {
display: grid;
}
.colspan2 p {
position:absolute;
left: 50%;
transform:translateX(-50%);
margin: 0;
}
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2"><p>Cell</p></div>
<div class="cell"></div>
</div>
</div>
By using the appropriate div classes and CSS attributes, you can mimic the desired effects of the colspan and rowspan.
Here's the CSS
.table {
display:table;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding: 5px;
vertical-align: middle;
}
Here's the sample HTML
<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">X</div>
<div class="cell">Y</div>
<div class="cell">Z</div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">4</div>
<div class="cell">6</div>
</div>
</div>
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">A</div>
</div>
<div class="row">
<div class="cell">B</div>
</div>
</div>
</div>
<div class="cell">
ROW SPAN
</div>
</div>
</div>
</div>
</div>
</div>
From what I'm seeing in both the questions, and most responses, is people seem to forget that in any given div that's acting as a "table-cell" you can insert another div that's acting like an embedded table, and start the process over.
***It's not glamorous, but it does work for those looking for this type of formatting and they want to avoid the TABLEs. If its for DATA LAYOUT, TABLEs do still work in HTML5.
Hopefully, this will help someone.
You can set the position of colspan content as "relative" and the row as "absolute" like this:
.table {
display: table;
}
.row {
display: table-row;
position: relative;
}
.cell {
display: table-cell;
}
.colspan2 {
position: absolute;
width: 100%;
}
You can't achieve this at present.
AFAIK this would be covered by CSS Tables, a specification which appears to currently be at "work in progress" state.
You can try this solution, where you can find how to apply colspan using div
https://codepen.io/pkachhia/pen/JyWMxY
HTML:
<div class="div_format">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell cell_lable">Project Name</div>
<div class="divTableCell cell_value">: Testing Project</div>
<div class="divTableCell cell_lable">Project Type</div>
<div class="divTableCell cell_value">: Web application</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Version</div>
<div class="divTableCell cell_value">: 1.0.0</div>
<div class="divTableCell cell_lable">Start Time</div>
<div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Version</div>
<div class="divTableCell cell_value">: 2.0.0</div>
<div class="divTableCell cell_lable">End Time</div>
<div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Revision</div>
<div class="divTableCell cell_value">: 3</div>
<div class="divTableCell cell_lable">Overall Result</div>
<div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
</div>
</div>
<div class="divCaptionRow">
<div class="divCaptionlabel">Description</div>
<div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>
CSS:
body {
font-family: arial
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.div_format {
width: 100%;
display: inline-block;
position: relative
}
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row
}
.divTableHeading {
background-color: #EEE;
display: table-header-group
}
.divTableCell,
.divTableHead {
display: table-cell;
padding: 10px
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold
}
.divTableBody {
display: table-row-group
}
.divCaptionRow{
display: table-caption;
caption-side: bottom;
width: 100%;
}
.divCaptionlabel{
caption-side: bottom;
display: inline-block;
background: #ccc;
padding: 10px;
width: 15.6%;
margin-left: 10px;
color: #727272;
}
.divCaptionValue{
float: right;
width: 83%;
padding: 10px 1px;
border-bottom: 1px solid #dddddd;
border-right: 10px solid #fff;
color: #5f5f5f;
text-align: left;
}
.cell_lable {
background: #d0d0d0;
border-bottom: 1px solid #ffffff;
border-left: 10px solid #ffffff;
border-right: 10px solid #fff;
width: 15%;
color: #727272;
}
.cell_value {
border-bottom: 1px solid #dddddd;
width: 30%;
border-right: 10px solid #fff;
color: #5f5f5f;
}
Use nested tables to nest column spans...
<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cell">Cell</div>
</div>
</div>
Or use 2 tables where the column span covers the whole row...
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="cell">Cell</div>
</div>
</div>
Even if this is an old question, I would like to share my solution to this problem.
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan">
<div class="spanned-content">Cell</div>
</div>
</div>
</div>
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.colspan:after {
/* What to do here? */
content: "c";
display: inline;
visibility: hidden;
}
.spanned-content {
position: absolute;
}
</style>
Here is a fiddle.
It's not really a span, and the solution is a bit hacky, but it is usefull in some situations. Tested on Chrome 46, Firefox 31 and IE 11.
In my case, I had to present some non-tabular data in a tabular way, keeping the width of the columns and giving title to sub-sections of the data.
I got the following setup:
<div class="table">
<div class="cell">Cell 1 [fixed width]</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3 [fixed width]</div>
</div>
with this css:
.table {
display: table-cell;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
Now I want to have some text in Cell 3. A bit of text which should be at the bottom of the cell. With vertical-align I could do this easily but I got another line which should stay at the middle or top of the cell. How can I do this? I tried some things with height settings but these have no effect on the cell. And line-height wouldn't work either because the height is not fixed.
Check out below answer:
Fiddle
<div class="table">
<div class="cell1">Cell 1 [fixed width]</div>
<div class="cell2">Cell 2</div>
<div class="cell3">Cell 3 [fixed width] <div class="bot_txt">bottom text</div></div>
</div>
.table {
display: table;
width: 100%;
}
.cell1 {
display: table-cell;
vertical-align: middle;
width: 33%;
height:200px;
background-color:red;
}
.cell2 {
display: table-cell;
vertical-align: middle;
width: 33%;
height:200px;
background-color:green;
}
.cell3 {
background-color:yellow;
display: table-cell;
vertical-align: top;
width: 33%;
height:200px;
position:relative;
}
.bot_txt {
position:absolute;
bottom:0px;
}
Is this what you are looking for?
.table {
display: table;
width: 100%;
border: 2px solid red;
}
.cell {
display: table-cell;
height: auto;
vertical-align: middle;
text-align: center;
border: 1px solid black;
}
<div class="table">
<div class="cell">Cell 1 [fixed width]</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3 [fixed width]
<br>additional line</div>
</div>
I am trying to build an application that has a metro interface.
Rows are stacked like columns and the children are tiled.
in bootstrap rows have a margin-left of -15px and the same for the right. I have then added 15px padding to the .row. My columns then have a margin of 15px all around. So, I have to make my margin-top: -15px and the padding-top: 15px on my row (aswell as the bottom).
All this should give me exactly 30px between every column and row. The problem is when I nest, it all goes to pot.
My CSS looks like this:
.metro {
width: 10000px;
}
.metro .row-title {
position: absolute;
height: 100px;
top: -50px;
}
.metro > .row {
position: relative;
float: left;
height: 630px;
margin-top: -15px;
margin-right: -15px;
padding: 15px;
}
.metro > .row .row {
padding: 0;
}
.metro > .row > .col-md-1 {
width: 75px;
}
.metro > .row > .col-md-2 {
width: 150px;
}
.metro > .row > .col-md-3 {
width: 225px;
}
.metro > .row > .col-md-4 {
width: 300px;
}
.metro > .row > .col-md-5 {
width: 375px;
}
.metro > .row > .col-md-6 {
width: 450px;
}
.metro > .row > .col-md-7 {
width: 525px;
}
.metro > .row > .col-md-8 {
width: 600px;
}
.metro > .row > .col-md-9 {
width: 675px;
}
.metro > .row > .col-md-10 {
width: 750px;
}
.metro > .row > .col-md-11 {
width: 825px;
}
.metro > .row > .col-md-12 {
width: 900px;
}
.flex {
display: -webkit-box;
/* Safari */
display: flex;
/*> div {
-webkit-box-flex: 1;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}*/
}
.flex.flex-wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex.flex-vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.row div[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
}
[class*="col-"] > div:not(.row):not(.alert),
[class*="col-"] > a,
[class*="col-"] > form {
display: block;
background-color: #3C60EF;
padding: 10px;
height: 100%;
}
[class*="col-"] > div:not(.row):not(.alert) .form-group:last-child,
[class*="col-"] > a .form-group:last-child,
[class*="col-"] > form .form-group:last-child {
margin-bottom: 0;
}
and the HTML that is messing up is this:
<div class="container metro">
<div class="row">
<div class="col-xs-12 row-title">
<h1>Login</h1>
</div>
<div class="col-md-12">
<div class="row flex flex-vertical">
<div class="col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box-shadow">
<p>
Some welcome text
</p>
</div>
<div class="row">
<div class="col-md-12">
<div>
<p>Nesting</p>
</div>
<div class="row">
<div class="col-md-12">
<div>
<p>Nesting</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box-shadow">
<p>Disclaimer</p>
</div>
</div>
</div>
</div>
<form class="col-md-12" name="loginForm" role="form">
<div class="box-shadow">
<div class="form-group">
<input class="form-control" type="text" id="userName" placeholder="Enter Username" required="" ng-model="controller.user.userName">
</div>
<div class="form-group">
<input class="form-control" type="password" id="password" placeholder="Enter Password" required="" ng-model="controller.user.password">
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit" ng-disabled="loginForm.$invalid" ng-click="controller.loginUser()">Login</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<p>Another nested row</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I have created a codepen where you can see my issue:
http://codepen.io/r3plica/pen/ojNVeX
does anyone know how I can achieve this?
I managed to do this myself
Basically I just started with the default bootstrap and then played around until I got my desired results.
Here is the CSS that I changed:
.metro > .row {
background-color: red;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
.metro > .row .row {
background-color: orange;
}
.metro > .row .row .row {
background-color: yellow;
}
.row div[class*="col-"] {
border: 1px dashed black;
}
.row [class*="col-"] > div:not(.row),
.row [class*="col-"] > form,
.row [class*="col-"] > a {
background-color: blue;
padding: 15px;
margin-top: 30px;
}
There was no need to add anything else, this solved all my issues.
If I got your question right, you want to create a metro-style UI. Here's a snippet which could be the base for this. As I mentioned in a comment above, do not use bootstrap rows as columns.
body, html {
height: 100%;
}
.metro {
width: 10000px;
height: 100%;
padding-left: 15px;
padding-right: 15px;
}
.metro .page {
width: 100vw;
height: 100%;
display: flex;
flex-direction: column;
float: left;
}
.content {
flex: 1;
}
.content-login {
background-color: #f0f0f0;
}
.content-page2 {
background-color: #e0e0e0;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="metro">
<div class="page">
<h1>Login</h1>
<div class="row content content-login">
Content
</div>
</div>
<div class="page">
<h1>Page 2</h1>
<div class="row content content-page2">
Content
</div>
</div>
</div>