question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested .btn-group doesn't inherit .btn-group-[size]

See original GitHub issue

When one adds a dropdown to a button group, one must wrap it in .btn-group as documented here: https://getbootstrap.com/docs/4.0/components/button-group/#nesting.

However, when applying .btn-group-sm to the outer button group, the dropdown button inside the inner button group don’t inherit the size set by the outer button group.

An example case is here: https://codepen.io/anon/pen/qxeqJK Both buttons should be the small size.

Looking at the SCSS file, the rule selector is .btn-group-sm>.btn, .btn-sm. I’m not certain why the > needs to be there - I can’t picture a use case where I’d set a size on an outer button group, and not have it cascade to any inner button groups.

I doubt this is a browser quirk, but nonetheless my OS is Win 10, and this is appearing on both Firefox and Chrome.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
quasipicklecommented, Mar 7, 2018

Fair point. This may be why you author the world’s most popular UI framework and I do not.

0reactions
mdocommented, Mar 7, 2018

What if your markup is nested within another wrapping element? Limiting to immediate children like that further limits the effectiveness of the code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

justified nested button group in bootstrap 4 - css - Stack Overflow
I ran into this problem as well. I was able to fix it by adding the flex-fill class to the div of the...
Read more >
ButtonGroup (Java Platform SE 7 ) - Oracle Help Center
A ButtonGroup can be used with any set of objects that inherit from AbstractButton . Typically a button group contains instances of JRadioButton ......
Read more >
Button group - Bootstrap
Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Read more >
Components · Bootstrap 3.0.3 Documentation - BootstrapDocs
Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns...
Read more >
A Complete Guide to Links and Buttons - CSS-Tricks
Our complete guide to links, buttons, and button-like inputs in HTML, ... When a link has no href , it has no role,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found