CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MrNew
MrNew

Reputation: 1414

css vertical divider inbetween col bootstrap

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>

Upvotes: 1

Views: 1098

Answers (8)

Matthew Zackschewski
Matthew Zackschewski

Reputation: 486

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>

Upvotes: 0

m4n0
m4n0

Reputation: 32275

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>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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.

Upvotes: 1

Keammoort
Keammoort

Reputation: 3075

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

Upvotes: 0

Dan Gamble
Dan Gamble

Reputation: 4155

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

Upvotes: 0

Mike Phils
Mike Phils

Reputation: 3505

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>

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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>

Upvotes: 0

Nikhil Batra
Nikhil Batra

Reputation: 3148

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/"

Upvotes: 1

Related Questions