In Bootstrap, how do I make my stepper full width

Question

 .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 have the following fiddle:

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

I would like the stepper to be be full width.

I have tried 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 does not work.

How do I stretch the stepper to full width?

Answer 1

You can use this code

 .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

I put some borders on so we see stuff and set padding on progress-card to 0 but unclear what other changes you might desire.

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