- The base .nav component is built with flexbox and provide a strong
- foundation for building all types of navigation components. It includes some style
- overrides (for working with lists), some link padding for larger hit areas, and basic
- disabled styling.
-
- Classes are used throughout, so your markup can be super flexible. Use{' '}
- <ul>s like above, <ol> if the order of your
- items is important, or roll your own with a <nav> element. Because
- the .nav uses display: flex, the nav links behave the same as nav items would, but
- without the extra markup.
-
+ The base .nav component is built with flexbox and
+ provide a strong foundation for building all types of navigation
+ components. It includes some style overrides (for working with
+ lists), some link padding for larger hit areas, and basic disabled
+ styling.
+
- Change the horizontal alignment of your nav with{' '} - - flexbox utilities - - . By default, navs are left-aligned, but you can easily change them to center or right - aligned. -
-
- Centered with .justify-content-center:
-
- Right-aligned with .justify-content-end:
-
- Stack your navigation by changing the flex item direction with the{' '}
- .flex-column utility. Need to stack them on some viewports but not
- others? Use the responsive versions (e.g., .flex-sm-column).
-
- Takes the basic nav from above and adds the variant="tabs" class
- to generate a tabbed interface
-
- Take that same HTML, but use variant="pills" instead:
-
- Force your .nav's contents to extend the full available width one of
- two modifier classes. To proportionately fill all available space with your{' '}
- .nav-items, use layout="fill". Notice that all
- horizontal space is occupied, but not every nav item has the same width.
-
- For equal-width elements, use layout="justified". All horizontal
- space will be occupied by nav links, but unlike the .nav-fill above, every nav item
- will be the same width.
-
- If you need responsive nav variations, consider using a series of{' '} - flexbox utilities. While more - verbose, these utilities offer greater customization across responsive breakpoints. In - the example below, our nav will be stacked on the lowest breakpoint, then adapt to a - horizontal layout that fills the available width starting from the small breakpoint. -
-
+ Classes are used throughout, so your markup can be super flexible.
+ Use{' '}
+ <ul>s like above, <ol> if the
+ order of your items is important, or roll your own with a
+ <nav> element. Because the .nav uses display:
+ flex, the nav links behave the same as nav items would, but without
+ the extra markup.
+
+ Change the horizontal alignment of your nav with{' '} + + flexbox utilities + + . By default, navs are left-aligned, but you can easily change them + to center or right aligned. +
+
+ Centered with .justify-content-center:
+
+ Right-aligned with .justify-content-end:
+
+ Stack your navigation by changing the flex item direction with the{'
+ '}
+ .flex-column utility. Need to stack them on some
+ viewports but not others? Use the responsive versions (e.g.,
+ .flex-sm-column).
+
+ Takes the basic nav from above and adds the
+ variant="tabs" class to generate a tabbed
+ interface
+
+ Take that same HTML, but use
+ variant="pills" instead:
+
+ Force your .nav's contents to extend the full
+ available width one of two modifier classes. To proportionately fill
+ all available space with your{' '} .nav-items, use
+ layout="fill". Notice that all horizontal space
+ is occupied, but not every nav item has the same width.
+
+ For equal-width elements, use
+ layout="justified". All horizontal space will
+ be occupied by nav links, but unlike the .nav-fill above, every nav
+ item will be the same width.
+
+ If you need responsive nav variations, consider using a series of{' + '} + flexbox utilities. While more verbose, these utilities offer greater customization + across responsive breakpoints. In the example below, our nav will be + stacked on the lowest breakpoint, then adapt to a horizontal layout + that fills the available width starting from the small breakpoint. +
+@@ -84,7 +85,9 @@ disabled links and use custom JavaScript to fully disable their functionality.
-- Border color utilities can be added to change colors: + Border color utilities + + can be added to change colors:
@@ -84,12 +85,24 @@
role="group"
aria-label="Basic checkbox toggle button group"
>
-
Group checkboxes or radios on the same horizontal row by adding
- inline boolean property to any
+ inline boolean property to any
<CFormCheck>.
- Wrap a pair of <CFormInput> and <CFormLabel>
- elements in CFormFloating to enable floating labels with textual form
- fields. A placeholder is required on each <CFormInput>
- as our method of CSS-only floating labels uses the :placeholder-shown
- pseudo-element. Also note that the <CFormInput> must come first so
- we can utilize a sibling selector (e.g., ~).
-
- When there's a value already defined, <CFormLabel>
- s will automatically adjust to their floated position.
-
- By default, <CFormTextarea>s will be the same height as
- <CFormInput>s.
-
- To set a custom height on your <CFormTextarea;>, do not use the
- rows attribute. Instead, set an explicit height (either
- inline or via custom CSS).
-
- Other than <CFormInput>, floating labels are only available on
- <CFormSelect>s. They work in the same way, but unlike
- <CFormInput>s, they'll always show the
- <CFormLabel> in its floated state.
-
- Selects with size and multiple are not supported.
-
-
- When working with the CoreUI for Bootstrap grid system, be sure to place form elements - within column classes. -
-
+ Wrap a pair of <CFormInput> and
+ <CFormLabel> elements in
+ CFormFloating to enable floating labels with textual
+ form fields. A placeholder is required on each
+ <CFormInput> as our method of CSS-only floating
+ labels uses the :placeholder-shown pseudo-element. Also
+ note that the <CFormInput> must come first so we
+ can utilize a sibling selector (e.g., ~).
+
+ When there's a value already defined,
+ <CFormLabel>
+ s will automatically adjust to their floated position.
+
+ By default, <CFormTextarea>s will be the same
+ height as <CFormInput>s.
+
+ To set a custom height on your <CFormTextarea;>,
+ do not use the rows attribute. Instead, set an explicit
+ height (either inline or via custom CSS).
+
+ Other than <CFormInput>, floating labels are only
+ available on <CFormSelect>s. They work in the
+ same way, but unlike <CFormInput>s, they'll
+ always show the <CFormLabel> in its floated
+ state.
+
+ Selects with size and multiple are not
+ supported.
+
+
+ When working with the CoreUI for Bootstrap grid system, be sure to + place form elements within column classes. +
+
- Place one add-on or button on either side of an input. You may also place one on both
- sides of an input. Remember to place <CFormLabel>s outside the
- input group.
-
+ Place one add-on or button on either side of an input. You may also
+ place one on both sides of an input. Remember to place
+ <CFormLabel>s outside the input group.
+
+ Input groups wrap by default via flex-wrap: wrap in
+ order to accommodate custom form field validation within an input
+ group. You may disable this with .flex-nowrap.
+
+ Add the relative form sizing classes to the
+ <CInputGroup> itself and contents within will
+ automatically resize—no need for repeating the form control size
+ classes on each element.
+
+ Sizing on the individual input group elements + isn'tsupported. +
++ Place any checkbox or radio option within an input group's addon + instead of text. +
+
- Input groups wrap by default via flex-wrap: wrap in order to accommodate
- custom form field validation within an input group. You may disable this with
- .flex-nowrap.
-
- Add the relative form sizing classes to the <CInputGroup> itself
- and contents within will automatically resize—no need for repeating the form control
- size classes on each element.
-
- Sizing on the individual input group elements isn'tsupported. -
-- Place any checkbox or radio option within an input group's addon instead of text. -
-
- While multiple <CFormInput>s are supported visually, validation
- styles are only available for input groups with a single
- <CFormInput>.
-
- Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -
-- Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -
-
+ While multiple <CFormInput>s are supported
+ visually, validation styles are only available for input groups with
+ a single <CFormInput>.
+
+ Multiple add-ons are supported and can be mixed with checkbox and + radio input versions.. +
++ Multiple add-ons are supported and can be mixed with checkbox and + radio input versions.. +
+
Create custom
@@ -87,6 +85,6 @@
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index bc1ad40c..56507a82 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -111,6 +111,6 @@
diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue
index 0952b2c4..48b1fc2d 100644
--- a/src/views/forms/Validation.vue
+++ b/src/views/forms/Validation.vue
@@ -28,7 +28,7 @@
:validated="validatedCustom01"
@submit="handleSubmitCustom01"
>
-
- Vue Alert is prepared for any length of text, as well as an
- optional close button. For a styling, use one of the
- required contextual color props
- (e.g., primary). For inline dismissal, use the
+ Vue Alert is prepared for any length of text, as well as an optional
+ close button. For a styling, use one of the
+ required contextual color props (e.g.,
+ primary). For inline dismissal, use the
@@ -149,11 +149,11 @@
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 4cf463ab..80081789 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -93,6 +93,6 @@
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index cd92ae6b..589159be 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1024,25 +1024,42 @@
+ The page you are looking for was not found. +
++ The page you are looking for is temporarily unavailable. +
+ +Create your account
+Documentation and examples for Bootstrap typography, - including global settings, headings, body text, lists, and more.
-
-
- <h1></h1>
-
-
-
- <h2></h2>
-
-
-
- <h3></h3>
-
-
-
- <h4></h4>
-
-
-
- <h5></h5>
-
-
-
- <h6></h6>
-
-
- .h1 through
- .h6
- classes are also available, for when you want to match the font
- styling of a heading but cannot use the associated HTML element.
-
h1. Bootstrap heading
-h2. Bootstrap heading
-h3. Bootstrap heading
-h4. Bootstrap heading
-h5. Bootstrap heading
-h6. Bootstrap heading
-- Traditional heading elements are designed to work best in the meat - of your page content. When you need a heading to stand out, - consider using a display heading—a larger, - slightly more opinionated heading style. -
-+ Documentation and examples for Bootstrap typography, including + global settings, headings, body text, lists, and more. +
+
+ <h1></h1>
+
+
+
+ <h2></h2>
+
+
+
+ <h3></h3>
+
+
+
+ <h4></h4>
+
+
+
+ <h5></h5>
+
+
+
+ <h6></h6>
+
+
- Traditional heading elements are designed to work best in the meat - of your page content. When you need a heading to stand out, - consider using a display heading—a larger, - slightly more opinionated heading style. -
-You can use the mark tag to highlight text.
-
- This line of text is meant to be treated as deleted text.
-
- This line of text is meant to be treated as no longer accurate.
-
- This line of text is meant to be treated as an addition to the document. -
-This line of text will render as underlined
-- This line of text is meant to be treated as fine print. -
-This line rendered as italicized text.
-
- Align terms and descriptions horizontally by using our grid system’s
- predefined classes (or semantic mixins). For longer terms, you can
- optionally add a .text-truncate
- class to truncate the text with an ellipsis.
-
+ .h1 through
+ .h6
+ classes are also available, for when you want to match the font
+ styling of a heading but cannot use the associated HTML element.
+
h1. Bootstrap heading
+h2. Bootstrap heading
+h3. Bootstrap heading
+h4. Bootstrap heading
+h5. Bootstrap heading
+h6. Bootstrap heading
++ Traditional heading elements are designed to work best in the meat + of your page content. When you need a heading to stand out, consider + using a display heading—a larger, slightly more + opinionated heading style. +
++ Traditional heading elements are designed to work best in the meat + of your page content. When you need a heading to stand out, consider + using a display heading—a larger, slightly more + opinionated heading style. +
+You can use the mark tag to highlight text.
+
+
+ This line of text is meant to be treated as deleted text.
+
+
+
+ This line of text is meant to be treated as no longer accurate.
+
+
+ + This line of text is meant to be treated as an addition to the + document. + +
+This line of text will render as underlined
++ + This line of text is meant to be treated as fine print. + +
+
+
This line rendered as italicized text.
+
+ Align terms and descriptions horizontally by using our grid system’s
+ predefined classes (or semantic mixins). For longer terms, you can
+ optionally add a
+ .text-truncate
+ class to truncate the text with an ellipsis.
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
-Donec id elit non mi porta gravida at eget metus.
-+ Vestibulum id ligula porta felis euismod semper eget lacinia + odio sem nec elit. +
+Donec id elit non mi porta gravida at eget metus.
+