如何将Bootstrap按钮移动到卡片头部右上角

Current View
I'm trying to move the button to the top-right corner of the card header but don't know how to do it. Can anyone offer some advice?

Current Code #

<div class="col-sm-12" id="emailsettings">
                    <div class="card h-100 text-center">
                        <div class="card-header">
                            <h3 class="bg-light py-4" style="margin-top:0;"><strong>Update Email Configuration</strong></h3>
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-primary" style="width: 1%;" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                i
                            </button>
                            <!-- Modal -->
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content position-fixed">
                                        <div class="modal-header">
                                            <h3 class="modal-title" id="exampleModalLabel"><Strong>Instructions</Strong></h3>
                                        </div>
                                        <div class="modal-body">
                                            <p>Host - Your host is what type of email your using, such as gmail, hotmail or outlook (Ex: smtp.gmail.com)</p>
                                            <p>Username - This is usually your email address</p>
                                            <p>Password - This is the password that you use to sign in to your email</p>
                                            <p>Port - When sending smtp emails, port 587 is usually used </p>
                                            <p>Sending Email From - This is the email your sending this from, the same as your username</p>
                                            <p>Email Alias - This is just your name</p>
                                            <p>Enable TLS - When you enable TLS it will activate a security protocol that will encrypt your email to ensure privacy</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body" style="padding-top:4em">
                            <form action="adminpanel.php" method="POST">
                                <input type="hidden" name="action" value="updateemailsettings">
                                <div class="row justify-content-md-center">
                                    <div class="col-sm-8">
                                        <div class="form-group form-group-lg">
                                            <input type="text" class="form-control" id="host" name="host" placeholder="Host" required>
                                        </div>
                                        <div class="form-group form-group-lg">
                                            <input type="text" class="form-control" id="smtp_username" name="smtp_username" placeholder="Username" required>
                                        </div>
                                        <div class="form-group form-group-lg">
                                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                                        </div>
                                        <div class="form-group form-group-lg">
                                            <input type="number" class="form-control" id="port" name="port" placeholder="Port" required>
                                        </div>
                                        <div class="form-group form-group-lg">
                                            <input type="email" class="form-control" id="from_email" name="from_email" placeholder="Sending Email From" required>
                                        </div>
                                        <div class="form-group form-group-lg">
                                            <input type="text" class="form-control" id="from_name" name="from_name" placeholder="Email Alias" required>
                                        </div>
                                        <label for="enable_tls" class="larger-label">Enable TLS:</label>
                                        <br>
                                        <input type="checkbox" class="larger-checkbox" id="enable_tls" name="enable_tls" placeholder="Enable TLS" required>
                                        <br><br>
                                        <button type="submit" class="btn btn-lg btn-primary">Update</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

Solution #

Since you're using Bootstrap, leverage its built-in flex utility classes to align the button easily:

1. Add d-flex justify-content-between align-items-center to the card-header element to turn it into a flex container, push content to opposite ends, and align items vertically.
2. Remove the style="width: 1%;" from the button—flex handles spacing without this forced width.
3. Add mb-0 to the <h3> to remove default bottom margin for cleaner alignment.

Here's the modified code:

<div class="col-sm-12" id="emailsettings">
    <div class="card h-100 text-center">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="bg-light py-4 mb-0"><strong>Update Email Configuration</strong></h3>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                i
            </button>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content position-fixed">
                        <div class="modal-header">
                            <h3 class="modal-title" id="exampleModalLabel"><Strong>Instructions</Strong></h3>
                        </div>
                        <div class="modal-body">
                            <p>Host - Your host is what type of email your using, such as gmail, hotmail or outlook (Ex: smtp.gmail.com)</p>
                            <p>Username - This is usually your email address</p>
                            <p>Password - This is the password that you use to sign in to your email</p>
                            <p>Port - When sending smtp emails, port 587 is usually used </p>
                            <p>Sending Email From - This is the email your sending this from, the same as your username</p>
                            <p>Email Alias - This is just your name</p>
                            <p>Enable TLS - When you enable TLS it will activate a security protocol that will encrypt your email to ensure privacy</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body" style="padding-top:4em">
            <form action="adminpanel.php" method="POST">
                <input type="hidden" name="action" value="updateemailsettings">
                <div class="row justify-content-md-center">
                    <div class="col-sm-8">
                        <div class="form-group form-group-lg">
                            <input type="text" class="form-control" id="host" name="host" placeholder="Host" required>
                        </div>
                        <div class="form-group form-group-lg">
                            <input type="text" class="form-control" id="smtp_username" name="smtp_username" placeholder="Username" required>
                        </div>
                        <div class="form-group form-group-lg">
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                        </div>
                        <div class="form-group form-group-lg">
                            <input type="number" class="form-control" id="port" name="port" placeholder="Port" required>
                        </div>
                        <div class="form-group form-group-lg">
                            <input type="email" class="form-control" id="from_email" name="from_email" placeholder="Sending Email From" required>
                        </div>
                        <div class="form-group form-group-lg">
                            <input type="text" class="form-control" id="from_name" name="from_name" placeholder="Email Alias" required>
                        </div>
                        <label for="enable_tls" class="larger-label">Enable TLS:</label>
                        <br>
                        <input type="checkbox" class="larger-checkbox" id="enable_tls" name="enable_tls" placeholder="Enable TLS" required>
                        <br><br>
                        <button type="submit" class="btn btn-lg btn-primary">Update</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Key Details #

• d-flex: Converts the header into a flex container
• justify-content-between: Spreads header content to opposite ends, placing the button in the top-right
• align-items-center: Vertically centers the title and button for balanced layout
• mb-0: Removes default bottom margin from the heading to avoid extra spacing

Content sourced from Stack Exchange, asked by Kieran Hislop