css vertical divider inbetween col bootstrap - html

Question

I'm trying to put a divider inbetween the two divs but I can't find a solution without putting the class tag in the div area which I don't want to do.
What I want to do is something like this. Jsfiddle preview
<div class="box1"></div>
<div class="divider"></div>
<div class="box1"></div>

Answer 1

You don't need a divideer you can give right border to the first div as following:
.col-xs-6:first-child //can be md as well{
border-right:1px solid;
}
See the fiddle: "http://jsfiddle.net/ut8dgbxz/4/"

Answer 2

Your question is not clear in the sense of vertical or horizontal divider! So, for horizontal divider, that is a line that is sleeping or parallel to the floor, instead of div.divider use:
<hr />
This is the right way, which is called horizontal rule.
Snippet
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css");
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
<hr />
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expliabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
</div>
</div>
</div>
If it is supposed to be vertical one, i.e., the standing one, use this way:
Snippet
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css");
.divider {border-left: 2px solid #ccc; padding-left: 5px;}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
<div class="col-md-6">
<div class="divider">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expliabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
</div>
</div>
</div>
</div>
Make sure you do the columns this way: Use two .col-md-6 for equal width columns. And then use the CSS:
.divider {border-left: 2px solid #ccc; padding-left: 5px; margin-left: -5px;}
<div class="col-md-6">
Some content here.
</div>
<div class="col-md-6">
<div class="divider">
Some content here.
</div>
</div>
Snippet
.divider {border-left: 2px solid #ccc; padding-left: 3px; margin-left: -5px; height: 50px; float: left;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">Hello</div>
<div class="divider"></div>
<div class="col-md-6">Hello</div>
</div>
</div>
This replaces the margin displaced with the padding. And then you can use it anywhere.
Important Note: Never use the divider with .col-*-* classes as the layout might get screwed up in the responsiveness.

Answer 3

Now try to this way
.box1{
width:50%;
float:left;
background:gray;
}
.container {overflow:hidden;}
.divider{
position:relative;
}
.divider:after{
content:"";
position:absolute;
right:50%;
top:0;
bottom:0;
border-right:dotted 1px red;
}
<div class="container divider"><div class="box1 ">Hello</div>
<div class="box1">Hello two </div></div>

Answer 4

I think you want this kind:
.container{
background:#f5f5f5;
}
.col-md-6{
border-bottom:1px solid grey;
height:auto;
position:relative;
padding:0 0 10px 0;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expliabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
</div>
</div>
</div>

Answer 5

HTML:
<div class="box1 divider"></div>
<div class="box1"></div>
CSS:
.divider {
position: relative;
}
.divider:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background-color: #000;
}
Just add an extra class to any div you want to be vertically divided then use this CSS. It removes the need for an extra element. This gives you more control when nesting grids

Answer 6

I understand that you don't want to put extra html element in there. What about this solution (this will work with many columns, not just two):
.col-md-6:nth-child(odd) {
border-right: 1px dotted grey;
}
.col-md-6:nth-child(even) {
border-right: none;
}
And HTML:
<div class="row">
<div class="col-md-12">
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expliabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
</div>
</div>
jsfiddle

Answer 7

You can use border-left using the sibling selector to act as the vertical divider. This is not dependent on the number of columns in the row so you can use it independently.
.dividers {
display: flex;
display: -ms-flex;
}
.dividers [class^=col] + [class^=col] {
/* To match all the classes prefixed with col and which has a sibling */
border-left: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12 dividers">
<div class="col-md-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
<div class="col-md-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expliabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
<div class="col-md-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
<div class="col-md-3 col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expliabo a quisquam earum accusamus iusto quos sunt incidunt laudantium ratione unde veritatis soluta fuga cum hic odit asperiores accusantium nulla libero.</div>
</div>
</div>
</div>

Answer 8

If you want to use the bootstrap .col-* classes, see my Fiddle for a way to put vertical dividers that adjust to the tallest column.
Must view in full-screen for full effect
The borders are not used on mobile since the columns stack when viewed on a mobile platform.
.row {
overflow: hidden;
}
.cols {
padding-bottom: 100%;
margin-bottom: -100%;
overflow: hidden;
}
#media(min-width: 992px) {
.col-md-4:not(:first-child),
.col-md-6:not(:first-child) {
border-left: 1px solid black;
}
.col-md-4:not(:last-child),
.col-md-6:not(:last-child) {
border-right: 1px solid black;
margin-right: -1px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>
.col-md-6
</h1>
<hr>
<div class="row text-center">
<div class="col-md-6 cols">
<p>Enter some text here</p>
</div>
<div class="col-md-6 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
<hr>
<h1>
.col-md-4
</h1>
<div class="row text-center">
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="cols col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
</div>