in my code div add dynamic and i don't want to use extra div like <div class"left/right"> for contain left or right div.
<div class="container">
<div class="row">
<div class="col-md-8 left">demo1</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo3</div>
</div>
</div>
using this code my div look like
------------------
| demo1 |
------------------
| demo2 | demo3 |
------------------
but i want, for ex.
------------------
| demo1 | demo3 |
------------------
| demo2 | demo4 |
------------------
| demo5 |
mean right div set always right or left on left side.
if there is any solution in Bootstrap then its good for me.
You should remove the .row container as it is restricting the element to belong inside that container itself. I tried this using float: left and float: right.
HTML
<div class="container">
<div class="col-md-8 left">demo1</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo3</div>
<div class="col-md-4 right">demo4</div>
<div class="col-md-8 right">demo5</div>
<div class="col-md-8 left">demo6</div>
<div class="col-md-4 right">demo7</div>
<div class="col-md-4 right">demo8</div>
</div>
CSS
* {
box-sizing: border-box;
}
.left {
float: left;
background-color: green;
}
.right {
float: right;
background-color: red;
}
.container > div {
width: 50%;
height: 100px;
margin: 5px 0px;
}
.left + .left {
clear: left;
}
.right + .right {
clear: right;
}
.right + .right ~ .left, .left + .left ~ .right {
position: relative; /* or use just margin-top */
top: -110px; /* height + margin-top + margin-bottom */
}
Working Fiddle
[Note]: If you have more elements of left/right in serial wise, then you should use like this:
.right + .right + .right ~ .left, .left + .left + .left ~ .right{
position: relative;
top: -220px;
}
Method 1
Using twitter bootstrap structure
<div class="container">
<div class="row">
<div class="col-md-6">demo1</div>
<div class="col-md-6">demo2</div>
</div>
<div class="row">
<div class="col-md-6">demo3</div>
<div class="col-md-6">demo4</div>
</div>
<div class="row">
<div class="col-md-6">demo5</div>
<div class="col-md-6">demo6</div>
</div>
</div>
Method 2
Or you can simple try that
<div class="container">
<div class="row">
<div class="col-md-12" id="equaldivs">
<div>demo1</div>
<div>demo2</div>
<div>demo3</div>
<div>demo4</div>
<div>demo5</div>
<div>demo6</div>
</div>
</div>
</div>
and into your style.css
#equaldivs div:nth-child(odd) {
width:50%;
float:left
}
#equaldivs div:nth-child(even) {
width:50%;
float:right
}
Try this
HTML
<div class="row">
<div class="col-md-8 left">demo1</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo3</div>
<div class="col-md-8 left">demo4</div>
<div class="col-md-4 right">demo5</div>
<div class="col-md-4 right">demo6</div>
<div class="col-md-4 left">demo7</div>
</div>
CSS
.row{width:100%}
.left{width:50%; float:left; min-height:20%; clear:left;}
.right{width:50%; float:right; margin-left:-50%; min-height:20%; clear:right}
If you want without Container Then you can use below code.
<div class="col-md-12">
<div class="Col-md-6">
<p>Left Side</p>
</div>
<div class="Col-md-6">
<p>Right Side</p>
</div>
</div>
You can achieve the desired view with a very little re-arrangement.
<div class="container">
<div class="row">
<div class="col-md-8 left">demo1</div>
<div class="col-md-4 right">demo3</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo4</div>
</div>
</div>
See it in action here.
Related
How to stick the columns together with bootstrap and css?
I would like to create something like this:
What I have created:
Here is my HTML & CSS markup:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
My css
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
Every single help would be appreciate!
There are many possibilities depending on what you are trying to achieve exactly.
If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "#grid-gutter-width" that needs to be set to 0.
If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like
.no-pad{
padding-left:0;
padding-right:0;
}
And add it to all columns you want without gutter.
If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.
The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:
.col-md-4 {
padding: 0;
}
However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:
<div class="myClass">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
</div>
.myClass .row .col-md-4 {
padding: 0;
}
This way you are only targeting specific code and not ALL the columns.
Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.
The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:
.boxes .col-md-4 {
padding-right: 0;
padding-left: 0;
}
this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.
I hope that helps.
Working example but using col-xs-4 as much smaller viewport:
.row {
background: #ccc;
}
.box {
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.boxes .col-xs-4 {
padding-right: 0;
padding-left: 0;
}
.box1 {
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row boxes">
<div class="col-xs-4">
<div class="box box1">
<h1>this is box 1</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box2">
<h1>this is box 2</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box3">
<h1>this is box 3</h1>
</div>
</div>
With how my HTML is structure I am having hard time selecting 3n child. It doesn't seem even notice the 3n selector of class heroLetter, but if I use the 1n child selector the code notices the class, but it also selects every div. I am not sure how to call the 3n child selector with this structure of classes I have made.
Code:
.heroLetter {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 600px;
color: #f5543a;
position: relative;
}
.windowWrapper .section .heroLetter:nth-child(3n) {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 200px;
color: #f5543a;
position: relative;
}
<div class="wrapper">
<div id="section1" class="windowWrapper">
<div class="section group">
<h1 class="introH1">
<span class="Grand">GRAND</span>
<span class="Stand">STAND</span>
</h1>
<p class="introP">A new font.</p>
scroll down
</div>
</div>
<div id="section2" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>STORY</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
G
</div>
</div>
</div>
<div id="section3" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>PROCESS</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
S
</div>
</div>
</div>
<div id="section4" class="windowWrapper form">
<div class="section group">
<div class="col span_6_of_12">
<h1>BEAM</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
<div class="circle"></div>
a
</div>
</div>
</div>
</div>
</div>
The nth-child refers to children of the same parent only.
You could adjust your code to refer to the outer most common element.
Some css like this should help you:
.windowWrapper:nth-child(4n) .section .heroLetter {}
In this case it's the 4th windowWrapper since it contains your 3rd heroLetter
I am trying to make 2 columns, underneath one of the column need to have 3 rows. each rows has seperate number of cells. but it's not working for me. it should 100% wide, but it look like inline-table - how to fix this?
#table {
display:table;
width:100%
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
}
.row1 {
display: table-caption;
}
.cell1 {
width:30%
}
<div id="table">
<div class="row">
<div class="cell cell1">30%</div>
<div class="cell cell2">
<div class="row row1">
<div class="cell"><h2>90%</h2></div>
<div class="cell"><h2>10%</h2></div>
</div>
<div class="row row2">
<div class="cell"><h2>40%</h2></div>
<div class="cell"><h2>20%</h2></div>
<div class="cell"><h2>20%</h2></div>
<div class="cell"><h2>20%</h2></div>
</div>
<div class="row row2">
<div class="cell"><h2>100%</h2></div>
</div>
</div>
</div>
</div>
I am trying to expand the height of first three col-md-1 divs to the rows maximum height which is expanded by two col-md-5, and also vertically align its contents. I am using grid system from bootstrap.
<div class="row load-container">
<div class="col-md-1">{{Id}}</div>
<div class="col-md-1"><img src="images/{{statusIcon Status}}" /></div>
<div class="col-md-1"><div class="info-bubble info-bubble-small middle-align {{statusClass}}">{{Class}}</div></div>
<div class="col-md-5 container">
<div class="row">{{From.Name}}</div>
<div class="row">{{From.City}} {{From.State}}, {{From.Zip}}</div>
<div class="row">{{pickupFormatted}}</div>
</div>
<div class="col-md-5 container">
<div class="row">{{To.Name}}</div>
<div class="row">{{To.City}} {{To.State}}, {{To.Zip}}</div>
<div class="row">{{deliveryFormatted}}</div>
<div class="row">{{expectedFormatted}}</div>
</div>
<div class="col-md-1">
{{Weight}}
</div>
<div class="col-md-2">
{{Distance.text}}
</div>
<div class="col-md-2">
{{Duration.text}}
</div>
<div class="col-md-4">
</div>
</div>
Edit:
Here is the method the sort-of works, except that the column widths are no longer affecting actual width.
.load-container {
padding: 5px;
display: table;
width: 100%;
}
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
text-align: left;
}
Ninja-edit:
This seems to work now
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
I know this question has been asked before. However, I do not seem to find my mistake.
I set up a plnkr. I try to align some text vertically, whereas the the stuff that needs to be aligned is nested into multiple divs.
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
and in my CSS I have this.
.news{
background-color:black;
line-height:200px;
width:200px;
height:200px;
display:table;
}
#newsDetails{
display:table-cell;
vertical-align:middle;
}
So basically I have I lineheight given from the outer div with class="news". I want the the nested div to be aligned vertically. Is there any way to do this?
http://plnkr.co/edit/cMaCrG1Y8Ky48HwtgNPk?p=preview
If you want to use the display: table property, you should set it in the parent node, like:
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div id="newsParent" class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
.news{
background-color:black;
width:200px;
height:200px;
}
#newsParent {
display:table;
}
#newsDetails{
height: 200px;
display:table-cell;
vertical-align:middle;
}
Give it a try and let me know if it helps!
You can make wrapper display: table and child div display: table-cell; vertical-align: middle;. find the below jsfiddle demo.
HTML
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row newsDetailswrap">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are you?</div>
</div>
</div>
</div>
</div>
</div>
CSS
.newsDetailswrap{
background: red;
height: 100px;
display:table;
}
#newsDetails{
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/hhbnywq1/