How can i place submit button inside input field in Bootstrap

Question

I want Something Like this and how can I achieve this task:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form>
  <div class="col-lg-10 mb-3">
    <div class="input-group">
      <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      <div class="input-group-prepend">
        <input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
      </div>
    </div>
  </div>
</form>

Answer 1

add to this css

.mycustom {
    border: solid 1px green;
    position: relative;
}
.mycustom input[type=text] {
    border: none;
    width: 100%;
    padding-right: 123px;
}
.mycustom .input-group-prepend {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;z-index:9;
}

with one css mycustom class in your input-group class

like this

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><style>.mycustom {
border: solid 1px green;
position: relative;
}
.mycustom input[type=text] {
border: none;
width: 100%;
padding-right: 123px;
}
.mycustom .input-group-prepend {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;z-index:9;
}</style>
<form>
  <div class="col-lg-10 mb-3">
    <div class="input-group mycustom">
      <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      <div class="input-group-prepend">
        <input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
      </div>
    </div>
  </div>
</form>

Answer 2

Just make the .input-group-prepend class position:absolute

To prevent overriding the bootstrap styles rename the .input-group-prepend to some other name

.input-group-prepend {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form>
  <div class="col-lg-10 mb-3">
    <div class="input-group">
      <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      <div class="input-group-prepend">
        <input type="submit" vlaue="submit" class="btn btn-primary btn-sm rounded-0" id="inputGroupPrepend2">
      </div>
    </div>
  </div>
</form>

Answer 3

see this bootstrap's documentation http://getbootstrap.com/components/#input-groups:

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">
        <i class="fa fa-search"></i>
    </button>
  </span>
</div>