The last child of a button group is not recognized by Bootstrap. How do I fix it? - Html

Sergey
April 7, 2023
225 views
2 votes
3 Answers

It’s a small but pesky issue. The last button of my button group is rectangular – as opposed to being rounded at top right and bottom right corners. The reason is this: besides the a.btn element, the btn-group has a modal which, in Bootstrap’s opinion, is the group’s last child. The modal is called by that last button so for convenience, I want it to stay there instead of moving it around and lose it at some point (or have trouble finding)

What do you think I should do to ensure proper style of my button group’s last button? I mean surely I can manually add this attribute, style="border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem, and thereby override Bootstrap’s CSS on that one, but it’s ugly. Maybe, I can manually assign last children? Simply typing "lastchild" inside the opening tag, for example, would be a relatively nice solution (it’s a pitty I can’t do that)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Admin Page</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

Answers

Chosen as BEST ANSWER

Overruling Bootstrap's CSS and making use of the :last-of-type pseudo class is, in my view, the perfect solution. Adding !important is, well, important because more specific selectors (in particular, .btn-group>.btn:not(:last-child):not(.dropdown-toggle)) may ruin your plan

.btn-group a:last-of-type {
    border-top-right-radius: 0.2rem !important;
    border-bottom-right-radius: 0.2rem !important;
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>
.btn-group a:last-of-type {
border-top-right-radius: 0.2rem !important;
border-bottom-right-radius: 0.2rem !important;
}
        </style>
        <title>Admin Page</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

(Edit)

You can use border-radius utilities of bootstrap for that. Just add rounded-right bootstrap class in last button instead of inline css.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Admin Page</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

You can also use a.btn.btn-outline-primary class for the solution.


a.btn.btn-outline-primary {
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Admin Page</title>

<style>
a.btn.btn-outline-primary {
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}

</style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

Please signup or login to give your own answer.

Click here to cancel reply.

The last child of a button group is not recognized by Bootstrap. How do I fix it? – Html

Answers