Following up on #21389, this PR is a WIP for adding the flexbox navbar. It started off as a late night experiment again with display: table
—which was pretty awesome mind you—and got me thinking heavily about flex options. Given we're going all flex now, this approach gets even easier.
Still a ton to do, but wanted to open this sooner than later.
Done
- Fixes #18875 (closed) and fixes #18875 (closed) with move to flexbox-based approach.
- Fixes #20937 (closed) by closing out all the below issues.
- Moves
.navbar-toggleable-*
from the.collapse
to the.navbar
, making it even easier to toggle content as needed. - Fixes #21364 (closed) by updating all examples to use new navbars.
- Revamp navbar docs to push responsive implementation from the get-go instead of at the end. Also adds new examples.
- Fixes #21361 (closed) by changing how togglers works. Alignment has changed and the icon is now a separate element,
.navbar-toggler-icon
, within.navbar-toggler
. - Adds left and right absolutely positioned toggler variations.
- Fixes #20766 (closed) with ability to center navbar links (with example in docs)
- Fixes #18115 (closed): Renamed
.navbar-dark
to.navbar-inverse
to match nomenclature of.bg-inverse
and.card-inverse
..navbar-light
is still the default class.
Todo
-
Fixes #21012 (closed) Better toggler styling and alignment -
Fixes #18053 (closed): Container adding extra padding for mobile sizes -
Fixes #20116 (closed): .navbar-text
is supported and documented properly. -
Migration docs