CODEWITHSUNDEEP
htmlcsspositionbootstrap-4
Ondřej Javorský
Ondřej Javorský

Reputation: 475

Bootstrap 4 set a width of input-group inputs

Can you help me with this problem? I have an input-group within bootstrap 4. In my input-group I have 2 inputs, first with prepend and second with append.

It's wrapped in a col-12 div in a form-group and I need to set the width of the first input and second to some specific (but different) value. I tried to set the width in my custom css, but without success. Is it possible? I know, that I can set it via wrapping it in a div with another col, but than I have both input below and not side by side.

Code: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 <div class="form-group">
    <label for="telephone">Telephone</label>
      <div class="row">
         <div class="col-12">
            <div class="input-group telephone-input">
              <div class="input-group-prepend preselection-prepend">
                  <div class="input-group-text">+</div>
              </div>
              <input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>
              <input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>
              <span class="placeholder" id="tele-holder"></span>
              <div class="input-group-append" id="preselectionToggle">
              <div class="input-group-text">
                 <i class="far fa-plus-square"></i>
              </div>
            </div>
          </div>
       </div>
     </div>
  </div>
    
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Upvotes: 19

Views: 40952

Answers (3)

ashkufaraz
ashkufaraz

Reputation: 5297

You can do it with class w-50 and w-100

like this

<div class="input-group">
   <div class="input-group-prepend w-50">
     <span class="input-group-text w-100">label</span>
   </div>
   <input type="text" class="form-control " />
</div>

Upvotes: 14

vchar
vchar

Reputation: 986

I've found a solution on the internet and you can visit it at codeply!.

It is pretty neat and simple. To do so, you just need to add the following CSS to your stylesheet.

.input-group>.input-group-prepend {
    flex: 0 0 30%;
}
.input-group .input-group-text {
    width: 100%;
}

To set the width of the input-group-text, just change the value of the flex of the input-group, for instance, as seen above 30% of the total width.

Thank the author of the link above for this simple code snippet.

Upvotes: 12

Ondřej Javorsk&#253;
Ondřej Javorsk&#253;

Reputation: 475

I found a solution. I tried set max-width instead of only width and it works. For the above example it would be:

#preselection {
  max-width: 15%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 <div class="form-group">
    <label for="telephone">Telephone</label>
      <div class="row">
         <div class="col-12">
            <div class="input-group telephone-input">
              <div class="input-group-prepend preselection-prepend">
                  <div class="input-group-text">+</div>
              </div>
              <input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>
              <input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>
              <span class="placeholder" id="tele-holder"></span>
              <div class="input-group-append" id="preselectionToggle">
              <div class="input-group-text">
                 <i class="far fa-plus-square"></i>
              </div>
            </div>
          </div>
       </div>
     </div>
  </div>
    
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Upvotes: 9

Related Questions