diff options
| -rw-r--r-- | docs/components/navbar.md | 19 | ||||
| -rw-r--r-- | scss/_navbar.scss | 11 |
2 files changed, 29 insertions, 1 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 10d6547d0..086d49bcb 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -68,7 +68,6 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as <nav class="navbar navbar-light bg-faded"> <h1 class="navbar-brand m-b-0">Navbar</h1> </nav> - {% endexample %} ### Nav @@ -137,6 +136,24 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap </nav> {% endexample %} +### Text + +Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. + +{% example html %} +<nav class="navbar navbar-light bg-faded"> + <span class="navbar-text">Navbar text with an inline element</span> +</nav> +{% endexample %} + +Using our utility classes, you can change the alignment of your navbar text. + +{% example html %} +<nav class="navbar navbar-light bg-faded"> + <span class="navbar-text pull-xs-right">Navbar text that's floated right</span> +</nav> +{% endexample %} + ## Color schemes diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 9d3db1b26..64409f715 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -99,6 +99,17 @@ } +// Navbar text +// +// + +.navbar-text { + display: inline-block; + padding-top: .425rem; + padding-bottom: .425rem; +} + + // Navbar toggle // // Custom button for toggling the `.navbar-collapse`, powered by the collapse |