Material (vertical) stepper

Question

I'm trying to implement the Material vertical stepper for a wizard in my web application (using Angular and Bootstrap).

Unfortunately I do not find any example implementations that I can use as a basis. I only found a few (not-so-good-looking) horizontal ones. Even Angular Material does not implement this component yet.

Anybody able to help with an example for the layout (HTML + CSS)? In particular, I do not know how to correctly draw the step circles (with numbers or -in my case- icons), connect them with lines and position them correctly compared to the step content on different devices. The logic/navigation (JS/Angular) on the other hand is quite straightforward.

Answer 1

Is this what you need?

*,
*:before,
*:after {
  box-sizing: border-box;
}
.step {
  position: relative;
  min-height: 32px
  /* circle-size */
  ;
}
.step > div:first-child {
  position: static;
  height: 0;
}
.step > div:last-child {
  margin-left: 32px;
  padding-left: 16px;
}
.circle {
  background: #4285f4;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  position: relative;
  color: white;
  text-align: center;
}
.line {
  position: absolute;
  border-left: 1px solid gainsboro;
  left: 16px;
  bottom: 10px;
  top: 42px;
}
.step:last-child .line {
  display: none;
}
.title {
  line-height: 32px;
  font-weight: bold;
}

<div class="step">
  <div>
    <div class="circle">n</div>
    <div class="line"></div>
  </div>
  <div>
    <div class="title">Title</div>
    <div class="body">Body</div>
  </div>
</div>

Or see is the full Demo

Answer 2

Material Design Lite Stepper (Polyfill) could be a good example of Material Design Stepper (with HTML5) implementation.

There are demonstrations, introduction to the component and Javascript API.

Answer 3

For almost pure Bootstrap 4 solution.

  .stepper .line{
      width: 2px;
      background-color: lightgrey !important;
  }    
      
  .stepper .lead {
      font-size: 1.1rem;
  }

<div class="stepper d-flex flex-column mt-5">
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">1</div>
        <div class="line h-100"></div>
      </div>
      <div>
        <h5 class="text-dark">Create your application repository</h5>
        <p class="lead text-muted pb-3">Choose your website name & create repository</p>
      </div>
    </div>
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">2</div>
        <div class="line h-100"></div>
      </div>
      <div>
        <h5 class="text-dark">Clone application respository</h5>
        <p class="lead text-muted pb-3">Go to your dashboard and clone Git respository from the url in the dashboard of your application</p>
      </div>
    </div>
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">3</div>
        <div class="line h-100 d-none"></div>
      </div>
      <div>
        <h5 class="text-dark">Make changes and push!</h5>
        <p class="lead text-muted pb-3">Now make changes to your application source code, test it then commit &amp; push!</p>
      </div>
    </div>
  </div>

Here is the demo link