How can I achieve a full-width stepper in Bootstrap?

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/vendor/fontawesome/css/all.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/stylesheets/custom.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/vendor/open-iconic/css/open-iconic-bootstrap.min.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/stylesheets/theme.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- .card -->
<div class="card">
  <<!-- .card-body -->
  <div class="card-body">
    <<!-- .progress-list -->
    <ol class="progress-list mb-0 mb-sm-4">
      <li class="success">
        <button type="button">
        <!-- progress indicator -->
        <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 1</span>
      </li>
      <li class="success">
        <button type="button">
        <!-- progress indicator -->
        <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 2</span>
      </li>
      <li class="active error">
        <button type="button">
        <!-- progress indicator -->
     <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 3</span>
      </li>
      <li>
        <button type="button">
        <!-- progress indicator -->
        <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 4</span>
      </li>
      <li>
        <button type="button">
         <!-- progress indicator -->
         <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 5</span>
      </li>
    </ol>
    <!-- /.progress-list -->
  </div>
  <<!-- /.card-body -->
  <<!-- .card-body -->
  <div class="card-body">
    <p> Earum temporibus consequuntur facilis iste obcaecati soluta, inventore, vero labore accusantium in commodi eaque, similique necessitatibus ab dolorem non repudiandae pariatur culpa! </p>
  </div>
  <<!-- /.card-body -->
</div>
<<!-- /.card -->

I am presenting a fiddle:

https://jsfiddle.net/47cpaor3/1/

My goal is to make the stepper full width.

I attempted changing:

<ol class="progress-list mb-0 mb-sm-4">

to 

<ol class="progress-list mb-0 mb-sm-4" style="width: 100%">

but this approach did not yield the desired outcome.

How can I extend the stepper to occupy full width?

htmlcsstwitter-bootstrap

Answer №1

Feel free to utilize the following code snippet for your project:

.progress-list>li {
    position: relative;
    width: 100%;
    text-align: left;
}
.progress-list>li:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10%;
    margin-top: -1px;
    width: 100%;
    height: 3px;
    background-color: rgba(34,34,48,.1);
}
.progress-list .progress-label {
    display: inline-block;
    position: absolute;
    top: 1.75rem;
    left: 16%;
    transform: translate3d(-50%,0,0);
    font-size: .875rem;
    color: #888c9b;
}

Answer №2

After putting borders on the elements and adjusting padding for progress-card, I am uncertain about any other modifications you may want.

.card {
  border: solid blue 1px;
}

.card .card-body.progress-card {
  border: solid red 1px;
  padding-left: 0;
  padding-right: 0;
}

.card .progress-list {
  border: 1px solid lime;
}

.card .progress-list .success,
.card .progress-list .error,
.card .progress-list>li {
  border: 1px solid pink;
}


/*
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
*/
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://uselooper.com/assets/vendor/fontawesome/css/all.css" rel="stylesheet" />
<link href="https://uselooper.com/assets/stylesheets/custom.css" rel="stylesheet" />
<link href="https://uselooper.com/assets/vendor/open-iconic/css/open-iconic-bootstrap.min.css" rel="stylesheet" />
<link href="https://uselooper.com/assets/stylesheets/theme.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-body progress-card">
    <ol class="progress-list">
      <li class="success">
        <button type="button"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 1</span>
      </li>
      <li class="success">
        <button type="button"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 2</span>
      </li>
      <li class="active error">
        <button type="button"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 3</span>
      </li>
      <li>
        <button type="button"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 4</span>
      </li>
      <li class="">
        <button type="button"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 5</span>
      </li>
    </ol>
  </div>
  <div class="card-body">
    <p> Earum temporibus consequuntur facilis iste obcaecati soluta, inventore, vero labore accusantium in commodi eaque, similique necessitatibus ab dolorem non repudiandae pariatur culpa! </p>
  </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

The key to highlighting the search terms in bold format

How can I highlight the search terms entered by users in the search box? I want all keywords in every search result to be bolded. For example, when a search term is entered and the results page displays all results with the typed term in bold within each ...

phpcsssql

The white-space property disrupts the normal width of elements

My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow ...

htmlcssoverflowword-wrap

Tips for enabling the background div to scroll while the modal is being displayed

