Enhance the connectivity between flex items in Bootstrap by incorporating joining lines

I'm currently developing a "tree" using bootstrap 5, a list of items that can be navigated down into. I'm implementing this using bootstrap 5 and raw HTML.

Here is the HTML structure I have set up:

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

However, I would like to include lines between these items as shown in the following image:

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

I've attempted to create custom CSS for this, but I'm stuck and unable to achieve the desired result. I couldn't find any guidance on this in the bootstrap documentation.

The HTML code for this structure is as follows:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6abb6aa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>

htmlcssbootstrap-5

Answer №1

You have the option to create an upper border for your levels, excluding the first one. Instead of using brs, you can divide a div into sections equal to the number of parents, each section further divided into two with borders separating them. This aligns with your desired outcome, providing a good proof-of-concept. To enhance this solution, a "before" level can be added in the future.

.newline {
    height: 30px;
    width: 100%;
}

.pc-50 {
    border-left: 1px solid blue;
    width: 50%;
}

.newline:not(.lower) > div div:not(.outsider) {
    border-bottom: 1px solid blue;
}

.pc-33 {
    width: 33.33%;
}

.pc-20 {
    width: 20%;
}

.pc-50.left {
    border-left: none;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e15081509">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-around first">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class="d-flex newline">
    <div class="d-flex pc-50 left">
        <div class="pc-50 left outsider"></div>
        <div class="pc-50 left"></div>
    </div>
    <div class="d-flex pc-50">
        <div class="pc-50 left"></div>
        <div class="pc-50 left outsider"></div>
    </div>
</div>
<div class="d-flex newline lower">
    <div class="d-flex pc-50 left">
        <div class="pc-50 left outsider"></div>
        <div class="pc-50"></div>
    </div>
    <div class="d-flex pc-50 left">
        <div class="pc-50 left"></div>
        <div class="pc-50 outsider"></div>
    </div>
</div>
<div class="d-flex justify-content-around">
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
    <div class="p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
... (repeated blocks of code and flex items)

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

How can I prevent the jQuery animation from moving elements by adjusting the border?

I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase. $(document).ready(function(e) { ...

javascriptjqueryhtmlcss

I am unsuccessful in transferring the "side-panel content" to the side panel located on the main menu page

I am facing an issue where I want to pass My left and right Panel to the main menu page (dashboard), but it is not working as expected. The problem arises because the first page that needs to be declared is the login page (/ root) in my case. If I pass it ...

javascripthtmlcordovavue.jshtml-framework-7

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage

Is it feasible to create a doughnut chart with curved edges?

My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful. https://i.sstatic.net/Rq6Lx.jpg I want each segment to have fully rounded corners, which presents a unique challenge. ...

javascriptcsssvgchartshtml5-canvas

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

javascripthtmlcss

overlay the div or image with a translucent color

I have a div containing an image with the results from my database, carefully designed and positioned within each div. However, I would like to highlight certain results by overlaying them with a color. I am seeking a method to achieve this effect withou ...

css

Show all span elements in a map except for the last one

Within my ReactJS application, I have implemented a mapping function to iterate through an Object. In between each element generated from the mapping process, I am including a span containing a simple care symbol. The following code snippet demonstrates t ...

cssreactjstypescriptsass

Unsupported MIME format

I'm encountering an issue where my stylesheet is not applying to my handlebars. It was working fine yesterday, but today I'm seeing a MIME error and I'm unsure of the reason behind it. Any assistance would be greatly appreciated. Server Cod ...

cssnode.jsexpress

Adjust the font size in CSS based on a specified range of values

When the screen size is small (mobile), the font size is fixed at 14px. On really large screens, the font size is set to 18px, ensuring it never goes below 14px or above 18px>. This is achieved using media queries.</p> <p>However, for the i ...

cssfont-size

Eliminating white space - A CSS and HTML page with no room for gaps

After finally getting my website up and running using style.css, I am faced with the following CSS code: html { height:100%; } { position: relative; z-index: 0; width: 100%; left: 0; top: 0; cursor:default; overflow:visible; } body { ...

htmlcss

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid? I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) a ...

csshtml

Using CSS to create a color combination of black with varying opacities

I attempted to achieve a black color by blending together the colors red, yellow, and blue in CSS, but encountered an issue... Is there a way to create black color using opacity? ...

htmlcss

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

javascriptjquerycss

Whenever I create a new JavaScript application, the CSS files do not seem to reflect the most recent changes

My Next.js App is running smoothly on my client when I do npm run build and test it with node server js. However, the issue arises when I move the app to a production server. After executing npm run build on the server, everything seems to work fine except ...

cssnode.jsnext.js

Firefox and Internet Explorer have a tendency to break lines at very specific pixel measurements

Hey, I have a situation that goes like this: I have 4 objects with dimensions of exactly 76x76px placed within a 320px container. This setup seems to work well in Chrome as seen above. However, in Firefox and IE9, it looks like this: even though the < ...

htmlcssimagehtml-lists

Unusual actions from the jQuery Steps extension

I am currently utilizing the jQuery Steps plugin (FIND IT HERE). The issue I'm facing lies within an IF statement that is causing the wizard to return to the first step instead of staying on the current indexed step. While all other IF statements are ...

javascriptjqueryhtml

The CSS navigation bar is not properly aligned in the center

This menu was constructed by me: JSBIN EDIT ; JSBIN DEMO Upon closer inspection, it appears that the menu is not centered in the middle of the bar; rather, it is centered higher up. My goal is to have it positioned lower, right in the middle. I ...

javascripthtmlcss

Triggering JavaScript Function When Scrolling in Overflowed DIV

After using jQuery and searching for various ways to make this script work, I finally found a solution that works for my index.html file. <div style="overflow-y:scroll; height:300px"> <div style="background-color:black; height:500px"> </div ...

javascriptjqueryhtml

The static sidebar on glass-themed website built with Bootstrap 5 is malfunctioning

Greetings Esteemed Developers I am a newcomer to web development and I have been practicing. However, I encounter difficulties with my CSS at times. Today, I have a query for you all; I am trying to create a fixed sidebar but I am facing challenges. Despit ...

jquerycssoverflowsidebarbootstrap-5

What steps should be taken to address IE6 problems when a website functions properly in other browsers?

If you come across a website that functions perfectly on all browsers except for IE6, where the layout is extremely distorted but rebuilding the entire markup is not an option. Furthermore, only CSS selectors supported by IE6 are being utilized on the sit ...

cssxhtmlinternet-explorer-6cross-browser