What is the method for producing a vertical line of numerical dots utilizing CSS?

I am looking to add thick dots at specific locations along the vertical line between [div class="col-md-4"] and [div class="col-md-8"].

Here is what I have attempted:

<div class="col-md-4" style="border-right:1px solid #333;">
<h1>1987</h1><p>lorem ipsom .........</p>
<h1>1990</h1><p>lorem ipsom .........</p>
<h1>1998</h1><p>lorem ipsom .........</p>
</div>

<div class="col-md-8">
description
</div>

The code successfully created a vertical line between classes 4 and 8, but now I also want to display thick dots above this vertical line for each year. How can I achieve this?

htmlcssbootstrap-4

Answer №1

Here is a suggested way to structure your HTML:

<div class="timeline">
    <div class="timeline__item">
        <div class="timeline__item__date"> 1995 </div>
        <div class="timeline__item__text"> lorem ipsom </div>
    </div>
    <div class="timeline__item">
        <div class="timeline__item__date"> 2005 </div>
        <div class="timeline__item__text"> lorem ipsom </div>
    </div>
    ...
</div>

To apply the CSS effectively, consider the following:

.timeline__item {
    position: relative;
    width: 100%;
}

.timeline__item::before {
    /* Required for rendering ::before pseudo-element */
    content: '';

    /* Positioning the element */
    position: absolute;
    left: 0; top: 50%;
    transform: translate(xvalue , -50%); /* Adjust xvalue to reposition horizontally */

    /* Create a colored circle */
    width: 5px; height: 5px;
    background-color: currentColor;
    border-radius: 50%;
}

To move the dot from the left side to the right side of .timeline__item, change 

.timeline__item::before { left: 0; }
to 
.timeline__item::before { right: 0; }
.

This setup should help you get started on the right track. Feel free to ask more specific questions for further guidance.

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

The bootsrtap modal appears to be invisible and is not displaying on the screen

Having trouble implementing a code to display a bootstrap modal upon clicking a button. The modal is not showing up for some reason. Here is the code snippet: <button type="button" id="asd" data-toggle="modal" data-target= ...

javascripthtmlbootstrap-4

What is the best way to add a line next to a specific word in a

For my report, I need to create multiple lines with automated dashes without having to use the SHIFT plus underscore keyboard shortcut. I searched for a solution but couldn't find anything that addressed my specific issue. I envision something like t ...

htmlcss

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

phpjavascripthtmlcssgoogle-chrome-extension

Leveraging HTML and PHP for integrating date and mobile number functionalities

I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...

javascriptphphtmlmysql

Creating Interactive Graphs with HTML and JavaScript: A Guide to Dynamic Graph Drawing

I am seeking to create a dynamic graph using standard HTML, JavaScript, and jQuery (excluding HTML5). The nodes will be represented by divs with specific contents, connected by lines such as horizontal and vertical. The ability to add and remove nodes dyn ...

javascriptjqueryhtmlgraph

Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

Context To many, this situation might appear to be repetitive. However, I assure you that it is not. My objective is to import html data into a WebView, while being able to intercept user hyperlink requests. During this process, I came across this helpfu ...

javascriptandroidhtmlcsswebview

rely on a fresh event starting at one

Despite my limited knowledge in javascript, I managed to create a simple js calendar that I am quite proud of. However, I have been facing a challenge for the past few days. You can view my calendar here: https://jsfiddle.net/ck3nsemz/ The issue I'm ...

javascripthtmlcss

Display the content alongside the UI Bootstrap tabset tabs

Just starting out with bootstrap and looking to implement the vertical tabset for my project. Here's a basic outline of what I have in mind: <tabset vertical="true" type="tabs"> <tab heading="Vertical 1">Vertical content 1</tab> & ...

cssangularjstwitter-bootstrapuser-interface

issues with adding class to div element

I have a div section that contains various movie items and overlay elements. <div class="overlay"> <a title="yes" href="#"><div class="yes"></div></a> <a title="no" href="#"><div class="no"></div>< ...

jqueryhtmlajax

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

javascripthtmlcsstypescript

Distinguishing Between ReactDOM.render and React Component Render

As I delve into learning React, I have come across the render() method being used in two different ways: Firstly, it is used with ReactDOM.render() ReactDOM.render( < Test / > , document.getElementById('react-application') ); Sec ...

javascripthtmlreactjs

The options in the drop-down menu appear to be stuck and remain in place

Can someone with expertise lend me a hand? I've been racking my brain over this issue, and while I feel like I'm on the right track, I just can't seem to make my sub-sub menu items drop down to the right on hover. I suspect there might be c ...

htmlcssdrop-down-menu

PHP code not functioning properly due to div tag

How can I style a sentence within PHP using echo to display a div? The CSS seems correct, but the styling is not being applied. I believe there might be an issue with how I am calling a div within PHP. Can you please provide some advice? This is what I ha ...

phpcss

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

Utilizing Three.js in your HTML code

Currently, I am using c9.io as my IDE to write and test code for a website. Despite my efforts to import the code outside of c9.io, it is still not functioning properly. (I am confident that the issue is not with the three.js script itself.) My HTML code c ...

javascripthtmlthree.js

Change the body selector in CssResource to apply custom styles

I have implemented a CssResource within a ClientBundle following the guidelines provided in the documentation at this link. To access the styles from my UiBinder xml, I have used ui:with as explained in the documentation available at this guide. While th ...

cssgwt

Real-time Exchange of HTML Data Forms

Hey everyone, I am completely new to programming and I would really appreciate your guidance through this process. Let's imagine a scenario where two users need to communicate through HTML forms. The first user fills out an HTML form (first name, la ...

javascriptjqueryhtmlajaxforms

Issues with pop-up windows on YII2 gridview

I am currently developing a web application using the Yii2 framework for my company to efficiently manage their storage. I have incorporated various plugins from kartik-v to enhance the functionality of the application. However, I am facing an issue with i ...

javascriptphphtmlyii2yii2-advanced-app

Is there a way to automatically play videos without any audio?

Is there a way for my video to automatically start playing when the page loads, without sound? I want it to function similar to the video on this webpage: . I've experimented with various jQuery, JavaScript, and CSS techniques from online resources, ...

javascripthtmljquery

Steps for aligning an image and text within an icon next to each other

I'm looking to align a small PNG image next to some text within an icon. How can I achieve this? Currently, they are stacked vertically. Here is the current layout - I want the two elements side by side instead. The structure of the division is unique ...

javascriptcssfrontend