it does not look good with bootstrap

[michaelnguyen2021]

it looks ugly with bootstrap, any suggestions to fix it ?

thanks

[Borales]

@michaelnguyen547 try to pass bootstrap-specific css class to this component

[TonisOrmisson]

had the same issue.
Try adding to css:
.intl-tel-input {width: 100%;}
or
.intl-tel-input,.intl-tel-input input {width: 100%}

[michaelnguyen2021]

thanks @TonisOrmisson for the tip

for my case, i did

    .intl-tel-input,.intl-tel-input input {
        width: 100%;
    }

    .intl-tel-input input {
        padding: 6px 12px;
    }

and I also add class to input field so it shows proper format

<? echo $form->field($model, 'primary_phone', ['options' => ['class' => 'col-md-3']])->widget(PhoneInput::className(), [
    'jsOptions' => [
        'preferredCountries' => ['no', 'pl', 'ua'],
    ],
    'defaultOptions' => [
        'class' => 'form-control'
    ]
]);
?>

Thanks for this awesome plugin