Question 217279 in Html Question posted in
Some basic documentation can be found here.

Html – How to use flex to resize items relatively?

In the script below I am simulating a stepper and I’m using row and col. It looks more or less good.

However, if the page is use on wide screens (eg. lg and xl) the space between the steps is too wide. In other words, the stepper takes the whole width of its container. I would like it to take 60%, 80% or whatever instead. I can use media breakpoints to control this.

I would like that on wider screens, the steps are positioned nearer to each other. Also, there is a problem with the line between steps 3 and 4 as it breaks before.

Would moving from row and col to flex solve my problem? And if yes, how should I do it? Or this there an other alternative?

Note: Displaying on smaller screens is not an issue because in this case I’m hiding the step text.

.row.justify-content-center div:last-child > div > div {
    display: none;
}

.line {
    width: 100%;
    height: 9px;
    margin-left: 16px;
    border-bottom: 2px solid lightgrey;
    position: absolute;
    display: block;
    pointer-events: none;
    cursor: default;
}

.circle {
    height: 16px;
    width: 16px;
    background-color: lightgrey;
    border-radius: 50%;
    display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">

<div class="card cw-480">
    <div class="card-body">
 

   <div class="align-text-center">
      <div class="row justify-content-center">
        <div class="col text-center">
          <div id="step-1" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 1</p>
        </div>
        <div class="col text-center">
          <div id="step-2" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 2</p>
        </div>
        <div class="col text-center">
          <div id="step-3" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 3</p>
        </div>
        <div class="col text-center">
          <div id="step-4" class="circle">
            <div class="line"></div>
          </div>
          <p>Longlonglongstep 4</p>
        </div>
        <div class="col text-center">
          <div id="step-5" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 5</p>
        </div>
        <div class="col text-center">
          <div id="step-6" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 6</p>
        </div>
      </div>
    </div>
    </div>
</div>
Tags:

2

Answers


  1. 0

    The primary issue can be resolved with a simple container element. Bootstrap’s container class (as opposed to container-fluid) results in limited total widths.

    You could also put the card in a centered column of varying widths.

    .row.justify-content-center div:last-child>div>div {
  display: none;
}

.line {
  width: 100%;
  height: 9px;
  margin-left: 16px;
  border-bottom: 2px solid lightgrey;
  position: absolute;
  display: block;
  pointer-events: none;
  cursor: default;
}

.circle {
  height: 16px;
  width: 16px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">

<div class="container">
  <div class="card cw-480">
    <div class="card-body">
      <div class="align-text-center">
        <div class="row justify-content-center">
          <div class="col text-center">
            <div id="step-1" class="circle">
              <div class="line"></div>
            </div>
            
            <p>Step 1</p>
          </div>
          
          <div class="col text-center">
            <div id="step-2" class="circle">
              <div class="line"></div>
            </div>
            
            <p>Step 2</p>
          </div>
          
          <div class="col text-center">
            <div id="step-3" class="circle">
              <div class="line"></div>
            </div>
            
            <p>Step 3</p>
          </div>
          
          <div class="col text-center">
            <div id="step-4" class="circle">
              <div class="line"></div>
            </div>
            
            <p>Longlonglongstep 4</p>
          </div>
          
          <div class="col text-center">
            <div id="step-5" class="circle">
              <div class="line"></div>
            </div>
            
            <p>Step 5</p>
          </div>
          
          <div class="col text-center">
            <div id="step-6" class="circle">
              <div class="line"></div>
            </div>
            
            <p>Step 6</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I added the class for extra large screen and wrote a custom class for the large screen (copied from another stack overflow answer).

    It also solves the problem with the line between steps 3 and 4

    .col-lg-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">
<style>
  .row.justify-content-center div:last-child > div > div {
      display: none;
  }

  .line {
      width: 100%;
      height: 9px;
      margin-left: 16px;
      border-bottom: 2px solid lightgrey;
      position: absolute;
      display: block;
      pointer-events: none;
      cursor: default;
  }

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

  .col-lg-1-5 {
      flex: 0 0 12.3%;
      max-width: 12.3%;
      position: relative;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
  }
</style>

<div class="card cw-480">
    <div class="card-body"> 

   <div class="align-text-center">
      <div class="row justify-content-center">
        <div class="col col-xl-1 col-lg-1-5 text-center">
          <div id="step-1" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 1</p>
        </div>
        <div class="col col-xl-1 col-lg-1-5 text-center">
          <div id="step-2" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 2</p>
        </div>
        <div class="col col-xl-1 col-lg-1-5 text-center">
          <div id="step-3" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 3</p>
        </div>
        <div class="col col-xl-1 col-lg-1-5 text-center">
          <div id="step-4" class="circle">
            <div class="line"></div>
          </div>
          <p>Longlonglongstep 4</p>
        </div>
        <div class="col col-xl-1 col-lg-1-5 text-center">
          <div id="step-5" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 5</p>
        </div>
        <div class="col col-xl-1 col-lg-1-5 text-center">
          <div id="step-6" class="circle">
            <div class="line"></div>
          </div>
          <p>Step 6</p>
        </div>
      </div>
    </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search