bootstrap 4 design

[srakl]

This is how it looks in my view,

how do i get it to look like the website input above it?
I also added form-control-lg but it doesn't reflect in the html. My html only shows this

<input type="tel" id="profile-mobile" class="form-control" name="Profile[mobile]" value="" autocomplete="off" style="padding-left: 86px;" placeholder="12-345 6789">

Below is my code in my view.

<?= $form->field($model, 'mobile')->widget(PhoneInput::class, [
                            'htmlTagType' => 'tel',
                            'defaultOptions' => ['autocomplete' => "off", 'class' => 'form-control form-control-lg'],
                            'jsOptions' => [
                                'separateDialCode' => true,
                                'utilsScript' => 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.min.js',
                            ]
                        ]);
                    ?>

thank you

[srakl]

Found the solution. Added this to my css

.iti{ width: 100%;}

The form-control-lg is still not working tho