-
+ {subItems?.map((subItem, subIndex) =>
+ subItem.items
+ ? renderNavGroup(subItem, subIndex)
+ : renderNavItem(subItem, subIndex, true),
+ )}
+
-
+ {items && items.map((item, index) => renderItem(item, index))}
+
- Click the accordions below to expand/collapse the accordion content. -
-.accordion-body, though the
- transition does limit overflow.
- .accordion-body, though the
- transition does limit overflow.
- .accordion-body, though the
- transition does limit overflow.
-
- Add flush to remove the default background-color, some
- borders, and some rounded corners to render accordions edge-to-edge with their parent
- container.
-
.accordion-body, though the
- transition does limit overflow.
- .accordion-body, though the
- transition does limit overflow.
- .accordion-body, though the
- transition does limit overflow.
-
- Add alwaysOpen property to make accordion items stay open when another
- item is opened.
-
.accordion-body, though the
- transition does limit overflow.
- .accordion-body, though the
- transition does limit overflow.
- .accordion-body, though the
- transition does limit overflow.
-
- 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 they automatically added in CSS through{' '}
-
- {' '}
- ::before
- {' '}
- and{' '}
-
- {' '}
- content
-
- .
-
- 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 CoreUI components. Cards have no top, left, and - right margins by default, so use{' '} - spacing utilities 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. -
-
- The main block of a card is the <CCardBody>. Use it whenever you
- need a padded section within a card.
-
- Card titles are managed by <CCardTitle> component. Identically,
- links are attached and collected next to each other by <CCardLink>{' '}
- component.
-
- Subtitles are managed by <CCardSubtitle> component. If the{' '}
- <CCardTitle> also, the <CCardSubtitle> items are
- stored in a <CCardBody> item, the card title, and subtitle are
- arranged rightly.
-
- .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 regular HTML tags.
-
- 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. -
-- Add an optional header and/or footer within a card. -
-
- Card headers can be styled by adding ex. as="h5".
-
--- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat - a ante. -
- -
- 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 grid markup
-- Using the grid, wrap cards in columns and rows as needed. -
-Using utilities
-- 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. -
-- You can instantly change the text arrangement of any card—in its whole or specific - parts—with{' '} - text align classes - . -
-
- Add some navigation to a <CCardHeader> with our{' '}
- <CNav> component.
-
- 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. -
-Background and color
-
- Use color property to change the appearance of a card.
-
Border
-
- Use border utilities to change
- just the border-color of a card. Note that you can set{' '}
- textColor property on the <CCard> or a subset of the
- card's contents as shown below.
-
Top border
-
- Use border utilities to change
- just the border-color of a card. Note that you can set{' '}
- textColor property on the <CCard> or a subset of the
- card's contents as shown below.
-
- Use card groups to render cards as a single, attached element with equal width and
- height columns. Card groups start off stacked and use 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. -
-
- Use the CRow component and set{' '}
- {xs|sm|md|lg|xl|xxl}={{ cols: * }} property
- to control how many grid columns (wrapped around your cards) you show per row. For
- example, here's xs={{cols: 1}} laying out the
- cards on one column, and 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. -
-
- You can add captions to slides with the <CCarouselCaption> element
- within any <CCarouselItem>. They can be immediately hidden on
- smaller viewports, as shown below, with optional{' '}
- display utilities. We hide them
- with .d-none and draw them back on medium-sized devices with{' '}
- .d-md-block.
-
First slide label
-Some representative placeholder content for the first slide.
-Second slide label
-Some representative placeholder content for the first slide.
-Third slide label
-Some representative placeholder content for the first slide.
-
- Add transition="crossfade" to your carousel to animate slides
- with a fade transition instead of a slide.
-
- Add dark property to the CCarousel for darker controls,
- indicators, and captions. Controls have been inverted from their default white fill
- with the filter CSS property. Captions and controls have additional Sass
- variables that customize the color and background-color.
-
First slide label
-Some representative placeholder content for the first slide.
-Second slide label
-Some representative placeholder content for the first slide.
-Third slide label
-Some representative placeholder content for the first slide.
-You can use a link or a button component.
-You can use a link or a button component.
-
- A <CButton> can show and hide multiple elements.
-
- 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. -
-
- Add active boolean property to a <CListGroupItem> to
- show the current active selection.
-
- Add disabled boolean property to a <CListGroupItem> to
- make it appear disabled.
-
- Use <a>s or <button>s to create{' '}
- actionable list group items with hover, disabled, and active states by adding{' '}
- as="a|button". We separate these pseudo-classes to ensure list
- groups made of non-interactive elements (like <li>s or{' '}
- <div>
- s) don'tprovide a click or tap affordance.
-
- Add 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).
-
- Add layout="horizontal" to change the layout of list group items
- from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
- variant .layout="horizontal-{sm | md | lg | xl | xxl}"{' '}
- to make a list group horizontal starting at that breakpoint's{' '}
- 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. -
-- Add nearly any HTML within, even for linked list groups like the one below, with the - help of flexbox utilities. -
-List group item heading
- 3 days ago -- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -
- Donec id elit non mi porta. -List group item heading
- 3 days ago -- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -
- Donec id elit non mi porta. -List group item heading
- 3 days ago -- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -
- Donec id elit non mi porta. -- Place CoreUI's checkboxes and radios within list group items and customize as - needed. -
-
- 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.
-
- 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. -
-
- 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 can announce the number of available links. Use a
- wrapping <nav> element to identify it as a navigation section to
- screen readers and other assistive technologies.
-
- In addition, as pages likely have more than one such navigation section, it's
- advisable to provide a descriptive aria-label for the{' '}
- <nav> to reflect its purpose. For example, if the pagination
- component is used to navigate between a set of search results, an appropriate label
- could be aria-label="Search results pages".
-
- Looking to use an icon or symbol in place of text for some pagination links? Be sure
- to provide proper screen reader support with aria attributes.
-
- Pagination links are customizable for different circumstances. Use{' '}
- disabled for links that appear un-clickable and .active to
- indicate the current page.
-
- While the disabled prop uses pointer-events: none to{' '}
- try to disable the link functionality of <a>s, that CSS
- property is not yet standardized and doesn'taccount for keyboard navigation. As
- such, we always add tabindex="-1" on disabled links and use
- custom JavaScript to fully disable their functionality.
-
- Fancy larger or smaller pagination? Add size="lg" or{' '}
- size="sm" for additional sizes.
-
- Change the alignment of pagination components with{' '} - flexbox utilities. -
-- 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. -
-
- Create placeholders with the <CPlaceholder> component and a grid
- column propx (e.g., xs={6}) to set the width. They can
- replace the text inside an element or be added as a modifier class to an existing
- component.
-
- You can change the width through grid column classes, width utilities, or
- inline styles.
-
- By default, the <CPlaceholder> uses currentColor. This
- can be overridden with a custom color or utility class.
-
- The size of <CPlaceholder>s are based on the typographic style of
- the parent element. Customize them with size prop: lg,{' '}
- sm, or xs.
-
- Animate placeholders with animation="glow" or{' '}
- animation="wave" to better convey the perception of something
- being actively loaded.
-
- Four options are available: top, right, bottom, and left aligned. Directions are - mirrored when using CoreUI for React in RTL. -
-
- Progress components are built with two HTML elements, some CSS to set the width, and a
- few attributes. We don'tuse{' '}
-
- the HTML5 <progress> element
-
- , ensuring you can stack progress bars, animate them, and place text labels over them.
-
- Add labels to your progress bars by placing text within the{' '}
- <CProgressBar>.
-
- We only set a height value on the <CProgress>, so if
- you change that value the inner <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. -
-
- Add variant="striped" to any <CProgressBar> to
- apply a stripe via CSS gradient over the progress bar's background color.
-
- The striped gradient can also be animated. Add animated property to{' '}
- <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.
-
- 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 currentColor, so you can easily
- change its appearance. Here it is in blue, along with the supported variants.
-
- Add size="sm" property to make a smaller spinner that can quickly
- be used within other components.
-
- 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. -
-
- Using the most basic table CoreUI, here's how <CTable>-based
- tables look in CoreUI.
-
- Use contextual classes to color tables, table rows or individual cells. -
-
- Use striped property to add zebra-striping to any table row within the{' '}
- <CTableBody>.
-
- These classes can also be added to table variants: -
-
- Use 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.
-
- Add small property to make any <CTable> more compact
- by cutting all cell padding in half.
-
- Table cells of <CTableHead> are always vertical aligned to the
- bottom. Table cells in <CTableBody> inherit their alignment from{' '}
- <CTable> and are aligned to the the top by default. Use the align
- property to re-align where needed.
-
vertical-align: middle; from the table
- vertical-align: middle; from the table
- vertical-align: middle; from the table
- vertical-align: bottom; from the table row
- vertical-align: bottom; from the table row
- vertical-align: bottom; from the table row
- vertical-align: middle; from the table
- vertical-align: middle; from the table
- - Border styles, active styles, and table variants are not inherited by nested tables. -
-
- Similar to tables and dark tables, use the modifier prop{' '}
- color="light" or color="dark" to make{' '}
- <CTableHead>s appear light or dark gray.
-
- A <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.
-
- You can also put the <CTableCaption> on the top of the table with{' '}
- caption="top".
-
- The basic React tabs example uses the variant="tabs" props to
- generate a tabbed interface.
-
- If you don’t provide the variant prop, the component will default to a
- basic style.
-
- Take that same code, but use variant="pills" instead:
-
- Take that same code, but use variant="underline" instead:
-
- Take that same code, but use variant="underline-border" instead:
-
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. -
-
- Wrap a series of <CButton> components in{' '}
- <CButtonGroup>.{' '}
-
- These classes can also be added to groups of links, as an alternative to the{' '}
- <CNav> components.
-
- Combine button-like checkbox and radio toggle buttons into a seamless looking button - group. -
-- Join sets of button groups into button toolbars for more complicated components. Use - utility classes as needed to space out groups, buttons, and more. -
-- 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. -
-
- Alternatively, of implementing button sizing classes to each button in a group, set{' '}
- size property to all <CButtonGroup>'s, including
- each one when nesting multiple groups.
-
-
-
- Put a <CButtonGroup> inside another{' '}
- <CButtonGroup> when you need dropdown menus combined with a series
- of buttons.
-
- Create a set of buttons that appear vertically stacked rather than horizontally.{' '} - Split button dropdowns are not supported here. -
-- 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 to initialize operations, both in the background or - foreground of an experience. -
-- You can combine button with our CoreUI Icons. -
-
- The <CButton> component are designed for{' '}
- <button> , <a> or <input>{' '}
- elements (though some browsers may apply a slightly different rendering).
-
- If you're using <CButton> component as <a>{' '}
- elements that are used to trigger functionality ex. collapsing content, these links
- should be given a role="button" to adequately communicate their
- meaning to assistive technologies such as screen readers.
-
- If you need a button, but without the strong background colors. Set{' '}
- variant="outline" prop to remove all background colors.
-
- If you need a ghost variant of button, set variant="ghost" prop
- to remove all background colors.
-
- Larger or smaller buttons? Add size="lg" or{' '}
- size="sm" for additional sizes.
-
- Add the disabled boolean prop to any <CButton>{' '}
- component to make buttons look inactive. Disabled button has{' '}
- pointer-events: none applied to, disabling hover and active states from
- triggering.
-
- Disabled buttons using the <a> component act a little different:
-
- <a>s don'tsupport the disabled attribute, so
- CoreUI has to add .disabled className to make buttons look inactive.
- CoreUI also has to add to the disabled button component{' '}
- 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. -
-
- Here's how you can put them to work with either <button>{' '}
- elements:
-
- 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 split for proper
- spacing around the dropdown caret.
-
- We use this extra class to reduce the horizontal padding on either side
- of the caret by 25% and remove the margin-left that's attached for
- normal button dropdowns. Those additional changes hold the caret centered in the split
- button and implement a more properly sized hit area next to the main button.
-
- 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{' '}
- dark property. No changes are required to the dropdown items.
-
And putting it to use in a navbar:
-
- Trigger dropdown menus above elements by adding{' '}
- direction="dropup" to the <CDropdown>{' '}
- component.
-
- Trigger dropdown menus at the right of the elements by adding{' '}
- direction="dropend" to the <CDropdown>{' '}
- component.
-
- Trigger dropdown menus at the left of the elements by adding{' '}
- direction="dropstart" to the <CDropdown>{' '}
- component.
-
+
+
+
+
+
Traffic
-
- - {progressGroupExample1.map((item, index) => ( -
- - {progressGroupExample2.map((item, index) => ( -
+
- Add the disabled attribute and the associated <label>s
- are automatically styled to match with a lighter color to help indicate the
- input's state.
-
- Add the disabled attribute and the associated <label>s
- are automatically styled to match with a lighter color to help indicate the
- input's state.
-
- A switch has the markup of a custom checkbox but uses the switch boolean
- properly to render a toggle switch. Switches also support the disabled{' '}
- attribute.
-
- 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 inline{' '}
- boolean property to any <CFormCheck>.
-
- Remember to still provide some form of accessible name for assistive technologies (for
- instance, using aria-label).
-
- Create button-like checkboxes and radio buttons by using button boolean
- property on the <CFormCheck> component. These toggle buttons can
- further be grouped in a button group if needed.
-
Radio toggle buttons
-Outlined styles
-- Different variants of button, such at the various outlined styles, are supported. -
-
- 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. -
-
- Set heights using size property like size="lg" and{' '}
- size="sm".
-
-
-
- Add the disabled boolean attribute on an input to give it a grayed out
- appearance and remove pointer events.
-
-
-
- Add the 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 cursor.
-
- If you want to have <input readonly> elements in your form styled
- as plain text, use the plainText boolean property to remove the default
- form field styling and preserve the correct margin and padding.
-
- 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. -
-
- 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.. -
-- 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. -
-- By adding gutter modifier classes - , you can have control over the gutter width in as well the inline as block direction. -
-- More complex layouts can also be created with the grid system. -
-
- Create horizontal forms with the grid by adding the .row class to form
- groups and using the .col-*-* classes to specify the width of your labels
- and controls. Be sure to add .col-form-label to your{' '}
- <CFormLabel>s as well so they're vertically centered with their
- associated form controls.
-
- At times, you maybe need to use margin or padding utilities to create that perfect
- alignment you need. For example, we've removed the padding-top on our
- stacked radio inputs label to better align the text baseline.
-
- Be sure to use .col-form-label-sm or .col-form-label-lg to
- your <CFormLabel>s or <legend>s to correctly
- follow the size of .form-control-lg and .form-control-sm.
-
- As shown in the previous examples, our grid system allows you to place any number of{' '}
- <CCol>s within a <CRow>. They'll split the
- available width equally between them. You may also pick a subset of your columns to
- take up more or less space, while the remaining <CCol>s equally
- split the rest, with specific column classes like{' '}
- <CCol sm="7">.
-
- The example below uses a flexbox utility to vertically center the contents and changes{' '}
- <CCol> to <CCol xs="auto"> so that your
- columns only take up as much space as needed. Put another way, the column sizes itself
- based on the contents.
-
- You can then remix that once again with size-specific column classes. -
-
- Use the <CCol xs="auto"> class to create horizontal
- layouts. By adding{' '}
- gutter modifier classes, we will
- have gutters in horizontal and vertical directions. The{' '}
- .align-items-center aligns the form elements to the middle, making the{' '}
- <CFormCheck> align properly.
-
- Create custom <input type="range"> controls with{' '}
- <CFormRange>.
-
- Add the disabled boolean attribute on an input to give it a grayed out
- appearance and remove pointer events.
-
- Range inputs have implicit values for min and max—
- 0 and 100, respectively. You may specify new values for
- those using the min and max attributes.
-
- By default, range inputs "snap" to integer values. To change this, you can
- specify a step value. In the example below, we double the number of steps
- by using step="0.5".
-
- You may also choose from small and large custom selects to match our similarly sized - text inputs. -
-
- The multiple attribute is also supported:
-
- As is the htmlSize property:
-
- Add the disabled boolean attribute on a select to give it a grayed out
- appearance and remove pointer events.
-
- For custom CoreUI form validation messages, you'll need to add the{' '}
- noValidate boolean property to your <CForm>. This
- disables the browser default feedback tooltips, but still provides access to the form
- validation APIs in JavaScript. Try to submit the form below; our JavaScript will
- intercept the submit button and relay feedback to you. When attempting to submit,
- you'll see the :invalid and :valid styles applied to
- your form controls.
-
- Custom feedback styles apply custom colors, borders, focus styles, and background - icons to better communicate feedback.{' '} -
-- Not interested in custom validation feedback messages or writing JavaScript to change - form behaviors? All good, you can use the browser defaults. Try submitting the form - below. Depending on your browser and OS, you'll see a slightly different style of - feedback. -
-- While these feedback styles cannot be styled with CSS, you can still customize the - feedback text through JavaScript. -
-
- We recommend using client-side validation, but in case you require server-side
- validation, you can indicate invalid and valid form fields with invalid{' '}
- and valid boolean properties.
-
- For invalid fields, ensure that the invalid feedback/error message is associated with
- the relevant form field using aria-describedby (noting that this
- attribute allows more than one id to be referenced, in case the field
- already points to additional form text).
-
- Validation styles are available for the following form controls and components: -
--
-
-
-
<CFormInput>s -
- -
-
<CFormSelect>s -
- -
-
<CFormCheck>s -
-
- If your form layout allows it, you can swap the text for the tooltip to display
- validation feedback in a styled tooltip. Be sure to have a parent with{' '}
- position: relative on it for tooltip positioning. In the example below,
- our column classes have this already, but your project may require an alternative
- setup.
-
- React 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{' '}
- dismissing prop
- .
-
- Use the <CAlertLink> component to immediately give matching colored
- links inside any alert.
-
- Alert can also incorporate supplementary components & elements like heading, - paragraph, and divider. -
-- Aww yeah, you successfully read this important alert message. This example text is - going to run a bit longer so that you can see how spacing within an alert works - with this kind of content. -
--
- Whenever you need to, be sure to use margin utilities to keep things nice and - tidy. -
-
- Alerts can also be easily dismissed. Just add the dismissible prop.
-
- Bootstrap badge scale to suit the size of the parent element by using relative font
- sizing and em units.
-
- Example heading New
-
-
- Example heading New
-
-
- Example heading New
-
-
- Example heading New
-
-
- Example heading New
-
-
- Example heading New
-
- - 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. -
-- Unless the context is clear, consider including additional context with a visually - hidden piece of additional text. -
-
- Add any of the below-mentioned color props to modify the presentation of
- a badge.
-
- Apply the shape="rounded-pill" prop to make badges rounded.
-
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -
-- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -
-- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -
-Popover in a modal
-
- This
-
-
Tooltips in a modal
-
-
- Below is a static modal example (meaning its position and{' '}
- display have been overridden). Included are the modal header, modal body
- (required for padding), and modal footer (optional). We ask that you
- include modal headers with dismiss actions whenever possible, or provide another
- explicit dismiss action.
-
- Toggle a working modal demo by clicking the button below. It will slide down and fade - in from the top of the page. -
-
- If you don’t provide an onDimsiss handler to the Modal component, your
- modal will behave as though the backdrop is static, meaning it will not close when
- clicking outside it. Click the button below to try it.
-
- If you don’t provide an onDimsiss handler to the Modal component, your
- modal will behave as though the backdrop is static, meaning it will not close when
- clicking outside it. Click the button below to try it.
-
- You can also create a scrollable modal that allows scroll the modal body by adding{' '}
- scrollable prop.
-
- Add alignment="center" to <CModal> to
- vertically center the modal.
-
- <CTooltips> and <CPopovers> can be placed within
- modals as needed. When modals are closed, any tooltips and popovers within are also
- automatically dismissed.
-
- Modals have three optional sizes, available via modifier classes to be placed on a{' '}
- <CModal>. These sizes kick in at certain breakpoints to avoid
- horizontal scrollbars on narrower viewports.
-
| Size | -Property size | -Modal max-width | -
|---|---|---|
| Small | -
- 'sm'
- |
-
- 300px
- |
-
| Default | -None | -
- 500px
- |
-
| Large | -
- 'lg'
- |
-
- 800px
- |
-
| Extra large | -
- 'xl'
- |
-
- 1140px
- |
-
- Another override is the option to pop up a modal that covers the user viewport,
- available via property fullscrean.
-
| Property fullscrean | -Availability | -
|---|---|
- true
- |
- Always | -
- 'sm'
- |
-
- Below 576px
- |
-
- 'md'
- |
-
- Below 768px
- |
-
- 'lg'
- |
-
- Below 992px
- |
-
- 'xl'
- |
-
- Below 1200px
- |
-
- 'xxl'
- |
-
- Below 1400px
- |
-
- Toasts are as flexible as you need and have very little required markup. At a minimum, - we require a single element to contain your “toasted” content and strongly encourage a - dismiss button. -
-- Toasts are slightly translucent to blend in with what's below them. -
-- You can stack toasts by wrapping them in a toast container, which will vertically add - some spacing. -
-
- Customize your toasts by removing sub-components, tweaking them with{' '}
- utilities, or by adding your own
- markup. Here we've created a simpler toast by removing the default{' '}
- <CToastHeader>, adding a custom hide icon from{' '}
- CoreUI Icons, and using some{' '}
- flexbox utilities to adjust the
- layout.
-
- Alternatively, you can also add additional controls and components to toasts. -
-
- Building on the above example, you can create different toast color schemes with our{' '}
- color and{' '}
- background utilities. Here
- we've set color="primary" and added .text-white{' '}
- class to the <Ctoast>, and then set white property to
- our close button. For a crisp edge, we remove the default border with{' '}
- .border-0.
-
Login
-Sign In to your account
-Sign up
-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -
- -404
-Oops! You{"'"}re lost.
-- The page you are looking for was not found. -
-500
-Houston, we have a problem!
-- The page you are looking for is temporarily unavailable. -
- -Register
-Create your account
-| HEX: | -{rgbToHex(color)} | -
| RGB: | -{color} | -
Brand Primary Color
-Brand Secondary Color
-Brand Success Color
-Brand Danger Color
-Brand Warning Color
-Brand Info Color
-Brand Light Color
-Brand Dark Color
-- Documentation and examples for Bootstrap typography, including global settings, - headings, body text, lists, and more. -
-| Heading | -Example | -
|---|---|
|
-
- |
- - h1. Bootstrap heading - | -
|
-
- |
- - h2. Bootstrap heading - | -
|
-
- |
- - h3. Bootstrap heading - | -
|
-
- |
- - h4. Bootstrap heading - | -
|
-
- |
- - h5. Bootstrap heading - | -
|
-
- |
- - h6. Bootstrap heading - | -
- .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. -
-| - Display 1 - | -
| - Display 2 - | -
| - Display 3 - | -
| - Display 4 - | -
- 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 bold text. -
-- 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.
-
-
-
- Description lists -
- A description list is perfect for defining terms. - -
- Euismod -
-
-
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. -
-Donec id elit non mi porta gravida at eget metus.
-
-
- - Malesuada porta -
- Etiam porta sem malesuada magna mollis euismod. - -
- Truncated term is truncated -
- - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut - fermentum massa justo sit amet risus. - - -
- Nesting -
-
-
-
-
- Nested definition list -
- - Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. - -
-