vertical divider between two columns in bootstrap

Question

I am using twitter bootstrap  and have a row which has two columns  span6   How do I create a vertical divider between both the spans    Thanks  Murtaza

User · Answer

Must Open in Full Page to See Borders   Added media width clauses in the CSS so there isn t any nasty borders on the mobile-friendly side of things  Hope this helps  This will resize to the length of the longest column  Tested on  col-md-4 and  col-md-6 and my assumption is it is compatible with the rest  No guarantees though   JSFiddle   x000D   x000D   row   x000D    overflow  hidden  x000D    x000D   x000D   cols   x000D    padding-bottom  100   x000D    margin-bottom  -100   x000D    overflow  hidden  x000D    x000D   x000D   media min-width  992px    x000D     col-md-4 not  first-child    x000D     col-md-6 not  first-child    x000D      border-left  1px solid black  x000D      x000D     col-md-4 not  last-child   x000D     col-md-6 not  last-child    x000D      border-right  1px solid black  x000D      margin-right  -1px  x000D      x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  container  gt  x000D     lt h1 gt  x000D       col-md-6 x000D     lt  h1 gt  x000D     lt hr gt  x000D     lt div class  row text-center  gt  x000D       lt div class  col-md-6 cols  gt  x000D         lt p gt Enter some text here lt  p gt  x000D       lt  div gt  x000D       lt div class  col-md-6 cols  gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt hr gt  x000D     lt h1 gt  x000D       col-md-4 x000D     lt  h1 gt  x000D     lt div class  row text-center  gt  x000D       lt div class  col-md-4 cols  gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D       lt  div gt  x000D       lt div class  col-md-4 cols  gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D       lt  div gt  x000D       lt div class  cols col-md-4 cols  gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D         lt p gt Enter some more text here lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   row vertical-divider   x000D    overflow  hidden  x000D    x000D   row vertical-divider  gt  div class   col-     x000D    text-align  center  x000D    padding-bottom  100px  x000D    margin-bottom  -100px  x000D    border-left  3px solid  F2F7F9  x000D    border-right  3px solid  F2F7F9  x000D    x000D   row vertical-divider div class   col-   first-child   x000D    border-left  none  x000D    x000D   row vertical-divider div class   col-   last-child   x000D    border-right  none  x000D    x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet    gt  x000D   lt div class  row vertical-divider  style  margin-top  30px  gt  x000D     lt div class  col-xs-6  gt Hi there lt  div gt  x000D     lt div class  col-xs-6  gt Hi world lt br  gt hi world lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

With Bootstrap 4 you can use borders  avoiding writing other CSS      border-left   And if you want space between content and border you can use padding   in this example padding left 4px      pl-4   Example   x000D   x000D       lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt  x000D   x000D       lt div class  row  gt  x000D         lt div class  offset-6 border-left pl-4  gt First lt  div gt  x000D         lt div class  offset-6 border-left pl-4  gt Second lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

Well here s another option which I ve been using for some time now  It works great for me since I mostly need it do visually separate 2 cols  And it s also responsive  Which means that if I have columns next to each other in medium and large screen sizes  then I would use the class col-md-border  which would hide the separator on smaller screen sizes   css    media  min-width  992px         col-md-border not  last-child            border-right  1px solid  d7d7d7             col-md-border    col-md-border           border-left  1px solid  d7d7d7          margin-left  -1px            In scss you can generate all needed classes probably from this   scss      media min-width   screen-md-min         col-md-border            amp  not  last-child                border-right  1px solid  d7d7d7                      amp     col-md-border               border-left  1px solid  d7d7d7              margin-left  -1px                      HTML    lt div class  row  gt       lt div class  col-md-6 col-md-border  gt  lt  div gt       lt div class  col-md-6 col-md-border  gt  lt  div gt   lt  div gt      How it works   The cols must be inside an element where there are no other cols otherwise the selectors might not work as expected     col-md-border not  last-child  matches all but the last element before  row close and adds right border to it    col-md-border    col-md-border matches the second div with the same class if these two are next to each other and adds left border and -1px negative margin  Negative margin is why it doesn t matter anymore which column has greater height and the separator will be 1px the same height as the highest column   It does also have some problems       When you try to be clever lazy and use col-XX-X class together with hidden-XX visible-XX classes inside the same row element  When you have a lot of columns and need a pixel perfect thing  Since it moves n-1 column 1px to the left        But on the other hand it s responsive  works great for simple html and it s easy to create these classes for all bootstrap screen sizes

