vertical divider between two columns in bootstrap
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;
}
How to draw lines through Bootstrap vertical dividers?
First you had a typo in the .dropdown-toggle class.
Then, you are not looking for a vertical divider, which would look like a border, but for a border, and you just need to hide some of it.
Here is your clue :
.navbar .nav > li > a.dropdown-toggle {
position: relative;
bottom: -1px;
z-index: 1005;
background: white;
padding-bottom: 12px;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
/* ... */
border-top: 1px solid #000;
}
The padding-bottom is actually just one more pixel than defined by default.
The other important thing is the position to left or right :
ul.nav li.dropdown:hover ul.dropdown-menu {
/* ... */
left: 0px;
}
I fixed a few other things for better effects, but you have the main idea.
Updated jsfiddle
HTML draw vertical line intersecting two rows bootstrap
You can draw vertical lines going from the bottom and top of each of the circles using after and before pseudo elements.
If these are made long but the containing element given overflow of hidden they join up but don't spill over.
In addition, the first instance has the before pseudo element displayed none and the last pseudo element has the after pseudo element displayed none.
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<style>
.col-md-auto:nth-child(2) {
overflow: hidden;
}
.col-md-auto:nth-child(2) span.fa-stack {
position: relative;
}
.col-md-auto:nth-child(2) span.fa-stack::before,
.col-md-auto:nth-child(2) span.fa-stack::after {
content: '';
background: black;
position: absolute;
left: 50%;
height: 100vh;
width: 1px;
display: inline-block;
z-index: 1;
}
.col-md-auto:nth-child(2) span.fa-stack::before {
bottom: 100%;
}
.col-md-auto:nth-child(2) span.fa-stack::after {
top: 100%;
}
div.row.justify-content-center:nth-child(3) .col-md-auto:nth-child(2) span.fa-stack::before,
div.row.justify-content-center:last-child .col-md-auto:nth-child(2) span.fa-stack::after {
display: none;
}
</style>
</head>
<body>
<div class="container2">
<p style="font-size:64px; color: #555555;text-align:center; font-family: Courier New">Work Expierence and Education
<p>
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="p-2">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern
<p>
<p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2018
<p>
</div>
</div>
<div class="col-md-auto">
<br>
<span class="fa-stack" style="vertical-align: middle;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
<div class="col-6">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy
<p>
<p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test
<p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="p-2">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern 2
<p>
<p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2019
<p>
</div>
</div>
<div class="col-md-auto">
<br>
<span class="fa-stack" style="vertical-align: middle;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
<div class="col-6">
<p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy
<p>
<p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test
<p>
</div>
</div>
</div>How to make a vertical divider between columns the same height in bootstrap?
Just change align-items of #subCategory from flex-start to stretch.
subCategory {
border-right: 1px solid grey;
}
#subCategories {
align-items: stretch;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="subCategories" class="row navbar bg-light">
<div class="col-lg-3 col-4" style="border-right: 1px solid grey">
<h6>BIKES</h6>
<li class="nav-link subCategory">FULL SUSPENSION</li>
<li class="nav-link subCategory">HARDTAIL</li>
<li class="nav-link subCategory">E-BIKES</li>
...
</div>
<div class="col-lg-3 col-4" style="border-right: 1px solid grey">
<h6>EQUIPMENT</h6>
<li class="nav-link subCategory">HELMETS</li>
<li class="nav-link subCategory">PROTECTORS</li>
<li class="nav-link subCategory">GLOVES</li>
<li class="nav-link subCategory">JERSEYS</li>
<li class="nav-link subCategory">PANTS</li>
...
</div>
<div class="col-lg-3 col-4" style="border-right: 1px solid grey">
<h6>PARTS</h6>
<li class="nav-link subCategory">GPS</li>
<li class="nav-link subCategory">LIGHTS</li>
...
</div>
<div class="col-lg-3 col-4">
<h6>FOR THE BIKE</h6>
<li class="nav-link subCategory">SCOOTER PARTS</li>
<li class="nav-link subCategory">BMX PARTS</li>
<li class="nav-link subCategory">TYRES/TUBES</li>
<li class="nav-link subCategory">CHAINS</li>
</div>
</nav>Related Topics
Blurry Text on Chrome When Using CSS -Webkit-Transform
How to Align Panelgrid to Center? Jsf-Primefaces
Ie7 Cause of "Text - Empty Text Node"
Align Text with Bottom as It Comes in During a Chat
Sass 3.2 Media Queries and Internet Explorer Support
Fixed Div Overlaps Scrollbar of Static Div
Hide All Text Except for The First Letter with CSS
Ie7 and "Inherit": Ignoring Entire Rule
Use CSS to Alternate Ul Bullet Point Styles
CSS3 Transition - Change Animation "Anchor Point"
Force Absolute Div to Listen to Parent's Padding
What Is The Definition of "The Baseline of Parent Box"
Setting Font Color of <A> Inside a Li Tag
CSS Transition (Height Property) - Can't Get It to Roll from Bottom
Horizontally Center Absolute Positioned Element Below The Center of Another Element