How to make input full width of its container?

Question

I have a box inside bootstrap input and link inside.But below as you can see,input isn't full width.How can I make it full?

You can see there's gap between input and link.I want to make that gap instead of input width.

.resetToDef{
  display: block;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
}

       
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

Do you want the input field to take up the entire width of the ``
``, or do you want it to take up all the space to the left of the link? — kmoser, Mar 02 '20 at 06:59
update `.resetToDef input { display: inline-block; width: 80%; border: none; }` — PHP Ninja, Mar 02 '20 at 07:00
Does this answer your question? [How can I put an input element on the same line as its label?](https://stackoverflow.com/questions/6938900/how-can-i-put-an-input-element-on-the-same-line-as-its-label) — Awais, Mar 02 '20 at 07:39

score 1 · Answer 1 · answered Mar 02 '20 at 07:00

Just utilize the built in bootstrap class for form input group input-group.

.resetToDef{
  display: block;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef input-group">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

score 0 · Answer 2 · answered Mar 02 '20 at 07:02

Can be something like this:

.resetToDef{
  display: block;
  width:100%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:80%;
 border:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

score 0 · Answer 3 · answered Mar 02 '20 at 07:21

Remove width given to the input element and make resetToDef display flex.

.resetToDef{
  display: flex;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
  justify-content: space-between;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 
 border:none;
}

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

score 0 · Answer 4 · answered Mar 02 '20 at 07:27

You can use flex and flex grow to achieve that.

.resetToDef {
    display: flex;
}

.resetToDef input {
    flex-grow: 1;
}

What this will do is set the parent to be a flex container so that direct children can use the flex properties.

Now we set the input to be 'flex-grow: 1;', that will tell the input to "grow" (take up what available space remains) and be full available width.

Don't forget that your elements have padding which can seem like the elements don't take the full available width.

score 0 · Answer 5 · answered Mar 02 '20 at 07:35

.resetToDef - display:flex; and input - flex:1;

this will work for you.

.resetToDef {
  display: flex;
  width: 25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}

.resetToDef a {
  font-size: 12px;
  color: #FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input {
 flex:1;
  border: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="resetToDef">
  <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
  <a href="" class="float-right btn"> Back to default</a>
</div>

How to make input full width of its container?

5 Answers5