CODEWITHSUNDEEP
cssbootstrap-4width
Michael
Michael

Reputation: 61

Adjust two text box width

I'm a beginner of html form designer, I would like make a simple input-group in the html, which the output which text box width is different That mean which surname textbox is shorter and FullName is longer can you advise how to do it ?

<div class="row h-100">
 <div class="col">
   <div class="input-group">
          <div class="input-group-prepend">
              <span class="input-group-text" id="">First and last name</span>
           </div>
           <input type="text" id="surname" class="form-control" style="width:80px">
           <input type="text" id="FullName" class="form-control" style="width:100%">
     </div>
  </div>

Upvotes: 1

Views: 207

Answers (2)

Dnyanesh_B
Dnyanesh_B

Reputation: 660

You Forgot to remove this enter code here text in your surname field class="form-control"

<div class="row h-100">
    <div class="col">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="">First and last name</span>
        </div>
        <input type="text" id="surname" class="form-control" style="width:80px">
        <input type="text" id="FullName" class="form-control" style="width:100%">
      </div>
    </div>
  </div>

Upvotes: 0

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

Try this.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
  <div class="col">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">First and last name</span>
      </div>
      <input type="text" id="surname" class="form-control" placeholder="Mr" style="width:80px;flex-grow: 0;">
      <input type="text" id="FullName" class="form-control" placeholder="">
    </div>
  </div>

Upvotes: 1

Related Questions