The divider amidst the cards zapping like electricity

Is there a way to create a vertical bar that resembles lightning? Something like this:

https://i.sstatic.net/biEGb.png

<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 set up like this and I want to make them look like lightning, how can I achieve this effect?

htmlcssbootstrap-4

Answer №1

If you want to create a vertical line next to an hr element using CSS, one way to do it is by adding a pseudo-element to the div that comes after the hr. This pseudo-element can be styled with a height equal to the div's height, along with background properties of your choice. This approach may be simpler than trying to directly style and position the hr element itself.

.row {
  margin: 2vmin; /* adjust as needed */
}

hr {
  display: none; /* hide original hr */
}

hr + div {
  position: relative;
}

hr + div:before {
  height: 100%;
  width: 2vmin; /* set desired width */
  background-color: black; /* customize background */
  content: ''; /* necessary for pseudo-element */
  position: absolute;
  top: 0;
  left: -2vmin; /* adjust position */
}
<div class="row d-flex justify-content-center">
  <!-- Your existing HTML code here -->
</div>

Feel free to modify the dimensions and styling properties to fit your design needs. The lightning image used in the example is just a placeholder, so you can replace it with your own image or use CSS techniques to draw custom elements like bolts if preferred.

Answer №2

To add some visual interest, consider inserting an SVG lightning bolt graphic in between each of your cards. With 3 columns dedicated to each card, you have 3 remaining columns available within Bootstrap's 12-column layout. Utilize two of these columns for the lightning bolts.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f2e8f0e8f6">[email protected]</a>/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>
...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the art of spinning a div?

Looking to add an interactive circular div on my website that can be spun like a wheel of fortune using the mouse. I tried using jQuery drag without success in rotating the div. Is there a method to rotate div elements with the mouse? It would also be awe ...

jquerycsscss-transitions

Button to save and unsave in IONIC 2

I am looking to implement a save and unsaved icon feature in my list. The idea is that when I click on the icon, it saves the item and changes the icon accordingly. If I click on it again, it should unsave the item and revert the icon back to its original ...

javascriptandroidhtmlangularjsionic2

Achieving Proper Alignment of Dropdown Menu in CSS

Currently, I am tackling the challenge of creating a responsive navigation bar. Despite my numerous attempts to troubleshoot, I am struggling to find a solution. My current issues are as follows: 1) On wide screens, I aim to center the dropdown menu benea ...

htmlcssdropdownnavigationbar

Guide on how to include an .env file within an HTML script tag?

I am trying to protect my API Key when sending a request to the server by storing it in an .env variable. However, I am unsure how to access this variable within a script tag in HTML. Can anyone provide guidance on how to achieve this? ...

htmlnode.js

Remove the </div> text and replace it with nothing

I'm attempting to substitute the end tag div with an empty string. Here is my code: $('#textDiv').html().replace(/'</div>'/g,'').replace(/<div>/g,'\n') This is the HTML: <div id='tex ...

javascriptjqueryhtml

Automatically populate the checkbox with the specified URL

Is it possible to pre-fill a checkbox in an HTML form using the URL? For example, if we have a URL like www.example.com/?itemname=sth Would there be a similar method to pre-select a checkbox via the URL? <ul class="list-group"> <li c ...

phphtmlurlcheckbox

The modal is functioning perfectly with the initial row in the table

Is there anyone who can help me fix this issue? I've spent a lot of time trying different solutions, but none of them seem to work. I'm using a tailwindcss template for the modal and JavaScript to show or hide it. I'm having trouble findin ...

javascripthtmljquerylaravel

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. https://i.sstatic.net/XIeiQ4E ...

htmlcssangular

Finding and choosing a date from an ng-model datepicker using Selenium Webdriver - a guide

I am encountering an issue where I can open the date picker pop-up calendar with a click, but I cannot select a specific date from it. This is due to the input field being read-only, which means that any input provided through sendkeys or JavascriptExecuto ...

jqueryhtmlangularjsseleniumselenium-webdriver

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Having some trouble setting up Angular with SCSS and Bootstrap. When attempting to run ng serve, I encountered the following error: ./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ...

cssangularsassbootstrap-5

Is there still a need to preload dynamic images in the background?

Imagine you have HTML code that includes an image with a placeholder: <img class="lazy-load" src="http://via.placeholder.com/150/?text=placeholder" data-src="http://via.placeholder.com/150/?text=real%20image"/> At some stage, you want to implem ...

javascripthtml

Encountering the error message "Unable to access property 'addEventListener' of null while trying to manipulate innerHTML"

Currently, I am utilizing innerHTML to include certain elements and a wrapper around them. for (i = 0; i < arr.length; i++) { b.innerHTML += "<div class='wrapper'><div class='col-4'>" + arr[i].storeID + "</div> ...

javascripthtml

Adjustable image scaling with dynamic maximum height

Instead of trying to explain the problem I need to solve, let me show you an example for better clarity (apologies to mobile users, this may not work...) You can observe the effect I am aiming for on VICE news () While resizing the browser, notice how th ...

htmlcssimageresponsive-designscaling

The functionality of Wow.js seems to be malfunctioning. Could this be due to incorrect initialization or script calls?

I'm facing some difficulties implementing wow.js into my HTML code. Could it be due to missing script loads or incorrect script loading? Is there a chance I'm not initializing wow.js properly? Although the nav part won't be utilizing animati ...

javascripthtmlanimate.csswow.js

when a div contains another div and is then followed by another div, apply the following style

Is there a way to create a rule that functions like the following: .container .unit:first-child(if it contains div.box1.extra) + .box2 { top: 50px;} <div class="container"> <div class="unit"> <div class="box1 extra"><!-- co ...

htmlcss

What is the process for submitting a form from a different webpage?

I am working on a website with two pages. Each page has a header with navigation tabs to move between page 1 and page 2. When a tab is clicked, I want the selected page to re-POST to the server for a quick refresh before displaying. There is a form on e ...

javascriptjqueryhtmlforms

Leveraging AngularJS to enhance the dynamic HTML content within Datatables

My angular application includes a Datatable where I alter cell content to include HTML elements. In the given code snippet, I specifically modify the cell content of the 5th column to incorporate links. Additionally, I intend to implement a tooltip featur ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Which takes longer to render: individually drawn images placed via absolute positioning, or one complete image?

I currently have a collection of "cards" on my website that are jpg images, but I am considering switching to an HTML/CSS solution. This change would involve placing numerous small icons on a background and adding stylish text on top. My concern is determ ...

htmlcss

Need help automating clicking the download csv button with Selenium Python, but the button's class name changes when it's hovered over?

While attempting to save a csv file by clicking the download csv button on a website, I encountered an issue. It seems that the .click() action is not functioning as expected, and upon inspection, I noticed that the class-name of the button changes from &a ...

pythonhtmlseleniumcsvgoogle-colaboratory

Ways to establish a specific minimum width for a container and disregard small breakpoints in Bootstrap 5

I want to set a fixed minimum width for a container while ignoring small sizes like sm and xs. Basically, when the screen size is less than 960px, I want the width to be fixed and only display a scroll. This is the code I have: <div class="contain ...

cssbootstrap-5