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

Struggling to access a JSON file using Angular framework

I'm currently working with the following JSON and controllers: JSON Format: {"tomcatLogDir":"C:\\apache-tomcat-7.0.70\\logs","tomcatLogs":["1.log","2.log","3.log"]} Factory: app.factory('filesFactory', [ '$http&a ...

htmlangularjsjsonangularjs-ng-repeatangularjs-controller

Having trouble with applying a class in Gtk3 css?

MY ATTEMPT AND EXPLANATION: In my application, I have the following layout structure: GtkWindow GtkOverlay GtkBox GtkGrid GtkButton Even after trying to apply this CSS style: GtkButton{ background-color:blue; } T ...

cssgtkgtk3

Webpage video stalling due to buffering

Currently, I am developing personalized video controls and have integrated a @progress event to monitor the video buffering progress and adjust the width of a progress bar div: <video @progress="videoBuffer($event)"> videoBuffer(e) { if ...

javascripthtmlvue.js

Wordpress Sub-Menu Being Eclipsed by Banner

After upgrading my Wordpress to version 3.5.1, I noticed a problem on my site where the Submenus are loading but quickly getting hidden behind the Banner. Despite trying various modifications in the CSS file, the issue remains unresolved (and might have wo ...

csswordpressmenu

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

htmlcss

Displaying an interactive 2D floorplan in a web browser with the use of html5 and javascript

In the process of updating my old Flash viewer, I am looking to display interactive 2D floorplans exported from AutoCAD. Currently, I convert the AutoCAD files into XML files containing the X and Y coordinates of the various elements on the floorplan such ...

javascripthtmlsvgcanvasthree.js

A Guide on Modifying a Pseudo Element When Clicked

How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is ...

jquerycsspseudo-element

retain focus even after using .blur()

Currently, I am implementing a form submission using AJAX. The form consists of only one input field and the submit button is hidden. My aim is to ensure that when the user hits the enter key, the input field does not lose its focus. Here's the code s ...

javascripthtmlajaxforms

The CSS border on a div has inexplicably ceased functioning in Chrome, yet continues to work perfectly in

Just a moment ago, something strange happened while I was working on my memory game. After reopening the page, the borders around the divs stopped showing up when navigating with the keyboard arrows. (Click in the window to activate the arrow keys.) Normal ...

jquerycssborder

Unable to successfully append a unique character using jQuery

I need help with displaying special characters, specifically the degree symbol (°), in JavaScript/jQuery. Despite my efforts, it is not showing up correctly on the webpage. How can I fix this issue and ensure that the degree sign appears as desired? I ...

javascriptjqueryhtmlencoding

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...

phpcsswkhtmltopdf

Building a website using Bootstrap: A step-by-step guide

Wondering how I can incorporate all the cool Bootstrap components into a webpage. Is there a tool that offers live preview? Back in the day (web 1.0), Dreamweaver was my go-to for creating HTML and basic CSS, but what are some current tools where I can si ...

htmlcsstwitter-bootstrap

Scrolling automatically within a child element that has a maximum height limit

I am currently developing a console/terminal feature for my website. https://i.stack.imgur.com/AEFNF.jpg My objective is to allow users to input commands and receive output, which might consist of multiple lines of information. When new output is displa ...

javascripthtmlcssvelocity.js

Troubleshooting media queries on an example webpage

Hey there! So, I'm having a bit of trouble with running media queries on a simple HTML page. It's been a while since I worked on this stuff, and I feel like I must be doing something silly that I can't quite pinpoint. If you want to take a ...

htmlresponsive-designmedia-queriesliquid-layout

Enhance the input field with letter control

Here is a snippet of my HTML code for inputs: <form class="form" id="firstForm" novalidate="novalidate"> <div class="tab-content"> <div class="tab-pane active" id="vtab1"> <div class="form-group" ...

jqueryhtml

Using PHP to automatically suggest options when selecting elements from a MySQL table

My project involves creating a basic application for sending confirmation emails. I have a MySQL table that includes 4 columns: id, user_email, user_name, and user_track. The form on the app has a selectbox displaying all the stored user_email entries an ...

phphtmlmysql

The Bootstrap carousel controls now add the carousel ID to the address bar instead of just moving to the next slide

I can't figure out why my carousel isn't working. The id of the carousel is showing up in the webpage's address, which usually happens when the 'bootstrap.js' file is missing, but I have included it. Can anyone help me troubleshoo ...

javascripthtmlcss

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquerycsssafarislideshowopera

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

javascriptcssangularangular5angular6

Apply a specific class using JavaScript/jQuery when a user selects a specific timezone from the user interface

Currently, I am coding in HTML with the code below extracted from this website link. The listings under timezone ET are all correct as they align with the accurate dates; however, for other timezones (PT, MT, CT, AT, NT) some shows seem to be on incorrect ...

javascriptjqueryhtmlattributestimezone