What is the best way to utilize flex for resizing items proportionally?

Within the following script, I am emulating a stepper using row and col. It appears satisfactory.

Nevertheless, when the page is viewed on wide screens (such as lg and xl), the spacing between the steps is excessive. Essentially, the stepper occupies the entire width of its container. I desire for it to occupy 60%, 80%, or some other specified width instead. I can make use of media breakpoints to regulate this.

On wider screens, I would like the steps to be positioned closer together. Additionally, there is an issue with the line between steps 3 and 4 as it breaks prematurely.

Would transitioning from row and col to flex rectify my issue? If so, what is the proper approach to achieve this? Or is there an alternative solution available?

Note: Rendering on smaller screens poses no problem because I conceal the step text in such cases.

.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>

htmlcssbootstrap-4

Answer №1

To address the main issue, a simple container element can be used. By utilizing Bootstrap's container class instead of container-fluid, it limits the total widths.

Another option is to place the card in a centered column with 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>

Answer №2

The additional class was implemented for extra-large screens, and a customized class was created for large screens (taken from a different stack overflow response).

This adjustment also resolves the issue 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>

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

Can you provide me with instructions on how to create a toggle effect for a button using vanilla JavaScript?

Looking for guidance on creating a toggle effect with a button that switches between 2 images. I've managed to get it working with event listeners on btn2 and btn3, but can't seem to implement the 'toggle' effect on btn1. Any insights o ...

javascripthtmlbootstrap-5

Trigger a function upon the addition of a class to a div element | Execute AnimatedNumber()

Is there a way to trigger a function when a specific div receives a certain class? I have an animated div that only appears when scrolling, and once it's visible, it gains the class "in-view". I want to execute a function every time this div has the ...

jqueryhtml

Is there a way to customize the hover effect on this navigation link in Bootstrap that includes a span and an icon from Bootstrap?

<li class="nav-item mt-3"> <a href="#" class="nav-link px-2 d-flex justify-content-start align-items-center"> <i class="nav-icon bi bi-calculator-fill fs-4"></i> ...

htmlcssbootstrap-5

padding applied exclusively to the Bootstrap column when viewed on a large grid

Can padding be added only for the large grid and not for the medium grid? Large grid with padding: <div class="col-lg-4 pl-3"> </div> Medium grid without padding: <div class="col-md-3"> </div> ...

htmlcssbootstrap-4

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'elipsis' }) export class ElipsisPipe implements PipeTransform { transform(text, length, clamp) { text = text || ''; clamp = clamp || '...& ...

javascripthtmlangulartypescriptprimeng

one container stacked on top of another

I have been creating web pages using tables for a long time. Recently, I decided to make the switch to using divs like everyone else, but it has been quite challenging. Can anyone help me solve this issue? I have included an image to better illustrate the ...

csshtml

Modifying selections within a select box generated dynamically using JQuery

Looking for help on how to delegate to a static DOM element in my current situation. I need to create a dynamic select box .userDrop when .addNew is clicked, and then have the user select an option from #secDrop, triggering a change event that calls the da ...

javascriptjqueryhtmldom

The functionality of session_start() is operating smoothly in Firefox, however, it is experiencing compatibility issues

session_start() seems to be functioning properly in Firefox, but is not working in Chrome. I have placed session_start() at the beginning of a file, yet it still fails in Google Chrome. I have implemented a condition in my code where if the session is se ...

phphtmlgoogle-chromefirefox

The iOS website won't fully load until the button is tapped two times

- (IBAction)saveButton:(id)sender { NSURL *yourWebURL = [NSURL URLWithString: webpageURLLabel.text ]; NSURLRequest *webRequest = [[NSURLRequest alloc] initWithURL:yourWebURL]; if ([self checkIfValidURL] == YES) { [webpagePreview loadReq ...

iphonehtmliosuiwebviewnsstring

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

I'm a beginner when it comes to Javascript, and I'm still getting the hang of CSS/HTML. Currently, I am working on creating a vertical menu using CSS and javascript. My goal is to have the sublevels appear on the right side of the menu when someo ...

javascripthtmlcssdrop-down-menumenu

What does the class "md-2n" signify in Bootstrap 4?

Can you explain what 'md' stands for in this context? I understand that 'm' refers to margin, but what about 'd' in the first line of code? Also, what does the 'n' in 'n2' stand for? How is it different fr ...

htmlcssbootstrap-4

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

javascripthtmlioscssxhtml

When is the appropriate time to utilize the style attribute in CSS?

Hey there, I'm in the process of building a website from scratch and I've hit a snag. I understand that using the style tag isn't ideal, but would it be acceptable in this scenario? Is there a more efficient approach? Let's consider t ...

htmlcssstylescoding-style

Tips for adding page numbers to a PDF created from HTML using wkhtmltopdf

Our response: We currently utilize wkhtmltopdf for generating PDFs from a specified html template. A brief overview: We incorporate Sulu CMF in constructing our backend, which is built on Symfony2. The KnpSnappy Bundle acts as a Symfony wrapper for wkht ...

javascripthtmlsymfonypdfpdf-generation

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

Sending a POST request using HTML

Recently, I decided to create a URL Shrinker for fun and followed the Traversy Media tutorial to build it. If you're interested, here's the GitHub link to his project: https://github.com/bradtraversy/url_shortener_service As I aim to turn it in ...

htmlnode.jsmongodbexpress

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

htmlcsscheckboxcross-browser

When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets: HTML < ...

htmlcss

The animation unexpectedly resets to 0 just before it begins

Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping b ...

javascriptjquerycssjquery-animatecss-transforms

Image spotlight effect using HTML canvas

I am currently seeking a solution to create a spotlight effect on an HTML canvas while drawing an image. To darken the entire image, I used the following code: context.globalAlpha = 0.3; context.fillStyle = 'black'; context.fillRect(0, 0, image. ...

htmlimagecanvas