What is the best way to define line length in Bootstrap?

I have the following HTML:

.line {
  width: 100%;
  height: 14px;
  border-bottom: 1px solid lightgrey;
  position: absolute;
}

.circle {
  height: 24px;
  width: 24px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202766c726c72">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="align-text-center">
  <div class="row justify-content-center">
    <div class="col-sm-1 text-center">
      <div id="step-1" class="circle">
        <div class="line"></div>
      </div>
      <p>Step 1</p>
    </div>
    <div class="col-sm-1 text-center">
      <div id="step-1" class="circle">
        <div class="line"></div>
      </div>
      <p>Step 2</p>
    </div>
    <div class="col-sm-1 text-center">
      <div id="step-1" class="circle">
        <div class="line"></div>
      </div>
      <p>Step 3</p>
    </div>
  </div>
</div>

This is currently the result:

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

Not part of the code above, but I do know which step is the first and last.

How can I ensure that the line of the last step stays within the circle and doesn't extend beyond it?

htmlcssbootstrap-4

Answer №1

It would be more effective to target the div with an ID or class, but based on your current markup, you can utilize 

.row.justify-content-center div:last-child > div > div
to choose the final 
<div class="line"></div>
and hide it by setting the display to none.

.line {
  width: 100%;
  height: 14px;
  border-bottom: 1px solid lightgrey;
  position: absolute;
}

.circle {
  height: 24px;
  width: 24px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
}

.row.justify-content-center div:last-child>div>div {
  display: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e3f8fff8feedfcccb8a2bca2bc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="align-text-center">
  <div class="row justify-content-center">
    <div class="col-sm-1 text-center">
      <div id="step-1" class="circle">
        <div class="line"></div>
      </div>
      <p>Step 1</p>
    </div>
    <div class="col-sm-1 text-center">
      <div id="step-1" class="circle">
        <div class="line"></div>
      </div>
      <p>Step 2</p>
    </div>
    <div class="col-sm-1 text-center">
      <div id="step-1" class="circle">
        <div class="line"></div>
      </div>
      <p>Step 3</p>
    </div>
  </div>
</div>

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

Adding elements to a roster

Can anyone assist me with appending data from a csv file to an unordered HTML list? The csv file I have contains both single and grouped data for the list, as seen below: Test Group Name A,Test Link Name 1,Test URL 1 Test Group Name A,Test Link Name 2,Tes ...

javascriptjqueryhtml

Every key must be a string or number; received a function instead

I encountered a peculiar situation while working with Cucumber: Scenario Outline: Protractor and Cucumber Test InValid Given I have already...... When I fill the <number> .... Examples: | number|... | 3 |... |4 |... Moreover, I ...

javascripthtmlangularcucumberjs

What is the best way to dynamically swap out an image within an element?

Is there a way to dynamically replace this image without deleting the HTML SVG element and re-rendering it? xlink:href="http://missosology.info/forum/download/file.php?avatar=11666_1307312313.jpg" CODE: https://jsfiddle.net/bfv17f0e/ <svg class="clip ...

javascriptjqueryhtmlsvg

The importance of CSS styling links: the difference between a:link, a:visited and simply using a

Curious about the difference between using: a { ... } versus a:link, a:visited { ... } ...

css

What is the best way to include a div element with a dynamic animation on a webpage?

I'm attempting to create a laser beam that can shoot enemies on the screen, much like in classic games such as Space Invaders or Galaga. However, I am encountering difficulties getting the laser to move when I click the button. Below is the code I hav ...

javascriptjqueryhtmlcss

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

javascriptjqueryhtmlcssnodes

The PHP "include" function seems to be malfunctioning when used inside

Hey there! I'm trying to incorporate an echo statement that includes a variable along with some CSS and an image, but for some reason it's not working as expected. Can anyone lend a hand? <?php if (isset($_POST['sharebutton'])) ...

phphtmlimagecss

Populate the row with an image while maintaining its size

I have encountered an issue with containing images within a Bootstrap row. When I insert an image, it does not stay contained within the row and instead overflows causing scrollbars to appear. My goal is to have the image fit seamlessly into the container ...

htmlcssimagefillresponsive-images

Struggling with combining CSS stylesheets?

I am looking to incorporate the vertical timeline feature from CodyHouse into a project utilizing a Bootstrap template hosted on Github. I have successfully transferred the HTML content, however, there are some complications with the CSS files. The issues ...

csstwitter-bootstrapbootstrap-4

When I try to alter HTML using JS, I encounter an undefined error related to AngularJS

Using this specific function: function adjustContent(elemento){ if (document.getElementById(elemento).innerHTML.indexOf('&#10004;')>0){ document.getElementById(elemento).innerHTML=document.getElementById(eleme ...

javascripthtmlangularjs

Update the text in a personalized dropdown menu when an option is chosen

After spending some time working on a customized dropdown with the use of CSS and Vanilla JavaScript (Plain JS), I encountered an issue while trying to select and update the dropdown text upon clicking an option: window.onload = () => { let [...opt ...

javascripthtmlcssecmascript-6dropdown

Utilize the HTML Tidy executable in combination with PHP, as opposed to compiling it

I have created a PHP application specifically for shared hosting environments. Dealing with the inconsistency of hosts providing HTML Tidy can be challenging for me. Is there a way to integrate the tidy executable directly into my PHP application and proce ...

phphtmlshared-hostingtidy

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

csssassscale

What is the best way to generate a ul-li structure using JSON input and jQuery?

There is a JSON variable present: var links=[{"text":"Home","href":"http://home.com","icon":"fas fa-home","target":"_top","title":"My Home","children":[{"text":"home2","href":"home2.com","icon":"fas fa-chart-bar","target":"_self","title":"home2","category ...

javascriptjqueryhtmljson

Grid is failing to adjust its size to accommodate the width of the items

Is there a way to adjust the width of each grid box based on the content nested inside? For instance, in the case of the second testimonial where the item has a max-width of 500px, but the grid box remains unchanged. I attempted to set widths and max-wid ...

htmlcss

Variability of pixel dimensions on various devices

When it comes to front-end design in CSS, the use of pixels as a measurement is quite common. However, with varying display sizes and resolutions, one might wonder how relevant this fixed pixel size really is. Is there a way to utilize real-world measure ...

cssresponsive-design

The input values are displayed in a continuous line without any breaks between them

I'm currently learning ReactJS and I have created a simple example to practice. The goal is to display each input value (separated by whitespace) in an HTML element (<h1>). However, instead of showing each output value individually, they disappe ...

htmlreactjs

Building a set of multiple choice questions with the flexibility to include two or more options using bootstrap

If you visit https://getbootstrap.com/docs/4.0/components/forms/, you can find code that allows you to create a multiple-choice question with only one choice allowed using the following snippet: <div class="form-check"> <input clas ...

htmlbootstrap-4survey

Learn how to efficiently redirect users without losing any valuable data after they sign up using localStorage

I am currently facing an issue with my sign up form. Whenever a user creates an account, I use localStorage to save the form values. However, if the user is redirected to another page after hitting the submit button, only the last user's data is saved ...

javascripthtml

Image displayed in tooltip when hovering over

I have been experimenting with displaying an image in a tooltip when hovering over it. I came across a fantastic solution that suits my needs: Codepen CSS: @import "compass"; * { box-sizing: border-box; } .tooltip { position: relative; border-bo ...

jqueryhtmlcsstooltipmousehover