While updating to Bootstrap 5, I had a few elements that did not look as they should. The Chrome Developer Tools are great to show you all the different styles and where they are from, but if you need to figure out what part exactly is missing, the Developer Tools do not help that much.
I needed a different solution and found one with the Chrome extension CSS-Used. After installing it from the Chrome Web Store, you get a new tab inside the Developer Tools next to the other tabs for Styles and Layout:
You can now select an element on a web page with the Inspect context menu and then you find all CSS rules for that element in the CSS Used tab. From there you can copy the CSS rules or open them directly in CodePen, where you can change and modify the rules and get immediate feedback:
I copied the definition to a file, formatted it to look usable and then did the same with the element that worked. I run my diff tool on the two files, and it showed me where they differ. From there on I knew what I needed to copy and got it finally working.