Input field full width on bootstrap 4.0.0 not working - html

Question

I have some problem on Bootstrap 4.0.0 for input field full width across the column col-md-6
Here is my code. I just try to fix full width !
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
</div>
</div>
Here is the expected output ! If any markup suggestion for following output, please help me
Thanks in advance

Answer 1

Basically, you have two span elements inside each col-6. one of them should have a fixed size, and the other one (containing the input) should fill the rest of the space
Basically, I used flex to do that. socialMedia was used to make the parent element use the flex box model.
kb-icon was set to not grow or shrink, while kb-input was set to grow, meaning it will take up the rest of the space for each col-6 item
I also changed the spans into divs since (at least with the input) you want the item to have a specific size that is not based on the content of the element. The same could have been achieved by adding display: inline-block or display: block.
.socialMedia {
display: flex;
padding: 2px 0;
}
.kb-icon {
flex-grow: 0;
flex-shrink: 0;
margin: 0 5px;
/* just to make the icon centered */
display: flex;
align-items: center;
justify-content: center;
}
/* this item will act as a pseudo input element
we do that because we can't put a button inside
an actual input */
.kb-input {
flex-grow: 1;
/* I use flex to make the input as
large as possible without setting sized myself */
display: flex;
margin-right: 5px;
/* just to make it look better on small screens */
border: 1px solid grey;
/* imitate the input look */
}
/* this is used to create a focus effect on the fake input. if we use focus and not focus-within, nothing will happen. I use the same method bootstrap uses here */
.kb-input:focus-within {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
.kb-input input {
/* remove the input style to make it "transparent" */
border: 0;
border-radius: 0;
/* this is used to make sure it takes up the entire space */
flex-grow: 1;
}
/* make sure input does not have style on focus */
.kb-input input:focus {
outline: none;
box-shadow: none;
}
/* make the button transparent */
button.kb-close {
border: 0;
background: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control ">
<button class="kb-close">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
</div>
I also added some comments in the CSS to explain why I did what I did to add the "clean input" button
basically, .kb-input is used as a pseudo input element (containing the actual input and a button). for more info, check the css.
If you want to remove the outline completely, don't apply the focus-within pseudo class, and make sure you set the following attributes on the element you want to disable it for:
outline: 0;
box-shadow: 0;

Answer 2

You can use the following, using a .form-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
<div class="socialMedia form-group row">
<label for="inputEmail3" class="col-1 col-form-label">
<img src="https://i.imgur.com/tyO9m6X.png" alt="">
</label>
<div class="col-sm-10">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>

Answer 3

If you want to center this, read about offsetting:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
My proposition:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 col-sm-3 offset-sm-3 offset-md-3 col-offset-3">
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control ">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
<div class="socialMedia d-flex">
<span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
<span>
<input type="text" class="form-control">
</span>
</div>
</div>
</div>