Creating a responsive divider (vertical/horizontal) in Bootstrap - css

Question

I'm struggling a bit with creating a responsive divider in Bootstrap. By responsive divider I mean a divider which is vertical on large screens and horizontal on smaller screens.
Vertical divider:
Horizontal divider:

Answer 1

This is a simple example how to make a responsive horizontal line with words by Bootstrap 4.1
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<hr class="my-auto flex-grow-1">
<div class="px-4">SOME TEXT HERE</div>
<hr class="my-auto flex-grow-1">
</div>

Answer 2

This has to be done using a class which can change with media queries. Check this link out for a solution http://www.bootply.com/cwvl8JaIEi. Its basically what you have already with a few additions as follows:
A class for the line
media queries
.sepText {
background: #ffffff;
margin: -15px 0 0 -38px;
padding: 5px 0;
position: absolute;
left: 43%;
text-align: center;
}
hr{-webkit-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
-ms-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
transform: translate(-45px, -11px) rotate(90deg) scale(0.8);}
#media only screen and (max-width: 999px) {
hr{
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.sepText {
left: 50%;
top:50%
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-5">
<h2>Lorem ipsum</h2>
<p>blah blach hery asd
ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d<br>asd ads asd da da da dada
</p>
</div>
<div class="col-md-2">
<div class="sep">
<hr><div class="sepText">
OR
</div>
</div>
</div>
<div class="col-md-5">
<h2>Lorem lorem</h2>
<p>ok ok ok</p>
</div>
</div>

Answer 3

The columns really need to be be equal height so Flexbox seems optimal
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.sep {
display: flex;
flex-direction: column;
justify-content: center;
}
.sepText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.sepText::before,
.sepText::after {
content: '';
flex: 1;
width: 1px;
background: currentColor;
/* matches font color */
margin: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-5">
<h2>Lorem ipsum</h2>
<p>blah blach hery asd ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d
<br>asd ads asd da da da dada
</p>
</div>
<div class="col-sm-2 sep">
<span class="sepText">
OR
</span>
</div>
<div class="col-sm-5">
<h2>Lorem lorem</h2>
<p>ok ok ok</p>
</div>
</div>
</div>
Codepen Demo

Answer 4

here is working Demo.
HTML
<div class="row">
<div class="col-sm-5"><h2>lorem Ipsum</h2><p>lorem ipsum dummt text is here for you</p></div>
<div class="col-sm-2 seprator_class">
<div class="sep">
<div class="sep-text">
or
</div>
</div>
</div>
<div class="col-sm-5"><h2>lorem Ipsum</h2><p>lorem ipsum dummt text is here for you</p>
</div>
</div>
CSS
.seprator_class {position: relative;}
.sep {position: absolute; left:50%; top:0; bottom:0; width: 1px; background:#ccc; display:table; height:100%;}
.sep-text { display:table-cell; vertical-align:middle; background: #fff; padding: 5px;}
#media screen and (max-width: 768px) {
.sep {position: absolute; left:0; top:50%; bottom:auto; right:0 width: 100%; background:#ccc; display:block; height: 1px; text-align:center;}
.sep-text { display:inline-block;}
}

Answer 5

The answer 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

Answer 6

Here is a codepen for an unlimited number of cells : https://codepen.io/pg-dev/pen/vYyKEaN
Code:
var detectWrap = function(className) {
var midLine = [];
var lastLine = [];
var lastColItems = [];
var prevItem = null;
var item = null;
var items = document.getElementsByClassName(className);
for (const [pos, item] of Object.entries(items)) {
if (prevItem != null &&
prevItem.getBoundingClientRect().top < item.getBoundingClientRect().top) {
lastColItems.push(prevItem)
midLine.push(...lastLine)
lastLine = []
}
//Suppose this is the last line, if not (detect a new line) then move last to mid
lastLine.push(item)
if (parseInt(pos, 0) === items.length - 1) {
lastColItems.push(item)
}
prevItem = item;
};
return {
"mid": midLine,
"last": lastLine,
"last-item": lastColItems
};
}
function grid() {
var wrappedItems = detectWrap("item");
var items = document.getElementsByClassName("item");
for ([key, item] of Object.entries(items)) {
item.classList.remove("last-item-of-line")
item.classList.remove("last-line")
item.classList.add("line")
}
for ([key, item] of Object.entries( wrappedItems["last"])) {
item.classList.add("last-line")
}
for ([key, item] of Object.entries(wrappedItems["last-item"])) {
item.classList.add("last-item-of-line")
}
}
window.onresize = function(event){
grid();
};
//when document ready
document.addEventListener('DOMContentLoaded', function() {
grid();
});
body {
background: grey;
}
div {
display: flex;
flex-wrap: wrap;
}
div > div {
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
background-color: #222222;
padding: 20px 0px;
color: #FFFFFF;
font-family: Arial;
min-width: 250px;
}
div > div.wrapped {
background-color: red;
}
.line {
border-top: none;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-left: none;
}
.last-item-of-line {
border-right: none !important;
}
.last-line {
border-top: none;
border-bottom: none;
border-left: none;
border-right: 1px solid white;
}
<div>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
</div>