Fit stepper header to parent div

[IrvingSG]

Hello, I use this stepper as the following example:

The problem is that it is not responsive or it does not work properly. I've tried to set a width in the .row and in the same header (as the image shows). But it does not works. width:350px In develooper tools I found this atrbute added to the class .bs-stepper-header: display:flex if I chage it by display:contents It is shown in this way: It is not exactly what I'm looking for, I would like to fit the stepper to the width, since it will be seen on different devices with different resolution. Any idea or advice about how to get it? someone has done something similar?

[tienomeis]

You can adjust the layout by adding or overwriting appropriate css properties of the class the stepper is using internally. You just have to add these css definitions into your css and it will be applied to the stepper. Here are my customizations as an example:

.active .bs-stepper-circle {
  background-color: #aaa;
}

.bs-stepper-circle {
  width:3em;
  height: 0.8em;
  padding: 0;
  margin: 0;
  border-radius: 10px;
}

.bs-stepper-label {
  margin: 0;
}