Change the mobile step progress bar to be oriented horizontally

I have been working on implementing a step progress bar for the desktop version. I am trying to achieve a horizontal layout similar to https://i.sstatic.net/r8tfz.jpg

Here is the fiddle where you can see my progress - https://jsfiddle.net/Durairaj1696/k1cdmhsj/1/

This is the code I have so far:

<ul class="StepProgress" style="float:left;">
    <li data-target="#myCarousel" data-slide-to="0" class="StepProgress-item active">
                                   </li>
    <li data-target="#myCarousel" data-slide-to="1" class="StepProgress-item">
         </li>
    <li data-target="#myCarousel" data-slide-to="2" class="StepProgress-item">
    </li>
    <li data-target="#myCarousel" data-slide-to="3" class="StepProgress-item">
      </li>
</ul>

Your help and advice are much appreciated!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To create a horizontal list, you can modify your CSS like so:

.StepProgress-item {
    position: relative;
    display: inline-block; // ensure inline block display
    margin-left : 20px; // add left margin
    counter-increment: list;
    font-family: Hellix-SemiBold;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 48px;
    padding-left: 15px;

 }

If you encounter any issues, feel free to reach out for further assistance.

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 best way to ensure that the body element is as large as the html element?

My goal is to have the body extend as the page size increases. I attempted setting the height of the body to 100% and the height of the html element to 100%, but it didn't produce the desired outcome: In this illustration, blue represents the body an ...

htmlcss

Floating navigation bar with cascading menu

I am trying to create a navbar like this: However, my result looks like this: This is the code I used: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht ...

htmlcssmenuwebnavbar

Eliminating excess space beneath nested images while adjusting the size without distorting the image

Struggling with getting an image to scale properly inside a nested div in a fluid layout. Looking for advice on how to prevent the image from becoming smaller than its parent div. EDIT: Here is an updated CodePen link demonstrating that using min-height s ...

htmlcssfluid-layoutfluid-images

Is using the <a> tag in HTML5 detrimental to SEO?

Recently, I've been experimenting with using the <a> tag as a container in HTML5. It's interesting to note that this tag can now have block elements as children. Take a look at this transformation: before (valid XHTML 1.1) <div> ...

htmlseo

Angular offers a simple solution for adding events to all "p", "span", and "h1" elements easily

I am attempting to implement a "double click" event on all text HTML elements (p, span, h1, h2, etc.) across all pages in order to open a popup. I believe there should be a more efficient way than adding (dblclick)="function()" to each individual element. ...

htmlangularevents

Ways to delete a CSS attribute with jquery

Is there a way to eliminate a CSS property from a class without setting it to null? Let's say I have a class called myclass with the property right:0px. I want to completely remove right:0px from my class, not just set it to null. How can I achieve th ...

javascriptjqueryhtmlcss

What is the best way to resize an image to fit neatly within a specified frame?

In my CSS, I have implemented two breakpoints: For iPhones: Only the resume content should be visible without any image - this is working fine. For desktops: The image should be aligned to the left side of the resume content. However, I am encountering a ...

htmlcss

"Utilizing Bootstrap to position the right column at the top on a mobile platform

I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows: A ...

htmlcsstwitter-bootstrap

Using jQuery to create a captivating Parallax Effect on your website's background image

Hey there! I have a div with the class 'section' that serves as a key element on my website. It has a background image set using the following CSS: .section-one { width: 100vw; height: 100vh; background-image: url(images/outside-shot ...

javascriptjqueryhtmlcss

Step by step guide on transferring driver control from the top window to the iframe with the id of mainFrame

Currently, I am utilizing firebug to analyze the xpath. One section of firebug indicates whether the element you are trying to locate is in the window or an iframe, among other options. I have encountered a similar issue where I see 2 available choices: 1: ...

javascriptjqueryhtmlseleniumiframe

Tips for avoiding the freezing of bootstrap-select scroll when a large number of options are present

I have integrated a bootstrap-select with a total of 1000 options. However, I am encountering an issue where when I attempt to scroll down the list of options, it only goes down approximately 60 options and then freezes in that position. Can anyone provi ...

javascripthtmlcsstwitter-bootstrap

Is it possible to insert JavaScript code with the <link> element?

Is it possible to include JavaScript code using the <link> tag on my website? For instance, if I have a JavaScript file named test.js that includes the simple code alert('hello'); Can I trigger a popup window to appear by using the follow ...

htmlcssjavascript

I am in need of assistance with my request for two rows of three images to be solved

Hi everyone, I'm new to learning CSS and I need some help with rearranging this code. I want to display 2 rows of 3 images below the "Section" class, but my attempts using float and position aren't working. Can someone guide me on where I might b ...

htmlcssposition

What is the best way to organize large amounts of data into an array?

I am currently working on developing a unique version of wordle using javascript and html. In order to do this, I require a comprehensive list of all possible wordle words stored in an array format. Although I have the words listed within a document contai ...

javascripthtmlvisual-studio-codewordle-game

Employ JQuery to insert a hyperlink into an array of items

I am currently working on a project where I am using Python to fetch data from a Postgres database. The data is then displayed in an HTML table by iterating through the content. <tbody id="myTable"> {% for item in content %} &l ...

htmljquery

Working with files in JavaScript

Has anyone ever tried to create an HTML file in the same directory using JavaScript? I did some research on Google and came across using ActiveXObject like this: var fso = new ActiveXObject("Scripting.FileSystemObject"); var FileObject = fso.OpenTextFile( ...

javascripthtmlfile-handling

Use the UP key in jQuery to move the cursor upwards within a textarea

When navigating through an HTML form, arrow keys are commonly used to move focus between fields. The following code allows smooth transition for all input elements, but when it comes to textarea where multiple lines can be present, moving the cursor up or ...

javascriptjqueryhtml

How can we refine the user information based on the selection of a radio button?

How do I apply a filter to user details when selecting a radio button? Visit Plunker *I need to display only the questions of authenticated users on the list page, so I created a plunker example. If the user is authenticated or an admin, I want to filter ...

htmlcssangularjsmeanjs

Adding quotes is optional when using the append function

We are retrieving product options from the displayed html using variables PRODUCT_CUSTOM_1_ and PRODUCT_NAME_. Some products have quotations like " and '. However, when we post these strings elsewhere, they get cut off at the ". We need to either remo ...

javascriptjqueryhtmlquotations

Fetching data from a DIV element

I am trying to figure out how to assign a value from a div tag (6.897882999999999, 79.92221100000006) to a PHP variable using the div's id. Can anyone help me with this? Thank you. <form id="mainForm" method="post" action=""> &l ...

phphtmltags