Here’s a carousel with slides
-Click the accordions below to expand/collapse the accordion content.
-<CCardBody>. Use it whenever you
need a padded section within a card.
- <CCardBody> item, the card title, and subtitle are
arranged rightly.
- .card-text, text can be added to the card. Text within{' '}
.card-text can additionally be styled with the regular HTML tags.
- Create lists of content in a card with a flush list group.
-Add an optional header and/or footer within a card.
-
Card headers can be styled by adding ex. component="h5".
Using the grid, wrap cards in columns and rows as needed.
-Use some of{' '} available sizing utilities to rapidly set a card's width.
-Use custom CSS in your stylesheets or as inline styles to set a width.
-<CCardHeader> with our{' '}
<CNav> component.
-
Use color property to change the appearance of a card.
Use border utilities to change
@@ -664,7 +664,7 @@ const Cards = () => {
textColor property on the <CCard> or a subset of the
card's contents as shown below.
Use border utilities to change
@@ -698,7 +698,7 @@ const Cards = () => {
textColor property on the <CCard> or a subset of the
card's contents as shown below.
display: flex; to
become attached with uniform dimensions starting at the sm breakpoint.
- When using card groups with footers, their content will automatically line up.
-md={{cols: 1}} splitting
four cards to equal width across multiple rows, from the medium breakpoint up.
-
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.
-.d-none and draw them back on medium-sized devices with{' '}
.d-md-block.
- transition="crossfade" to your carousel to animate slides
with a fade transition instead of a slide.
- filter CSS property. Captions and controls have additional Sass
variables that customize the color and background-color.
- You can use a link or a button component.
-
A <CButton> can show and hide multiple elements.
active boolean property to a <CListGroupItem> to
show the current active selection.
- disabled boolean property to a <CListGroupItem> to
make it appear disabled.
- <div>
s) don'tprovide a click or tap affordance.
- 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).
- min-width. Currently{' '}
horizontal list groups cannot be combined with flush list groups.
- Use contextual classes to style list items with a stateful background and color.
-
Contextual classes also work with <a>s or{' '}
<button>s. Note the addition of the hover styles here not present
in the previous example. Also supported is the active state; apply it to
indicate an active selection on a contextual list group item.
Add badges to any list group item to show unread counts, activity, and more.
-
Classes are used throughout, so your markup can be super flexible. Use{' '}
<ul>s like above, <ol> if the order of your
@@ -60,7 +60,7 @@ const Navs = () => {
the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup.
Centered with .justify-content-center:
Right-aligned with .justify-content-end:
.flex-column utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., .flex-sm-column).
- variant="tabs" class
to generate a tabbed interface
-
Take that same HTML, but use variant="pills" instead:
.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.
aria-label="Search results pages".
- aria attributes.
- tabindex="-1" on disabled links and use
custom JavaScript to fully disable their functionality.
- size="lg" or{' '}
size="sm" for additional sizes.
- <CProgressBar>.
- <CProgressBar> will automatically
resize accordingly.
-
Use color prop to change the appearance of individual progress bars.
Include multiple progress bars in a progress component if you need.
-variant="striped" to any <CProgressBar> to
apply a stripe via CSS gradient over the progress bar's background color.
- <CProgressBar> to animate the stripes right to left via CSS3
animations.
- Use the border spinners for a lightweight loading indicator.
-
The border spinner uses currentColor for its border-color.
You can use any of our text color utilities on the standard spinner.
Once again, this spinner is built with currentColor, so you can easily
change its appearance. Here it is in blue, along with the supported variants.
size="sm" property to make a smaller spinner that can quickly
be used within other components.
- <CTable>-based
tables look in CoreUI.
- Use contextual classes to color tables, table rows or individual cells.
-striped property to add zebra-striping to any table row within the{' '}
<CTableBody>.
- These classes can also be added to table variants:
-hover property to enable a hover state on table rows within a{' '}
<CTableBody>.
-
Add bordered property for borders on all sides of the table and cells.
Border color utilities {' '} can be added to change colors:
-
Add borderless property for a table without borders.
small property to make any <CTable> more compact
by cutting all cell padding in half.
- <CTable> and are aligned to the the top by default. Use the align
property to re-align where needed.
- Border styles, active styles, and table variants are not inherited by nested tables.
-color="light" or color="dark" to make{' '}
<CTableHead>s appear light or dark gray.
-
You can also put the <CTableCaption> on the top of the table with{' '}
caption="top".
Hover over the links below to see tooltips:
-
Tight pants next level keffiyeh
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
-<CButton> components in{' '}
<CButtonGroup>.{' '}
-
These classes can also be added to groups of links, as an alternative to the{' '}
<CNav> components.
Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
-size property to all <CButtonGroup>'s, including
each one when nesting multiple groups.
- <CButtonGroup> when you need dropdown menus combined with a series
of buttons.
- You can combine button with our CoreUI Icons.
-role="button" to adequately communicate their
meaning to assistive technologies such as screen readers.
- variant="outline" prop to remove all background colors.
- variant="ghost" prop
to remove all background colors.
- size="lg" or{' '}
size="sm" for additional sizes.
- pointer-events: none applied to, disabling hover and active states from
triggering.
-
Disabled buttons using the <a> component act a little different:
aria-disabled="true" attribute to show the state of the component
to assistive technologies.
- 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 md breakpoint, where .d-md-block replaces the{' '}
.d-grid class, thus nullifying the gap-2 utility. Resize
your browser to see them change.
You can adjust the width of your block buttons with grid column width classes. For
example, for a half-width "block button", use .col-6. Center it
horizontally with .mx-auto, too.
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 button to right align the buttons when they're no longer stacked.
-<button>{' '}
elements:
- The best part is you can do this with any button variant, too:
-dark property. No changes are required to the dropdown items.
- And putting it to use in a navbar:
-direction="dropup" to the <CDropdown>{' '}
component.
- direction="dropend" to the <CDropdown>{' '}
component.
- direction="dropstart" to the <CDropdown>{' '}
component.
- disabled{' '}
attribute.
- inline{' '}
boolean property to any <CFormCheck>.
- aria-label).
- <CFormCheck> component. These toggle buttons can
further be grouped in a button group if needed.
- Different variants of button, such at the various outlined styles, are supported.
-<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.
<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).
size and multiple are not supported.
- 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.
- plainText boolean property to remove the default
form field styling and preserve the correct margin and padding.
- <CFormLabel>s outside the
input group.
- .flex-nowrap.
- Sizing on the individual input group elements isn'tsupported.
-Place any checkbox or radio option within an input group's addon instead of text.
-<CFormInput>.
- More complex layouts can also be created with the grid system.
-padding-top on our
stacked radio inputs label to better align the text baseline.
- <CFormLabel>s or <legend>s to correctly
follow the size of .form-control-lg and .form-control-sm.
- <CCol sm="7">.
- You can then remix that once again with size-specific column classes.
-.align-items-center aligns the form elements to the middle, making the{' '}
<CFormCheck> align properly.
- <input type="range"> controls with{' '}
<CFormRange>.
- disabled boolean attribute on an input to give it a grayed out
appearance and remove pointer events.
- 0 and 100, respectively. You may specify new values for
those using the min and max attributes.
- step value. In the example below, we double the number of steps
by using step="0.5".
-
The multiple attribute is also supported:
As is the htmlSize property:
disabled boolean attribute on a select to give it a grayed out
appearance and remove pointer events.
- id to be referenced, in case the field
already points to additional form text).
- <CFormCheck>s
- <CAlertLink> component to immediately give matching colored
links inside any alert.
- @@ -116,7 +116,7 @@ const Alerts = () => { tidy.
Alerts can also be easily dismissed. Just add the dismissible prop.
em units.
- Badges can be used as part of links or buttons to provide a counter.
-Remark that depending on how you use them, badges may be complicated for users of screen readers and related assistive technologies. @@ -54,12 +54,12 @@ const Badges = () => { Unless the context is clear, consider including additional context with a visually hidden piece of additional text.
-color props to modify the presentation of
a badge.
-
Apply the shape="rounded-pill" prop to make badges rounded.
You can also create a scrollable modal that allows scroll the modal body by adding{' '}
scrollable prop.
alignment="center" to <CModal> to
vertically center the modal.
- Toasts are slightly translucent to blend in with what's below them.
-Alternatively, you can also add additional controls and components to toasts.
-white property to our close button. For a crisp edge, we remove the
default border with .border-0.
-