<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <h1>Two Column Vertical Divider with Text</h1> </div> </div> <!-- row requires "row-divided" class --> <div class="row row-divided"> <div class="col-xs-6 column-one"> <h2>Column 1</h2> <p>6 column wide (col-xs-6)</p> </div> <div class="vertical-divider">or</div> <div class="col-xs-6 column-two"> <h2>Column 2</h2> <p>6 column wide (col-xs-6)</p> </div> </div> </div>

.vertical-divider { position: absolute; z-index: 10; top: 50%; left: 50%; margin: 0; padding: 0; width: auto; height: 50%; line-height: 0; text-align:center; text-transform: uppercase; transform: translateX(-50%); } .vertical-divider:before, .vertical-divider:after { position: absolute; left: 50%; content: ''; z-index: 9; border-left: 1px solid rgba(34,36,38,.15); border-right: 1px solid rgba(255,255,255,.1); width: 0; height: calc(100% - 1rem); } .row-divided > .vertical-divider { height: calc(50% - 1rem); } .vertical-divider:before { top: -100%; } .vertical-divider:after { top: auto; bottom: 0; } .row-divided { position:relative; } .row-divided > [class^="col-"], .row-divided > [class*=" col-"] { padding-left: 30px; /* gutter width (give a little extra room) 2x default */ padding-right: 30px; /* gutter width (give a little extra room) 2x default */ } /* just to set different column heights - not needed to function */ .column-one { height: 300px; background-color: #EBFFF9; } .column-two { height: 400px; background-color: #F7F3FF; }