+
Click the accordions below to expand/collapse the accordion content.
+
Add
+
Add
+
The breadcrumb navigation provides links back to each previous page
the user navigated through and shows the current location in a
website or an application. You don’t have to add separators, because
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index f838ac75..cb071768 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -6,7 +6,7 @@
Card Example
+
Cards are built with as little markup and styles as possible but
still manage to deliver a bunch of control and customization. Built
with flexbox, they offer easy alignment and mix well with other
@@ -18,7 +18,7 @@
as needed. They have no fixed width to start, so they'll fill
the full width of its parent.
+
Below is an example of a basic card with mixed content and a fixed
width. Cards have no fixed width to start, so they'll naturally
fill the full width of its parent element.
@@ -43,7 +43,7 @@
+
The main block of a card is the
+
Card titles are managed by
+
Subtitles are managed by
+
+
Create lists of content in a card with a flush list group.
+
Combine and match many content types to build the card you need, or
throw everything in there. Shown below are image styles, blocks,
text styles, and a list group—all wrapped in a fixed-width card.
@@ -205,7 +205,7 @@
Card Header and footer
+
Add an optional header and/or footer within a card.
flush to remove the default
background-color, some borders, and some rounded
corners to render accordions edge-to-edge with their parent
@@ -121,7 +121,7 @@
Vue Accordion Always open
always-open property to make accordion items stay
open when another item is opened.
<CCardBody>. Use
it whenever you need a padded section within a card.
<CCardTitle> component. Identically, links are
attached and collected next to each other by
<CCardLink>
component.
<CCardSubtitle> component. If the
<CCardTitle> also, the
@@ -80,7 +80,7 @@
.card-img-top places a picture to the top of the card.
With .card-text, text can be added to the card. Text
within .card-text can additionally be styled with the
@@ -125,7 +125,7 @@
Card List groups
+
Card headers can be styled by adding ex.
component="h5".
+
Cards assume no specific width to start, so they'll
be 100% wide unless otherwise stated. You can adjust this as
required with custom CSS, grid classes, grid Sass mixins, or
services.
+
Using the grid, wrap cards in columns and rows as needed.
+
Use some of available sizing utilities Using custom CSS -
+
Use custom CSS in your stylesheets or as inline styles to set a width.
@@ -370,7 +370,7 @@ Card Text alignment+
You can instantly change the text arrangement of any card—in its
whole or specific parts—with
Card Navigation
+
Add some navigation to a
+
Similar to headers and footers, cards can include top and bottom
"image caps"—images at the top or bottom of a card.
+
Cards include various options for customizing their backgrounds,
borders, and color.
+
Use
+
Use
border utilities
+
Use
border utilitiesCard Card groups
+
Use card groups to render cards as a single, attached element with
equal width and height columns. Card groups start off stacked and
use <CCardHeader> with our
<CNav> component.
Background and color
- color property to change the appearance of a card.
Border
- Top border
- display: flex; to become attached with uniform
@@ -694,7 +694,7 @@
longer.
+
When using card groups with footers, their content will automatically line up.
@@ -750,7 +750,7 @@+
Use the CRow component and set
{xs|sm|md|lg|xl|xxl}="{ cols: * }"
property to control how many grid columns (wrapped around your
@@ -821,7 +821,7 @@
+
Change it to md="{ cols: 3}" and you'll
see the fourth card wrap.
+
Here’s a carousel with slides
+
Adding in the previous and next controls by
controls property.
+
You can attach the indicators to the carousel, lengthwise the controls, too.
@@ -77,7 +77,7 @@ Vue Carousels With captions+
You can add captions to slides with the
+
Add
+
Add
+
You can use a link or a button component.
+
The collapse plugin also supports horizontal collapsing. Add the
+
A
+
The default list group is an unordered list with items and the
proper CSS classes. Build upon it with the options that follow, or
with your CSS as required.
@@ -29,7 +29,7 @@
Vue List Group Active items
+
Add
+
Add
+
Use
+
Add
+
Add
+
Use contextual classes to style list items with a stateful
background and color.
+
Contextual classes also work with
+
Add badges to any list group item to show unread counts, activity,
and more.
+ <CCarouselCaption> element within any
<CCarouselItem>. They can be immediately hidden
@@ -125,7 +125,7 @@
Vue Carousels Crossfade
transition="crossfade" to your carousel to
animate slides with a fade transition instead of a slide.
dark property to the CCarousel for
darker controls, indicators, and captions. Controls have been
inverted from their default white fill with the
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 1e62460d..34d00f96 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -6,7 +6,7 @@
Vue Collapse
horizontal property to transition the
width instead of height and set a
@@ -67,7 +67,7 @@
Vue Collapse multi target
<CButton> can show and hide multiple elements.
Toggle multiple targets
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 13933e3f..1cf4cfbb 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -6,7 +6,7 @@
Vue List Group Basic example
active boolean property to a
<CListGroupItem> to show the current active
selection.
@@ -52,7 +52,7 @@
Vue List Group Disabled items
disabled boolean property to a
<CListGroupItem> to make it appear disabled.
<a>s or <button>s to
create actionable list group items with hover, disabled,
and active states by adding
@@ -112,7 +112,7 @@
Vue List Group Flush
flush boolean property to remove some borders and
rounded corners to render list group items edge-to-edge in a parent
container (e.g., cards).
@@ -135,7 +135,7 @@
Vue List Group Horizontal
layout="horizontal" to change the layout of
list group items from vertical to horizontal across all breakpoints.
Alternatively, choose a responsive variant
@@ -171,7 +171,7 @@
Vue List Group Contextual classes
<a>s or
<button>s. Note the addition of the hover styles
here not present in the previous example. Also supported is the
@@ -235,7 +235,7 @@
Vue List Group With badges
+
Classes are used throughout, so your markup can be super flexible.
Use
+
Change the horizontal alignment of your nav with
flexbox utilities
@@ -62,7 +62,7 @@
. By default, navs are left-aligned, but you can easily change them
to center or right aligned.
+
Centered with
+
Right-aligned with
+
Stack your navigation by changing the flex item direction with the{'
'}
+
Takes the basic nav from above and adds the
+
Take that same HTML, but use
+
Force your
+
For equal-width elements, use
+
If you need responsive nav variations, consider using a series of{'
'}
flexbox utilitiesVue Pagination
+
We use a large block of connected links for our pagination, making
links hard to miss and easily scalable—all while providing large hit
areas. Pagination is built with list HTML elements so screen readers
@@ -14,7 +14,7 @@
+
In addition, as pages likely have more than one such navigation
section, it's advisable to provide a descriptive
+
Looking to use an icon or symbol in place of text for some
pagination links? Be sure to provide proper screen reader support
with
+
Pagination links are customizable for different circumstances. Use
+
While the
+
Fancy larger or smaller pagination? Add
+
Change the alignment of pagination components with
flexbox utilitiesVue Placeholder
+
In the example below, we take a typical card component and recreate
it with placeholders applied to create a "loading card". Size and
proportions are the same between the two.
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index f10d0a3c..1127cf3c 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -29,7 +29,7 @@
Vue Popover Four directions
+
Four options are available: top, right, bottom, and left aligned.
Directions are mirrored when using CoreUI for Vue in RTL.
+
Progress components are built with two HTML elements, some CSS to
set the width, and a few attributes. We don'tuse
Vue Progress Labels
+
Add labels to your progress bars by placing text within the
+
We only set a
+
Use
+
Include multiple progress bars in a progress component if you need.
+
Add
+
The striped gradient can also be animated. Add
+
Use the border spinners for a lightweight loading indicator.
+
The border spinner uses
+
If you don'tfancy a border spinner, switch to the grow spinner.
While it doesn't technically spin, it does repeatedly grow!
+
Once again, this spinner is built with
+
Add
+
Use spinners within buttons to indicate an action is currently
processing or taking place. You may also swap the text out of the
spinner element and utilize button text as needed.
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index b0c8acef..7247135b 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -6,7 +6,7 @@
Vue Table Basic example
+
Using the most basic table CoreUI, here's how
+
Use contextual classes to color tables, table rows or individual
cells.
+
Use
+
These classes can also be added to table variants:
+
Use
+
Add
+
Border color utilities
@@ -492,7 +492,7 @@
Vue Table Tables without borders
+
Add
+
Add
+
Table cells of
+
Border styles, active styles, and table variants are not inherited
by nested tables.
+
Similar to tables and dark tables, use the modifier prop
+
A
+
You can also put the
+
Hover over the links below to see tooltips:
+
Tight pants next level keffiyeh
+
Hover over the links below to see tooltips:
+
Put a
+
Create a set of buttons that appear vertically stacked rather than
horizontally.
Split button dropdowns are not supported here.
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index 4dbd6bc7..b99174e9 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -6,7 +6,7 @@
Vue Button
+
CoreUI includes a bunch of predefined buttons components, each
serving its own semantic purpose. Buttons show what action will
happen when the user clicks or touches it. CoreUI buttons are used
@@ -57,7 +57,7 @@
Vue Button with icons
+
You can combine button with our
CoreUI Icons.
+
The
+
If you're using
+
If you need a button, but without the strong background colors. Set
+
If you need a ghost variant of button, set
+
Larger or smaller buttons? Add
+
Add the
+
Disabled buttons using the
+
+
Create buttons that span the full width of a parent—by using
utilities.
+
Here we create a responsive variation, starting with vertically
stacked buttons until the
+
You can adjust the width of your block buttons with grid column
width classes. For example, for a half-width "block button",
use
+
Additional utilities can be used to adjust the alignment of buttons
when horizontal. Here we've taken our previous responsive
example and added some flex utilities and a margin utility on the
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index fb248b6d..8b0b93b6 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -6,7 +6,7 @@
Vue Dropdown Single button
+
Here's how you can put them to work with either
+
The best part is you can do this with any button variant, too:
+
Similarly, create split button dropdowns with virtually the same
markup as single button dropdowns, but with the addition of boolean
prop
+
We use this extra class to reduce the horizontal
+
Button dropdowns work with buttons of all sizes, including default
and split dropdown buttons.
+
Opt into darker dropdowns to match a dark navbar or custom style by
set
+
And putting it to use in a navbar:
+
Trigger dropdown menus above elements by adding
+
Trigger dropdown menus at the right of the elements by adding
+
Trigger dropdown menus at the left of the elements by adding
+
Add the
+
Add the
+
A switch has the markup of a custom checkbox but uses the
+
By default, any number of checkboxes and radios that are immediate
sibling will be vertically stacked and appropriately spaced.
+
Group checkboxes or radios on the same horizontal row by adding
+
Remember to still provide some form of accessible name for assistive
technologies (for instance, using
+
Create button-like checkboxes and radio buttons by using
+
Different variants of button, such at the various outlined styles,
are supported.
+
Wrap a pair of
+
When there's a
+
By default,
+
To set a custom height on your
+
Other than
+
When working with the CoreUI for Bootstrap grid system, be sure to
place form elements within column classes.
+
Set heights using
+
Add the
+
Add the
+
If you want to have
+
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
+
Input groups wrap by default via
+
Add the relative form sizing classes to the
+
Sizing on the individual input group elements
isn'tsupported.Vue Input group Checkboxes and radios
+
Place any checkbox or radio option within an input group's addon
instead of text.
+
While multiple
+
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..
+
More complex forms can be built using our grid classes. Use these
for form layouts that require multiple columns, varied widths, and
additional alignment options.
@@ -30,7 +30,7 @@
Layout Gutters
+
By adding
gutter modifier classes
-
+
More complex layouts can also be created with the grid system.
+
Create horizontal forms with the grid by adding the
+
At times, you maybe need to use margin or padding utilities to
create that perfect alignment you need. For example, we've
removed the
+
Be sure to use
+
As shown in the previous examples, our grid system allows you to
place any number of
+
The example below uses a flexbox utility to vertically center the
contents and changes
+
You can then remix that once again with size-specific column
classes.
+ <ul>s like above, <ol> if
the order of your items is important, or roll your own with a
@@ -54,7 +54,7 @@
Vue Navs Horizontal alignment
.justify-content-center:
.justify-content-end:
.flex-column utility. Need to stack them on some
@@ -141,7 +141,7 @@
Vue Navs Tabs
variant="tabs" class to generate a tabbed
interface
@@ -171,7 +171,7 @@
Vue Navs Pills
variant="pills" instead:
.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
@@ -223,7 +223,7 @@
layout="justified". All horizontal space will
be occupied by nav links, but unlike the .nav-fill above, every nav
@@ -254,7 +254,7 @@
Vue Navs Working with flex utilities
<nav> element to identify it as a navigation
section to screen readers and other assistive technologies.
aria-label for the <nav> to reflect
@@ -40,7 +40,7 @@
Vue Pagination Working with icons
aria attributes.
@@ -68,12 +68,12 @@
Disabled and active states
disabled for links that appear un-clickable and
.active to indicate the current page.
disabled prop uses
pointer-events: none to try to disable the
link functionality of <a>s, that CSS property is
@@ -106,7 +106,7 @@
Vue Pagination Sizing
size="lg" or size="sm" for
additional sizes.
@@ -138,7 +138,7 @@
Vue Pagination Alignment
<CProgressBar>.
height value on the
<CProgress>, so if you change that value the
inner <CProgressBar> will automatically resize
@@ -84,7 +84,7 @@
Vue Progress Backgrounds
color prop to change the appearance of individual
progress bars.
variant="striped" to any
<CProgressBar> to apply a stripe via CSS gradient
over the progress bar's background color.
@@ -158,7 +158,7 @@
Vue Progress Animated stripes
animated property to
<CProgressBar> to animate the stripes right to
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
index 93658024..8c366349 100644
--- a/src/views/base/Spinners.vue
+++ b/src/views/base/Spinners.vue
@@ -6,13 +6,13 @@
Vue Spinner Border
currentColor for its
border-color. You can use any of our text color
utilities on the standard spinner.
@@ -36,14 +36,14 @@
Vue Spinner Growing
currentColor, so
you can easily change its appearance. Here it is in blue, along with
the supported variants.
@@ -67,7 +67,7 @@
Vue Spinner Size
size="sm" property to make a smaller
spinner that can quickly be used within other components.
<CTable>-based tables look in CoreUI.
striped property to add zebra-striping to any table
row within the <CTableBody>.
hover property to enable a hover state on table
rows within a <CTableBody>.
bordered property for borders on all sides of the
table and cells.
borderless property for a table without borders.
small property to make any
<CTable> more compact by cutting all cell
padding in half.
@@ -611,7 +611,7 @@
Vue Table Vertical alignment
<CTableHead> are always vertical
aligned to the bottom. Table cells in
<CTableBody> inherit their alignment from
@@ -705,7 +705,7 @@
Vue Table Nesting
color="light" or
color="dark" to make
@@ -905,7 +905,7 @@
Vue Table Captions
<CTableCaption> functions like a heading for a
table. It helps users with screen readers to find a table and
understand what it's about and decide if they want to read it.
@@ -943,7 +943,7 @@
<CTableCaption> on the top
of the table with caption="top".
<CButtonGroup> inside another
<CButtonGroup> when you need dropdown menus
combined with a series of buttons.
@@ -302,7 +302,7 @@
Vue Button Group Vertical variation
<CButton> component are designed for
<button> , <a> or
<input>
elements (though some browsers may apply a slightly different
rendering).
<CButton> component as
<a> elements that are used to trigger
functionality ex. collapsing content, these links should be given a
@@ -154,7 +154,7 @@
Vue Button outline
variant="outline" prop to remove all background
colors.
@@ -205,7 +205,7 @@
Vue Button ghost
variant="ghost" prop to remove all background
colors.
@@ -256,7 +256,7 @@
Vue Button Sizes
size="lg" or
size="sm" for additional sizes.
disabled boolean prop to any
<CButton>
component to make buttons look inactive. Disabled button has
@@ -346,11 +346,11 @@
<a> component act a
little different:
<a>s don'tsupport the
disabled attribute, so CoreUI has to add
.disabled class to make buttons look inactive. CoreUI
@@ -381,7 +381,7 @@
Vue Button Block buttons
md breakpoint, where
.d-md-block replaces the .d-grid class,
@@ -404,7 +404,7 @@
.col-6. Center it horizontally with
@@ -416,7 +416,7 @@
<button>
elements:
@@ -23,7 +23,7 @@
- split for proper spacing around the dropdown
caret.
padding on either side of the caret by 25% and remove
the margin-left that's attached for normal button
@@ -113,7 +113,7 @@
Vue Dropdown Sizing
dark property. No changes are required to the dropdown
@@ -200,7 +200,7 @@
direction="dropup" to the
<CDropdown>
@@ -289,7 +289,7 @@
Vue Dropdown Dropright
direction="dropend" to the
<CDropdown>
@@ -327,7 +327,7 @@
Vue Dropdown Dropleft
direction="dropstart" to the
<CDropdown>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index a9cfe60a..e654f717 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -8,7 +8,7 @@
Traffic
- disabled attribute and the associated
<label>s are automatically styled to match with a
lighter color to help indicate the input's state.
@@ -41,7 +41,7 @@
Vue Radio
disabled attribute and the associated
<label>s are automatically styled to match with a
lighter color to help indicate the input's state.
@@ -96,7 +96,7 @@
Vue Switches
switch boolean properly to render a toggle switch.
Switches also support the disabled attribute.
@@ -158,7 +158,7 @@
Default layout (stacked)
inline boolean property to any
<CFormCheck>.
@@ -252,7 +252,7 @@
Vue Checks and Radios Without labels
aria-label).
button boolean property on the
<CFormCheck> component. These toggle buttons can
@@ -349,7 +349,7 @@
/>
Outlined styles
- <CFormInput> and
<CFormLabel> elements in
CFormFloating to enable floating labels with textual
@@ -34,7 +34,7 @@
value already defined,
<CFormLabel>
s will automatically adjust to their floated position.
@@ -59,7 +59,7 @@
Vue Floating labels Textareas
<CFormTextarea>s will be the same
height as <CFormInput>s.
<CFormTextarea;>,
do not use the rows attribute. Instead, set an explicit
height (either inline or via custom CSS).
@@ -96,7 +96,7 @@
Vue Floating labels Selects
<CFormInput>, floating labels are only
available on <CFormSelect>s. They work in the
same way, but unlike <CFormInput>s, they'll
@@ -130,7 +130,7 @@
Vue Floating labels Layout
size property like
size="lg" and size="sm".
disabled boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
readonly boolean attribute on an input to
prevent modification of the input's value. Read-only inputs
appear lighter (just like disabled inputs), but retain the standard
@@ -125,7 +125,7 @@
Vue Form Control Readonly plain text
<input readonly> elements in
your form styled as plain text, use the
plain-text boolean property to remove the default form
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
index 7014beff..7322fc69 100644
--- a/src/views/forms/InputGroup.vue
+++ b/src/views/forms/InputGroup.vue
@@ -6,7 +6,7 @@
Vue Input group Basic example
<CFormLabel>s outside the input group.
@@ -59,7 +59,7 @@
Vue Input group Wrapping
flex-wrap: wrap in
order to accommodate custom form field validation within an input
group. You may disable this with .flex-nowrap.
@@ -83,13 +83,13 @@
Vue Input group Sizing
<CInputGroup> itself and contents within will
automatically resize—no need for repeating the form control size
classes on each element.
<CFormInput>s are supported
visually, validation styles are only available for input groups with
a single <CFormInput>.
@@ -185,7 +185,7 @@
Vue Input group Multiple addons
.row class to form groups and using the
.col-*-* classes to specify the width of your labels
@@ -116,7 +116,7 @@
<CFormLabel>s as well so they're vertically
centered with their associated form controls.
padding-top on our stacked radio inputs
@@ -192,7 +192,7 @@
Layout Horizontal form label sizing
.col-form-label-sm or
.col-form-label-lg to your
<CFormLabel>s or <legend>s to
@@ -254,7 +254,7 @@
Layout Column sizing
<CCol>s within a <CRow>.
@@ -286,7 +286,7 @@
Layout Auto-sizing
<CCol> to
@@ -337,7 +337,7 @@