Button sticking out of form

Question

I have a form that looks like this:

Removing the mb-3 class does nothing to help, it just removes the spaces between the inputs. How am I supposed to ensure the button stays within the blue box?

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-success float-end">Hop In</button>
</form>

score 1 · Answer 1 · answered Jul 24 '23 at 08:48

The issue is caused by using float-end on the button which will move the button out of the normal flow and float it.
Simply use Flexbox with flex-direction: column on the container by adding the classes d-flex and flex-column.
After that you can push the button to the right side by adding the class ms-auto to the button:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4 d-flex flex-column" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-success ms-auto">Hop In</button>
</form>

```d-block ms-auto``` classes on the ```button``` could be simpler solution. — Md. Rakibul Islam, Jul 24 '23 at 10:00
@Md.RakibulIslam with `d-block` the button would span the full width of the container — tacoshy, Jul 24 '23 at 10:08
No it doesn't. But it does in your above method if you remove ```ms-auto``` You should check. — Md. Rakibul Islam, Jul 24 '23 at 10:12

score 1 · Answer 2 · answered Jul 24 '23 at 08:58

The 'float-end' class makes the button float to the right, so we need to add 'overflow: hidden;' to the form container to keep it within the blue box

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255); overflow: hidden;" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>

  <button type="submit" class="btn btn-success float-end">Hop In</button>
</form>

The problem here is the "Clear bug/Float bug". The newer variant of the "Clearfix" (with ":after" element) is already integrated in Bootstrap -> https://getbootstrap.com/docs/5.2/helpers/clearfix/ — com.on.ist, Jul 24 '23 at 09:51

Md. Rakibul Islam · Answer 3 · 2023-07-24T09:02:15.020

You need to clear the float using clearfix after float. Then it works.

<div class="clearfix"></div>

Or you can write it in CSS:

form::after{
    content: "";
    display: table;
    clear: both;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
    <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Username"/>
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password"/>
    </div>
    <button type="submit" class="btn btn-success float-end">Hop In</button>
    <div class="clearfix"></div>
</form>

While this works, float is the wrong class to start with and you need to add an empty element for styling purposes. That is unclean and reduces accessibility. — tacoshy, Jul 24 '23 at 08:56
Maybe you are right. But I was trying to fix it following his approach. — Md. Rakibul Islam, Jul 24 '23 at 08:59

com.on.ist · Answer 4 · 2023-07-24T09:55:48.340

If you want to use float and solve it the bootstrap way, you should give the parent element the class "clearfix". This fixes the "clearfix bug" when you have bootstrap loaded.

Bootstrap 5.2 Documentation: "Clearfix"

I wrapped a container around the form and gave it the class "clearfix".

Since I think it's unusual to put css styles on the form-tag, I moved the styles from the form-tag to the outer container.

(Usually only the parameters needed for sending are used in a form-tag. Probably to create a more precise separation between styling and functionality. An "official rule" is not known to me at least.)

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<div class="p-3 rounded-4 clearfix" style="background-color:rgb(192, 242, 255);">
    <form action="/user/loginattempt" method="POST">
        <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
         </div>
         <button type="submit" class="btn btn-success float-end">Hop In</button>
    </form>
</div>

there is nothing wrong to style a form. In the end it is just an semantic container. — tacoshy, Jul 24 '23 at 10:10
Yes, I mentioned that in my answer, but I've never seen a styled form tag in the last few years. Most established conventions have their purpose, even if it's not a hard rule. — com.on.ist, Jul 24 '23 at 11:03

MrUpsidown · Answer 5 · 2023-07-24T11:26:27.230

One (Bootstrap) way would be to remove the fload-end class from the button and wrap it inside an element with d-flex and justify-content-end.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <div class="d-flex justify-content-end">
    <button type="submit" class="btn btn-success">Hop In</button>
  </div>
</form>

Another (Bootstrap) way would be to remove the fload-end class and add d-block and ms-auto classes to your button to force a display: block; with an automatic left-margin (margin-left: auto;).

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Body -->
<form action="/user/loginattempt" class="p-3 rounded-4" style="background-color:rgb(192, 242, 255);" method="POST">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-success d-block ms-auto">Hop In</button>
</form>

Both methods achieve the exact same results.

Button sticking out of form

5 Answers5