How to Place Submit Button Inside Input Field in Bootstrap

How can i place submit button inside input field in Bootstrap

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>

Bootstrap button inside input-group

If you follow bootstrap's documentation:

<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>

unable to place submit button inside input in bootstrap 4.3.1

Use absolute to absolutely position the button inside the input field. Also add the z-index property to ensure it stays at top of input when you focus the input field.

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");

body {

  margin: 20px;

}

.input-group {

  position: relative;

}

.form-control {

  padding-right: 47px;

}

.input-group-append {

  position: absolute;

  right: 15px;

  z-index: 10;

}

<div class="input-group col-md-4">

  <input type="text" class="form-control rounded-pill" id="x__p__address__x" size="70" style="font-size:small" />

  <span class="input-group-append">

      <button type='submit' class="btn btn-primary rounded-circle py-1">go</button>

  </span>

</div>

How i can add a button inside an input box using bootstrap

There is no native bootstrap solutions. You can do this with custom code.

.custom-search {

  position: relative;

  width: 300px;

}

.custom-search-input {

  width: 100%;

  border: 1px solid #ccc;

  border-radius: 100px;

  padding: 10px 100px 10px 20px; 

  line-height: 1;

  box-sizing: border-box;

  outline: none;

}

.custom-search-botton {

  position: absolute;

  right: 3px; 

  top: 3px;

  bottom: 3px;

  border: 0;

  background: #d1095e;

  color: #fff;

  outline: none;

  margin: 0;

  padding: 0 10px;

  border-radius: 100px;

  z-index: 2;

}

<div class="custom-search">

  <input type="text" class="custom-search-input" placeholder="Enter your email">

  <button class="custom-search-botton" type="submit">Subscribe</button>  

</div>

Place button inside input form with flex

I have changed some properties in your code based on your requirement. Chcek the snippet below. The button will be inside the input on desktop and it will be stacked in mobile (Under 567px).

And a few changes I did in your code includes:

• There was style for .button which wasn't present
• There was style for #url-25 which was also not there.
• Input submit changed to button submit.
• Removed unnecessary !importants.

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

#form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

button {
  font-size: 16px;
  border-radius: 50px;
  position: absolute;
  padding: 10px;
  right: 0;
  height: 100%;
}

input {
  width: 100%;
  border-radius: 50px;
  padding: 10px;
}

input:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

@media (max-width: 567px) {
  #form {
    flex-direction: column;
  }
  button, input {
     position: static;
     width: 100%;
     border-radius: 0;
  }
}

<form id="form">
    <input type="text" name="name" placeholder="text">
    <button type="submit">BUILD YOUR APP</button>
</form>

How to add button inside input

The button isn't inside the input. Here:

input[type="text"] {
    width: 200px;
    height: 20px;
    padding-right: 50px;
}

input[type="submit"] {
    margin-left: -50px;
    height: 20px;
    width: 50px;
}

Example: http://jsfiddle.net/s5GVh/

Changing the position of a button using bootstrap

Use this modified code:

<form>
   <div class="form-group custom-form">
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Your Email Address">
        <button class="signup-btn">Signup</button>
    </div>
</form>

.form-group.custom-form {
    position: relative;
    margin: 0 auto;
    width: 40%;
}
.form-group.custom-form input {
    padding: 0 0 0 14px;
    height: 50px;
}
button.signup-btn {
    position: absolute;
    top: 8px;
    right: 15px;
    background: #1d4cb9;
    color: #fff;
    border: 0;
    padding: 5px 15px 5px 14px;
    border-radius: 5px;
}

How to set button inside input?

If you can NOT change the HTML structure, then well you have fixed width of 500px so ofcourse you will have to have some nasty calculations to position it.

If you had used percentages would've been more easy

On top of that you have paddings ( that differ from the input to the button )

So firstly, left of the button should be calc(500px + 1.4rem); where 500px is the width of the input and 1.4rem is from the left/right padding of 0.7rem which the input has. Now the button is positioned right after the input. Now move it to the left with 100% of its width.

Second, the bottom should be bottom: 4.2rem because of form padding top/bottom of 4rem and then 0.2rem because the padding of input is 0.7rem and padding of button is 0.6rem so 0.1 *2 smaller ( on Y axis ) .

form {

  padding: 4rem 0;

  position: relative;

}

input[type=text] {

  background: #fff;

  width: 500px;

  padding: 0.7rem;

  border: 1px solid #cbcbce;

  border-radius: 50px;

  color: #3a3d4b;

}

button {

  position: absolute;

  background: #6fc754;

  padding: 0.6rem 1rem;

  border: none;

  color: #fff;

  border-radius: 25px;

  left: calc(500px + 1.4rem);

  bottom: 4.2rem;

  transform: translateX(-100%)

}

<form>

  <input type="text" placeholder="Enter text">

  <button>Send Invite</button>

</form>

---

Related Topics