I am trying to have country code and phone number using Bootstrap v5 input group using the following code but it’s not working.
I want it to be in the following format by adjusting its width. Is it possible?
.phone-code {
width: 63px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="input-group">
<input type="tel" class="form-control mb-2 phone-code" id="" placeholder="" value="+971">
<input type="tel" class="form-control mb-2" id="phone-formatted" placeholder="Enter your phone number">
</div>
2
Answers
Wrap them in a row and set the column sizes. Example
you can use max-width and add !important to overwright Bootstrap css