The bar between the cards like lightning - html

Question

how do you think I could put a vertical bar and look like lightning?
For example
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
<h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<hr id="verticalHr">
I have 3 cards like that and between them that hr, how could I make them like lightning?

Answer 1

What you can do is create a pseudo element on the div that immediately follows an hr element and use CSS to make that as high as the div (assuming that is what is wanted) and with whatever background/image/gradients and whatever width you want. I think this will be easier than trying to style and position the hr itself to be vertical and in the right place.
.row {
margin: 2vmin; /* just for this demo */
}
hr {
display: none;
}
hr + div {
position: relative;
}
hr + div:before {
height: 100%;
width: 2vmin;
background-color: black;
background-image: url(https://ahweb.org.uk/lightning.png);
background-size: 100% 100%;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
left: -2vmin;
}
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
<h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<hr id="verticalHr">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
<h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
</div>
I'm guessing at dimensions here so obviously change them to suit and the image of lightning was just a random one from the web. You can put in your own image or use css to draw lines to create a bolt if you prefer.

Answer 2

You could put an SVG image of a lightning bolt between each of your cards. Since you’re using 3 columns for each of your cards, you have 3 columns left over (from the 12 columns Bootstrap provides). You could use two of those columns for lightning bolts.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.bolt {
padding-top: 5rem;
height: 16rem;
text-align: center;
}
.bolt svg {
height: 100%;
}
</style>
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#FFD700;" aria-hidden="true"></i></p>
<h6 class="info-title text-uppercase font-weight-bold text-center">Gold</h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<div class="col-1 bolt d-none d-md-block">
<svg version="1.1" viewBox="0 0 2 19">
<path d="M 2 0 L 1 9 L 2 9 L 0 19 L 1 10 L 0 10 Z" fill="#ff0000" />
</svg>
</div>
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#C0C0C0;" aria-hidden="true"></i></p>
<h6 class="info-title text-uppercase font-weight-bold text-center">Silver</h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> Y. Blake (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> R. Thompson (TRI)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> F. Obikwelu (POR)</p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<div class="col-1 bolt d-none d-md-block">
<svg version="1.1" viewBox="0 0 2 19">
<path d="M 2 0 L 1 9 L 2 9 L 0 19 L 1 10 L 0 10 Z" fill="#ff0000" />
</svg>
</div>
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i></p>
<h6 class="info-title text-uppercase font-weight-bold text-center">Bronze</h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"> De Grasse (CAN)</i></p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> W. Dix (USA)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> M. Greene (USA)</p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
</div>
</div>