title: Make a responsive stepper with 24 steps using Angular material? Is there any alternate responsive stepper option for the same?
body: <p>How to make a 24 steps stepper responsive using Angular material? Is there any alternate responsive stepper option to achieve the same?</p>
  <p>I have tried container-fluid but nothing works after a certain point I can view only 6 steps on small screen.</p>
  <p>I have used below <a href="https://stackblitz.com/edit/angular-material-stepper-with-component-steps-hnzrnm?file=app%2Fstepper-overview-example.html" rel="nofollow noreferrer">StackBlitz to create the MatStepper</a>.</p>
  <p>This a sample code what if I need 28 steps and how to make in responsive on small screen?</p>
  <pre><code>&lt;mat-horizontal-stepper [linear]=&quot;isLinear&quot; #stepper class=&quot;container-fluid&quot; style=&quot;width: 100%;&quot;&gt;
  &lt;mat-step [stepControl]=&quot;firstFormGroup&quot;&gt;
      &lt;form [formGroup]=&quot;firstFormGroup&quot;&gt;
          &lt;span&gt;Name&lt;/span&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Name&lt;/mat-label&gt;
              &lt;input matInput placeholder=&quot;Last name, First name&quot; formControlName=&quot;firstCtrl&quot; required&gt;
          &lt;/mat-form-field&gt;
          &lt;div&gt;
              &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/mat-step&gt;
  &lt;mat-step [stepControl]=&quot;secondFormGroup&quot;&gt;
      &lt;form [formGroup]=&quot;secondFormGroup&quot;&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Address&lt;/mat-label&gt;
              &lt;input matInput formControlName=&quot;secondCtrl&quot; placeholder=&quot;Ex. 1 Main St, New York, NY&quot; required&gt;
          &lt;/mat-form-field&gt;
          &lt;div&gt;
              &lt;button mat-button matStepperPrevious&gt;Back&lt;/button&gt;
              &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/mat-step&gt;
  &lt;mat-step&gt;
      &lt;p&gt;You are now done.&lt;/p&gt;
      &lt;div&gt;
          &lt;button mat-button matStepperPrevious&gt;Back&lt;/button&gt;
          &lt;button mat-button (click)=&quot;stepper.reset()&quot;&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
  &lt;/mat-step&gt;
  </code></pre>