Search code examples
htmlcssbootstrap-4

How to set 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/[email protected]/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:

Steps

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

How can I make sure that the line of the last step doesn't extend outside the circle?

Solution

  • Targeting the div with an ID or class would be better, but with your existing markup you could use .row.justify-content-center div:last-child > div > div to select the last <div class="line"></div> and set 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/[email protected]/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>