Html Question posted in
Some basic documentation can be found here.

Html – How to size the first text field in Bootstrap input group?

I am trying to have country code and phone number using Bootstrap v5 input group using the following code but it’s not working.

the output am getting

I want it to be in the following format by adjusting its width. Is it possible?

expected output

.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>
Tags:

2

Answers


  1. 0

    Wrap them in a row and set the column sizes. Example

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <div class="col-2">
    <input type="text" class="form-control" placeholder=".col-2">
  </div>
  <div class="col-3">
    <input type="text" class="form-control" placeholder=".col-3">
  </div>
  <div class="col-4">
    <input type="text" class="form-control" placeholder=".col-4">
  </div>
</div>
<div class="container row mt-4 m-2">Sample with the wrap here using this kind of ugly option:</div>
<div class="input-group">
  <div class="col-2">
    <input type="tel" class="form-control mb-2 phone-code" id="" placeholder="" value="+971">
  </div>
  <input type="tel" class="form-control mb-2" id="phone-formatted" placeholder="Enter your phone number">
</div>
    Login or Signup to reply.
  2. 0

    you can use max-width and add !important to overwright Bootstrap css

    .phone-code {
  max-width: 63px !important;
}
        <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search