User · Answer

If you are still seeking for the best solution in 2018, I found the way this works perfectly if you have at least one free pseudo element( ::after or ::before ).

You just have to add class to your row like this: <div class="row vertical-divider ">

And add this to your CSS:

.row.vertical-divider [class*='col-']:not(:last-child)::after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

Any row with this class will now have vertical divider between all of the columns it contains...

You can see how this works in this example.

User · Answer

Use this  100  guaranteed -  vr     margin-left  20px    margin-right  20px    height  50px    border  0    border-left  1px solid  cccccc    display  inline-block    vertical-align  bottom

User · Answer

Well what I did was remove the gutter between the respective spans then drawing a left border for the left span and a right border for the right span in such a way that their borders overlapped just to give a single line. This way the visible line will just be one of borders.

CSS

.leftspan
{
padding-right:20px;
border-right: 1px solid #ccc;
}

.row-fluid .rightspan {
margin-left: -0.138297872340425%;
*margin-left: -0.13191489361702%;
padding-left:20px;
border-left: 1px solid #ccc;
}

.row-fluid .rightspan:first-child {
margin-left: -0.11063829787234%;
*margin-left: -0.104255319148938%;
}

HTML

  <div class="row-fluid" >
      <div class="span8 leftspan" >
      </div>

      <div class="span4 rightspan"  >
      </div>
 </div>

Try this it works for me

User · Answer

To fix the ugly look of a divider being too short when the content of one column is taller, add borders to all columns. Give every other column a negative margin to compensate for position differences.

For example, my three column classes:

.border-right {
    border-right: 1px solid #ddd;
}
.borders {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: -1px;
}
.border-left {
    border-left: 1px solid #ddd;
}

And the HTML:

<div class="col-sm-4 border-right">First</div>
<div class="col-sm-4 borders">Second</div>
<div class="col-sm-4 border-left">Third</div>

Make sure you use #ddd if you want the same color as Bootstrap's horizontal dividers.

User · Answer

If you want a vertical divider between 2 columns, all you need is add

class="col-6 border-left"

to one of your column div-s

BUT

In the world of responsive design, you may need to make it disappear sometimes.

The solution is disappearing <hr> + disappearing <div> + margin-left: -1px;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      1 of 2
    </div>
    <div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
    <div class="col-md-5" style="margin-left: -1px;">
    <hr class="d-sm-block d-md-none">
      2 of 2
    </div>
  </div>
</div>

https://jsfiddle.net/8z1pag7s/

tested on Bootstrap 4.1

User · Answer

If your code looks like this    lt div class  row  gt     lt div class  span6  gt     lt  div gt     lt div class  span6  gt     lt  div gt   lt  div gt    Then I d assume you re using additional DIVS within the  span6  DIVS for holding styling your content  So      lt div class  row  gt     lt div class  span6  gt       lt div class  mycontent-left  gt       lt  div gt     lt  div gt     lt div class  span6  gt       lt div class  mycontent-right  gt       lt  div gt     lt  div gt   lt  div gt    So you could simply add some CSS to the  mycontent-left  class to create your divider    mycontent-left     border-right  1px dashed  333

User · Answer

I have tested it  It works fine    row vdivide  class   col-   not  last-child  after         background   e0e0e0        width  1px        content            display block        position  absolute        top 0        bottom  0        right  0        min-height  70px              lt div class  container  gt         lt div class  row vdivide  gt           lt div class  col-sm-3 text-center  gt  lt h1 gt One lt  h1 gt  lt  div gt           lt div class  col-sm-3 text-center  gt  lt h1 gt Two lt  h1 gt  lt  div gt           lt div class  col-sm-3 text-center  gt  lt h1 gt Three lt  h1 gt  lt  div gt           lt div class  col-sm-3 text-center  gt  lt h1 gt Four lt  h1 gt  lt  div gt         lt  div gt       lt  div gt

User · Answer

In Bootstrap 4 there is the utility class border-right which you can use.

So for example you can do:

<div class="row">
  <div class="col-6 border-right"></div>
  <div class="col-6"></div>
</div>

User · Answer

Assuming you have a column space  this is an option  Rebalance the columns depending on what you need    lt div class  col-1  gt       lt div class  col-6 vhr  gt       lt  div gt   lt  div gt     vhr    border-right  1px solid  333    height 100

[html] vertical divider between two columns in bootstrap

The answer is

Must Open in Full Page to See Borders!

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Tags