Bootstrap seems to be struggling with recognizing the last child of a button group. What steps can I take to troubleshoot and resolve this

I'm facing a small but annoying issue with my button group. The last button in the group appears rectangular instead of having rounded corners at the top right and bottom right. This is because the a.btn element is followed by a modal within the btn-group, which Bootstrap considers to be the group's last child. The modal is triggered by the last button, so I want it to remain in that position for ease of use, rather than risking it getting lost by moving it around.

How can I ensure that the last button in my button group maintains the proper style? I could manually add the attribute 

style="border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem"
to override Bootstrap's CSS for that specific button, but it feels like a hack. Perhaps there is a way to manually designate last children? Simply adding "lastchild" inside the opening tag would be a cleaner solution (unfortunately, it's not possible).

https://i.sstatic.net/QpHWf.png

    <!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5afb4b0a0b7bc85f6ebf3ebf6">[email protected]</a>/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed9d829d9d889fc3879eaddcc3dcdbc3dc">[email protected]</a>/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7e647c6478">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

htmlcssbootstrap-4

Answer №1

To achieve this effect, you can utilize the border-radius utilities provided by Bootstrap. Simply include the rounded-right class from Bootstrap on the last button instead of using 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84eef5f1e1f6fdc4b7aab2aab7">[email protected]</a>/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9aeaf5eaeaffe8b4f0e9daabb4abacb4ab">[email protected]</a>/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b7adb5adb1">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

Answer №2

Going against Bootstrap's CSS and utilizing the :last-of-type pseudo class is, in my opinion, the best approach. It's crucial to include !important because more specific selectors (like 

.btn-group>.btn:not(:last-child):not(.dropdown-toggle)
) could disrupt your strategy

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d776c68786f645d2e332b332e">[email protected]</a>/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43332c333326316d293003726d72756d72">[email protected]</a>/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394d574f574b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

Answer №3

You may utilize the class a.btn.btn-outline-primary 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="412b303424333801726f776f72">[email protected]</a>/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99e9f6e9e9fcebb7f3ead9a8b7a8afb7a8">[email protected]</a>/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d0cad2cad6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to smoothly scroll to a specific div on click and hide the top div using Jquery

Snippet of Code: HTML Markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Title</title> </head> <body> <div id="intro"> <a href="#" id="showfullsite"></ ...

javascriptjqueryhtmlcss

Click on a link to open it in the current tab with customized headers

In my Angular project, I am attempting to open a link by clicking a button that redirects to the specified URL using the following code: window.open(MY_LINK, "_self"); However, in this scenario, I also need to include an access token in the header when t ...

javascripthtmlangularajaxtypescript

Scrolling horizontally using jQuery and CSS

I have been experimenting with creating a horizontal scrolling page that moves to the right when scrolling down and to the left when scrolling up. Here is the current code: HTML <div class="scroll-sections"> <section id=&quo ...

javascripthtmljquerycss

Incorporate npm libraries into vanilla JavaScript for HTML pages

Attempting to incorporate an npm package into plain JS/HTML served using Python and Flask. <script type="module"> import { configureChains, createClient } from "./node_modules/@wagmi/core"; import { bsc } from "./nod ...

javascripthtmlnpm

Is there a way to pass the ng-repeat value or ID to my dynamically appended element? If so, how can I achieve

I am working on a project where I have a table with 5 data entries retrieved from a select query. My goal is to extract the ng-repeat value and ID, then transfer it to another element. As a beginner in Angularjs and HTML, I would greatly appreciate any ass ...

javascriptjqueryhtmlangularjssql-server

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

Executing Python output in HTML with Django

I am currently working on a Django project and in the views.py file of my app, I have some outputs stored in a dictionary. The code snippet from views.py is as follows: from django.shortcuts import render def allblogs(request): a = request.GET[' ...

pythonhtmldjangopython-3.x

Using AngularJS to dynamically swap out {{post.title}} with a different HTML file

I want to update the value of {{post.title}} within my HTML to redirect to another HTML file. <div ng-repeat="post in posts"> <h2> {{post.title}} <a ng-click="editPost(post._id)" class="pull-r ...

javascripthtmlangularjs

How to Retrieve HTML Content from an Azure Function Using C#

I created an Azure function using C# that generates HTML content. However, when I access it from a web browser, the response is displayed as plain text instead of rendering as HTML. After some research, it seems like I need to define the ContentType header ...

c#htmlazure-functionscontent-type

Resetting the value of a radio button input option to null using Angular2 ngModel

In my Angular2 application, I am attempting to implement radio button inputs using ngModel and value. The goal is to have three options: true, false, and null. However, I am struggling to assign a value of null to one of the inputs. Ideally, when nothing ...

htmlformsangularradio-buttonngmodel

Using the jQuery plugin multiple times within one website

I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...

javascriptjqueryhtmlcss

Tips for updating the css class for multiple DOM elements using jQuery

I am currently attempting to modify the class property of a specific DOM element (in this case, a label tag) using jQuery version 1.10.2. Here is the code snippet I have written: var MyNameSpace = MyNameSpace || {}; MyNameSpace.enableDisableLabels = (f ...

javascriptjquerycss

What does the term "the selected font size" mean when defined in em units?

Exploring the query raised in this post: Why em instead of px?, the top voted response sheds light on the nature of em: The unit 'em' is not fixed but rather relative to the current font size. It varies according to the user's chosen font p ...

htmlcssfont-size

Creating a product in Prestashop via code does not successfully upload the product image

Working with the code snippet below in a module to create a product and assign an uploaded image to it. Everything runs smoothly on localhost, however, I encountered a problem when moving the module to the server. The product is successfully created on the ...

phphtmlprestashop-1.6

Achieving the perfect overlay and centered image effect using CSS

I am attempting to design a banner consisting of 3 images, each with dimensions of 900x420, similar to the image shown below. I am looking for advice on how to align these images such that they are horizontally centered. Any suggestions would be greatly ap ...

htmlcsstwitter-bootstrap-3

A guide to Embedding a Variable Template Within an Anchor Tag in Django Templates

Just starting out in web development, Django, python, html, you name it. Currently, I have a simple Django app that lists publication titles stored in the database. It's working fine. Now, my goal is to turn each publication title into a clickable li ...

pythonhtmldjangodjango-templates

It is not permitted to incorporate the navbar.html file into any other modules

As someone new to web development, I have been facing challenges while working with Django This is the code for my project's modules. {% include 'navbar.html' %} <h1>projects template</h1> <p>Lorem Ipsum is simply dummy ...

pythonhtmldjangowebnavbar

What steps do I need to follow in order to create an AJAX application that functions similarly to node

As someone new to ajax, I am facing challenges while trying to create a forum software similar to nodebb. Despite having developed a php forum previously, its outdated appearance prompted me to seek alternatives like nodebb for a more modern look and feel. ...

javascriptphpjqueryhtmlajax

"Clicking on a link inside a div element using the onclick

Hey there! I'm having an issue with a div that contains a link with an onclick event (see the code snippet). Inside this div, there is another link that goes to a different page than the div itself. The code works perfectly fine in IE, Chrome, and Fir ...

javascriptjqueryhtmlcss

Utilize separate CSS files in React components for better organization

Hello, I have encountered an issue with splitting my components and using react-router-dom. I decided to split the CSS for each component, such as Main.jsx - Main.css and CustomerBase.jsx - customerbase.css. However, the problem I am facing is that the CSS ...

javascriptcssreactjsreact-router-dom