So I need to display a box (position absolute) above my page when clicking on some button designed, inside this box will be a list of "tags" which should be displayed in a row.
But my problem is that I cannot manage to make the tags wrap properly, taking the maximum space of the box. I want to display as many tags as possible in a single row.
Any idea if this is possible ?
https://jsfiddle.net/e18d2ajh/
.vectors {
display: inline-flex;
min-width: 20vw;
max-width: 50vw;
background-color: #333;
padding: 15px;
margin-bottom: 15px;
}
.vector {
display: flex;
padding: .35rem;
background-color: #c0c0c0;
margin-right: .5rem;
}
<h5>
with few boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
<h5>
with many boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
Use flex-wrap property to wrap contents to next line
.vectors {
...
flex-wrap: wrap;
...
}
.vectors {
display: inline-flex;
flex-wrap: wrap;
min-width: 20vw;
max-width: 50vw;
background-color: #333;
padding: 15px;
margin-bottom: 15px;
}
.vector {
display: flex;
padding: .35rem;
background-color: #c0c0c0;
margin-right: .5rem;
}
<h5>
with few boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
<h5>
with many boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
You need a flex-wrap: wrap for .vectors and a flex-grow: 1 for .vector so the children occupy empty space left in the row after wrapping. Note, that might look ugly for the last row, solution is using pseudo element. Summary:
.vectors {
flex-wrap: wrap;
}
.vectors::after {
content: '';
flex: 100 0 0;
}
.vector{
flex-grow: 1;
}
Here's the codepen
You could set max-width:max-content on .vectores with flex-wrap:wrap and it would do the trick, like so:
.vectors {
display: inline-flex;
min-width: 20vw;
max-width: max-content;
background-color: #333;
padding: 15px;
margin-bottom: 15px;
/* lines I added */
flex-wrap:wrap;
gap:.5rem;
}
.vector {
display: flex;
padding: .35rem;
background-color: #c0c0c0;
}
<h5>
with few boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
<h5>
with many boxes
</h5>
<div class="vectors">
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
<div class="vector">
Random text
</div>
</div>
I have the following
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
Text that<br>literally<br>spans<br>4 lines
</p>
</div>
</div>
</div>
and css
.box-cell
{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
So the problem that I am facing is that one of the cells is usually taller than the other.IS there any way for me to equalize how much height each cell takes up?
Searching didn't yield me which property I can manipulate to get same height :(
Here is jsfiddle
However in this fiddle I can not get them to be side by side to prove my point
EDIT: I guess I didn't specify it properly. I would like to have the borders be as tall as the tallest cell. So all the examples provided here actually take out the borders and instead color the background. If I do that then yes it gives illusion of every cell being the same, but I would like there to be a border of same height.
I tried replicating what it sounds like you are looking for.
I would recommend you mess around with flexbox since it seems to do exactly what you are looking for.
<div class="myc">
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
</div>
And for the CSS
.myc {
display: flex;
}
.col {
background-color: yellow;
margin-right: 20px;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-4" style="background-color: green">
some content
</div>
<div class="col-xs-6 col-sm-4" style="background-color: orange">
some content
<img src="http://placehold.it/100x120">
</div>
<div class="col-xs-6 col-sm-4" style="background-color: magenta">
some of content
</div>
</div>
Some options to solve it:
Different Tricks on How to Make Bootstrap Columns All the Same Height
<style type="text/css">
.box-cell{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
</style>
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
<span>Text that</span>
<span>literally</span>
<span>s4 lines</span>
<span>ygthfg</span>
</p>
</div>
</div>
</div>
1- you need to add text in span tag.
2- Or take text in one line .
I am trying to set cards with information in columns. As the texts displayed have different lenghts, I want to fixed the possition of the Learn More button related to the end of the card, so no matter what comes before, the buttons are always aligned.
Furthermore, I want to separate the cards between rows, but I haven't been able to find a solution yet, because if I change margins it only applies in the last row.
Here is my code:
<div class="row my-flex-card">
<div class= "col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body inline-block">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a class="btn btn-success" href="#!/women/details/{{woman._id}}">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
My CSS:
.my-flex-card > div > div.card {
height: calc(100% - 15px);
margin-bottom: 15px;
}
.row {
margin-bottom: 50px;
}
That .row feature isn't working.
This is how my website looks like right now:
Thank you :)
.parent {
display: flex;
flex-direction: row;
padding: 10px;
}
.parent .child {
padding-right: 10px;
flex-grow: 1;
width: 33%;
position:relative;
}
.parent .child .content {
height: 100%;
box-shadow: 0 0 1em gray;
}
.content img{
background-size:cover;
width:100%;
}
.content h3,p{
padding:10px;
}
.content input{
position:absolute;
bottom:5px;
margin-left: 35%;
margin-top:10px;
}
<div class="parent">
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 3</h3>
<p>text text text text text text text text text text text text text text text text text text text</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 2</h3>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex </p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 1</h3>
<p>text text text text text text text text text text text text tex</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
</div>
make the box class with position relative :
.boxClassName{
position:relative
}
then make the button class with the following :
.buttonClassName{
position:absolute;
bottom:0;
}
I am working on a site, of which has to have a description section. I am trying to achieve this by having two Bootstrap columns, one sized 8 and then another sized 4 to make sure it is equal to 12. Then in the column which is 8, I want to have two columns inside, to achieve one column of text on the left and then a second column of text on the right.
There is just a problem, as it doesn't seem to be working and whenever I try to do this, it just creates a second column underneath the first one inside of the 8 column.
I have attached an image to make it easier to see what I got and what I am trying to achieve. Any help is much appreciated.
Image of current situation:
What I am trying to achieve:
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
<div class="leftContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
</div>
<div class="rightContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
Your left and right DIV's wrap the Bootstrap col-md-6 columns so they no longer float next to each other. Also, always put nested col-*s inside another row so the padding is correct..
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img />
</div>
<div class="row">
<div class="col-md-6">
<div class="leftContDesc">
<img />
</div>
</div>
<div class="col-md-6">
<div class="leftContDesc">
<p>
</p>
</div>
</div>
</div>
<div class="partLineDesc2">
<img/>
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
</div>
Demo: http://codeply.com/go/yRQum3xKKY
It seems your bootstrap columns are all over the place.
You really need to wrap everything you're trying to split into columns into an overhead div that way you're saying that your main container is taking up 12 columns of that grid then you decide which of those 12 the inside columns need to take up.
Quick mock-up below.
---
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="leftContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
<div class="rightContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="securInfo">
</div>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
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
If your code looks like this:
<div class="row">
<div class="span6">
</div>
<div class="span6">
</div>
</div>
Then I'd assume you're using additional DIVS within the "span6" DIVS for holding/styling your content? So...
<div class="row">
<div class="span6">
<div class="mycontent-left">
</div>
</div>
<div class="span6">
<div class="mycontent-right">
</div>
</div>
</div>
So you could simply add some CSS to the "mycontent-left" class to create your divider.
.mycontent-left {
border-right: 1px dashed #333;
}
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>
.row.vertical-divider {
overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
text-align: center;
padding-bottom: 100px;
margin-bottom: -100px;
border-left: 3px solid #F2F7F9;
border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
border-right: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vertical-divider" style="margin-top: 30px">
<div class="col-xs-6">Hi there</div>
<div class="col-xs-6">Hi world<br/>hi world</div>
</div>
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 {
&:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
& + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
}
HTML:
<div class="row">
<div class="col-md-6 col-md-border"></div>
<div class="col-md-6 col-md-border"></div>
</div>
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.
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.
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
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:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="offset-6 border-left pl-4">First</div>
<div class="offset-6 border-left pl-4">Second</div>
</div>
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.
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;
}
<div class="container">
<div class="row vdivide">
<div class="col-sm-3 text-center"><h1>One</h1></div>
<div class="col-sm-3 text-center"><h1>Two</h1></div>
<div class="col-sm-3 text-center"><h1>Three</h1></div>
<div class="col-sm-3 text-center"><h1>Four</h1></div>
</div>
</div>
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
.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>
Assuming you have a column space, this is an option. Rebalance the columns depending on what you need.
<div class="col-1">
<div class="col-6 vhr">
</div>
</div>
.vhr{
border-right: 1px solid #333;
height:100%;
}
As #WalterV answered above, changed for Bootstrap 5+:
<div class="row">
<div class="offset-6 border-start border-5">First</div>
<div class="offset-6 border-start border-5">Second</div>
</div>
As of bootstrap v4 you can use this code
<div class="row">
<div class="col-6 span6 border-right">
dummy content
</div>
<div class="col-6 span6">
right div content
</div>
</div>
In bootstrap 5 you can use the classes border-start or border-end.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container text-center">
<div class="row">
<div class="col-sm-6 border-end">
<h3>Column 1</h3>
</div>
<div class="col-sm-6">
<h3>Column 2</h3>
</div>
</div>
</div>
Also the borders will not be seen in extra small devices.
<style>
.vl {
border-left: 6px solid green;
height: 500px;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Vertical Rule </title>
</head>
<body>
<div class="vl"></div>
</body>
</html>
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
I was looking for a vertical divider in Bootstrap 3.3.7 but they're aren't any by default so I wrote a simple one-line div that did the job for me.
See if it works for you.
<div style="display: inline;border-right: 1px solid gray; padding:0 5px;"></div>
Thank you for reading. Cheers.
Bootstrap V5 introduced the .vr class you place on a <div> element.
If needed, place it inside an <li> element to separate elements inside <ul>element.
<ul class="navbar-nav">
<li>Element 1</li>
<li>
<div class="h-100 vr"></div>
</li>
<li>Element 2</li>
</ul>
Note : .navbar-nav class is related to navbars and sets the css property list-style of all children elements to none which is required for the wrapping <li> element to display the vertical rule (separator) correctly.
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;
}