When the shadow view modal pops up, I still want my background div to remain scrollable. Is there a way to achieve this? .main-wrapper { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; overflow-x: hidden; ...

javascripthtmlcss

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

javascripthtmlcssevents

Aligning a navigation bar with a hamburger menu in the center

I recently implemented a hamburger menu with some cool animations into my site for mobile devices. Now, I am facing the challenge of centering the menu on desktop screens and it's proving to be tricky. The positioning is off, and traditional methods l ...

javascripthtmlcssresponsive-design

Applying CSS to both pop-up and desktop interfaces can be achieved through the use of media queries or alternative solutions

I am facing a dilemma where I need to display the same content on both a pop-up and desktop view. While I have already implemented media queries to adjust the content for desktop and mobile views, I am struggling with displaying the same content on a pop ...

csssasspopupmedia-queries

The internet browser encountered a JavaScript runtime error (0x800a138f) in which it was unable to retrieve property '0' due to it being either undefined or pointing to a

I'm encountering an issue with my javascript/jquery function that retrieves the selected dropdown value. Everything works fine in Chrome, but when I try to run my application in IE, it throws an error. $("#Application_AppCountries").change(function ( ...

javascriptjqueryhtmlasp.net-mvc

Blur effect on backdrop-filter causing shadowy inset borders (specific to Chrome and Windows)

Note: The issue mentioned below has been resolved in the latest version of Chrome (119.0.6045.200). While transitioning on backdrop-filter, I have observed a dark inset shadow that is only visible during the transition. This behavior seems to occur only ...

csscss-transitionscss-filters

CSS error with contrasting colors, the reason behind it is unknown

Here is the code snippet I am working on: I have set the background color to #f1f5ff and the font color to #181818. Despite thinking that the contrast is good, I am still encountering an error where the text is not visible. I have tried changing 'c ...

htmlcss

Showing an image stored in an array using JavaScript

This script is designed to pull images from a specific location on an HTML page. images = new Array(); images[0] = new Image(); images[0].src = "images/kate.jpg"; images[1] = new Image(); images[1].src = "images/mila.jpg"; document.write(images[0]); I&a ...

javascripthtmlarraysimage

I require varying numbers of columns on each row based on the breakpoint in Bootstrap4

After realizing it was easier than expected, I simply consolidated all columns into one row and the responsiveness now works perfectly. Thank you to everyone who helped. I am utilizing Bootstrap 4 grid system to structure 3 rows with columns. For lg brea ...

csssassflexboxbootstrap-4

Steps to obtain an Element binding from a Svelte component

Is it possible to retrieve the bounding client rect of an anchor element? I typically mark this using the syntax bind:this={someVariable}. However, when I add this code to a Svelte component, I receive a different object that Svelte uses to represent a c ...

javascripthtmlsvelte

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

What is the best way to add animation to switch between table rows?

I am looking to add animation effects when table rows appear and disappear. Initially, I attempted using a CSS transition, but it did not work due to the change in the display property. Subsequently, I opted for an animation, which provided the desired o ...

csscss-transitionscss-animations

Showing data in table cells using CSS styling

I am working with multiple HTML tables that contain embedded Ruby code. The structure is as follows: <% loop-1 %> <table> <tr> <td rowspan=" X ">abcd</td> <td>xyz</td> </tr> <% loop- ...

htmlhtml-table

What is the best way to showcase data from input fields within a bootstrap modal dialog?

After the user has entered their details and clicks submit, I would like to present the information in a Bootstrap modal with a confirmation button below. This serves as a preview of the data before it is saved to the database. Here's what I have so ...

javascriptjqueryhtmltwitter-bootstrap

Achieving consistent height for Bootstrap5 columns: A simple guide

I'm currently utilizing Bootstrap5 and I am interested in adjusting the height of these two columns to be similar. Is there a way to achieve this? Below is the code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email ...

htmlcssheight

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... Unfortunately, the assigned value does not show on the front end. I am aware that we can set a defaul ...

javascriptjqueryhtmljquery-uidatepicker

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...

cssrshiny

I'm baffled by this unsemantic grid - why is the final div getting pushed below the rest?

I am working with the unsemantic fluid grid system and aiming to create a row of divs that are all in line and together cover 100% of the page. <div class="grid-container"> <div class="grid-parent yy name-strip zz"> <div class="yello ...

htmlcssfluid-layout