Tips for altering the distance between dots on a line

.ccw--steps {
  margin: 10px auto;
  position: relative;
  max-width: 500px;
}

.ccw--step-dot {
  display: inline-block;
  width: 15px;
  border-radius: 50%;
  height: 15px;
  background: blue;
  border: 5px solid #e8e8e8;
  position: relative;
  top: -8px;  
}

.ccw--step-bar {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 3px;
  background: red;  
  width: 410px;
}
<div class="ccw--steps">
  <div class="ccw--step-bar">
  </div>
  <div class="row">
    <div class="col-8">
      <div><span class="ccw--step-dot"></span><span class="ccw--step-title">A</span></div>
    </div>
    <div class="col-2">
      <div><span class="ccw--step-dot"></span><span class="ccw--step-title">B</span></div>
    </div>
    <div class="col-2">
      <div><span class="ccw--step-dot"></span><span class="ccw--step-title">C</span></div>
    </div>
  </div>  
</div>

Below is the output of the HTML and CSS provided:

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

How can I adjust the layout to add spaces between all the dots as shown below?

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

htmlcss

Answer №1

To enhance my design, I will incorporate a white background into the .cma--step-dot::before element.

.cma--steps {
  margin: 10px auto;
  position: relative;
  max-width: 500px;
}

.cma--step-dot {
  display: inline-block;
  width: 15px;
  border-radius: 50%;
  height: 15px;
  background: blue;
  border: 5px solid #e8e8e8;
  position: relative;
  top: -8px;
}
.cma--step-dot:before {
  content:"";
  display:block;
  width: 24px;
  border-radius: 50%;
  height: 24px;
  background: white;
  position:absolute;
  top: -10px;
  left:-10px;
  z-index:-1;
}

.cma--step-bar {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 3px;
  background: red;  
  width: 410px;
  z-index:-1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cma--steps">
  <div class="cma--step-bar"></div>
  <div class="row">
    <div class="col-8">
      <div>
        <span class="cma--step-dot"></span>
        <span class="cma--step-title">A</span>
      </div>
    </div>
    <div class="col-2">
      <div>
        <span class="cma--step-dot"></span>
        <span class="cma--step-title">B</span>
      </div>
    </div>
    <div class="col-2">
      <div>
        <span class="cma--step-dot"></span>
        <span class="cma--step-title">C</span>
      </div>
    </div>
  </div>  
</div>

Answer №2

To enhance the appearance of the dots, consider applying a margin to their class. The margin can be added to either the right, left, or both sides based on their position.

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

Ways to substitute numerous instances of a string in javascript

I have experience in developing websites using reactjs. I usually implement restAPI's with java and work with liferay CMS. In one of my projects, I created a shortcode for accordion functionality like this: ('[accordion][acc-header]Heading 1[/ac ...

javascripthtmlreactjsliferay

Why does HTML validation matter after the webpage has finished loading?

After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...

htmlw3c-validation

Highlighting menu elements when landing on a page and making another menu element bold upon clicking in WordPress

I've been searching extensively for a solution to this issue. I'm trying to make the menu item DE appear bold when entering the site, and if I click on EN, I want DE to return to normal (thin) font while EN becomes bold. You can find the site he ...

javascriptcsswordpressmenubold

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Only need one dot for the calculator to function properly. The current situation with multiple dots is causing confusion. I intend to address other aspects of the code later, but I'm currently struggling with this issue. function dec(d) { let ...

javascripthtmlcss

Ways to connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS. Instead of using :hover, I utilize :focus ...

htmlcsshyperlinkfocustabindex

Tips for inserting a value into an HTML field using ASP.NET code behind

Recently, I created an application in JavaScript by utilizing HTML fields in ASP.NET. Due to some issues with the IDs, I had to resort to using HTML fields instead of ASP text boxes. Surprisingly, the HTML fields are functioning well with JavaScript. Now ...

c#asp.nethtmlvisual-studio

Clicking with jQuery to float left and then bringing back

I have written this JavaScript code that is supposed to float the address div to the center when you click on the info panel using the "addressmoved" class. Challenges However, when I click on the trigger button, instead of the address div moving to the ...

jqueryhtmlcssajaxonclick

Delete any content that is not enclosed in tags

I am struggling with manually rendering Django forms and it's producing the following code. Is there a way to remove text without HTML tags, such as "Currently:" and "Change:", which are difficult to style with CSS? <div class="row align-cente ...

htmlcssdjangodjango-forms

How can a functional component be created in VueJS using x-templates?

Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...

javascripthtmlvue.js

Using conditional statements in CodeIgniter to display various menus

I encountered an issue with a variable in my code. When I attempt to retrieve its value, it shows up as undefined despite having stored the session of the variable "$level" and passing it to the view. I find it strange that the condition of the variable tu ...

phphtmlcodeigniterif-statement

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...

javascripthtmlangularjscheckbox

Encountering insurmountable obstacles in accessing AliExpress

I'm looking to extract specific information from aliexpress using scrapy and selenium. However, I've encountered an issue where the HTML code appears differently when inspecting with Chrome compared to viewing the source. It seems that the conte ...

pythonhtmlscrapyaliexpress

Verifying the "select" dropdown option prior to final submission

My website features multiple select dropdowns that require validation before submission. For instance, there may be a situation where seven select dropdowns are present as described below. My desired validation criteria is: If there are 5 or more "sel ...

javascriptphpjqueryhtml

How can jQuery be used to display the size and type of linked files in title attributes?

For instance: Prior to <a target="_blank" href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"> Adobe Reader JavaScript specification </a> As the file is in PDF format, the title should read title="PDF, 93KB, opens in a new ...

jquerycssxhtmlaccessibility

Using Bootstrap to embed YouTube videos results in a sleek, modern design with distinctive black

When my screen is maximized on Chrome, I notice irritating black lines appearing on my responsive Youtube embeds. Unfortunately, I am unable to post an image due to lack of reputation. Specifically, when the video is paused, there is a slim black line at ...

htmlcsstwitter-bootstrapyoutube

Obtain the URL value using jQuery and place it inside a <span> element

How can I insert a href value into the span tag like this? <p class="name"> <a download="adja-lo.pdf" title="adja-lo.pdf" href="http://localhost/MatrixDRSnews/apps/Matrix/server/php/files/adja-lo.pdf">adja-lo.pdf</a> </p> ...

javascriptjqueryhtmlhref

The Angular 7 template falls short of occupying the entire page

I am currently working on converting an HTML page into my Angular project. While it functions correctly in the HTML version, it does not fill up the entire page when transferred to Angular. You can view an example of this issue on StackBlitz at the followi ...

cssangularangular7

Using div elements to mimic the layout of tables with row spans

<div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> .box1 { border: 1px solid red; float: left; width: 20px; } .box2, .box3 { ...

css

Discovering the clicked element using JavaScript: A complete guide

Let me start by saying that I have come across similar posts about tracking event listeners, but in my specific case, I am struggling to figure it out. While I am familiar with the event.target property, I just can't seem to make it work. Here is a s ...

javascripthtmlcssevent-handling