How can I convert Bootstrap 3 input group addons to Bootstrap 4?

Question

I'm trying to convert some code from bootstrap 3 to 4.

These inputs work fine in bootstrap 3, unfortunately it doesn't work in boostrap4 is there any way to accomplish this?

Bootstrap 3:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="form-group col-sm-6"> <div class="input-group"> <span class="input-group-addon">1</span> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"><span class="input-group-addon">text1<br><br>text2<br><br>text3</span> </div> </div> <div class="form-group col-sm-6"> <div class="input-group"> <span class="input-group-addon">2</i></span> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"><span class="input-group-addon">text1<br><br>text2<br><br>text3</span> </div> </div> </div>

Bootstrap 4:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="form-group col-sm-6"> <div class="input-group"> <span class="input-group-addon">1</span> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"><span class="input-group-addon">text1<br><br>text2<br><br>text3</span> </div> </div> <div class="form-group col-sm-6"> <div class="input-group"> <span class="input-group-addon">2</i></span> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"><span class="input-group-addon">text1<br><br>text2<br><br>text3</span> </div> </div> </div>

Answer 1

Something like this?

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="form-group col-sm-6"> <div class="input-group"> <span class="input-group-prepend"> <span class="input-group-text">1</span> </span> <div> <input type="text" class="form-control rounded-0" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control rounded-0" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control rounded-0" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> </div> <div class="input-group-append d-flex flex-column"> <span class="input-group-text" style="border-top-right-radius: .25rem;">text1 </span> <span class="input-group-text">text2 </span> <span class="input-group-text" style="border-top-right-radius: 0;">text3 </span> </div> </div> </div> <div class="form-group col-sm-6"> <div class="input-group"> <span class="input-group-prepend"> <span class="input-group-text">2</span> </span> <div> <input type="text" class="form-control rounded-0" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control rounded-0" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> <input type="text" class="form-control rounded-0" readonly style="text-align:center;" onkeypress="return IsNumeric(event);"> </div> <div class="input-group-append d-flex flex-column"> <span class="input-group-text" style="border-top-right-radius: .25rem;">text1 </span> <span class="input-group-text">text2 </span> <span class="input-group-text" style="border-top-right-radius: 0;">text3 </span> </div> </div> </div> </div>

You can read about the differences between Bootsrap v3 and v4 in here: https://getbootstrap.com/docs/4.0/migration/#input-groups

Answer 2

This is another solution approach.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-6"> <div class="row"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text mr-n2">1</span> </div> <div class="col-xs-6 ml-n2 mr-n2"> <input class="form-control" type="text"> <input class="form-control" type="text"> <input class="form-control" type="text"> </div> <div class="input-group-append"> <span class="input-group-text ml-n2"> <ul style="list-style-type: none;padding: 0;margin:0;"> <li class="mb-2"> 1 </li> <li class="mb-2"> 2 </li> <li class=""> 3 </li> </ul> </span> </div> </div> </div> </div>