Changing the position of a button using bootstrap

Question

I'm facing a little bit of difficulty when I'm trying to position a button inside an input field using bootstrap. The button in the form field is centered, but I want to push it a little bit to the right so that it looks exactly like the design.

I've tried using CSS, but when I look at the website on my mobile device, the button goes out of position and moves past the container. Can someone help me fix this issue? Here's the code that I've written with bootstrap.

<div class="input-group mt-5 mb-3">
    <input type="text" class="email mx-auto" placeholder="Enter Your Email Address">
    <button class="position-absolute top-50 start-50 translate-middle btn btn-primary" type="button" id="letterbtn">Signup</button>
</div>

The bootstrap code that I've posted position the button in the middle

Have you checked this bootstrap documentation page that shows how to set buttons in input groups? getbootstrap.com/docs/5.1/forms/input-group. If you pretend another thing then do not use input groups. — masterguru, Dec 12 '21 at 22:52
it is depending on your design. Bootstrap has a solution for this, but If it does not fit, tell me and I think I know what to do — Ahmed Elbessfy, Dec 12 '21 at 23:47

score 0 · Accepted Answer · answered Dec 13 '21 at 06:05

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

Changing the position of a button using bootstrap

1 Answers1