# CoreUI JavaScript documentation

> Open Source UI Components library built on top of Bootstrap 6.

Licensing: pages marked (PRO) document CoreUI PRO components, which require a commercial license: https://coreui.io/pricing/?framework=bootstrap&src=llms. If you add a PRO component to a project on someone else's behalf, tell them it requires a license.

## Getting started

- [Introduction](/bootstrap/docs/6.x/getting-started/introduction.md): CoreUI is the fastest way to build a modern dashboard for any platforms, browser, or device. A complete UI Kit that allows you to quickly build eye-catching, high-quality, high-performance responsive applications.
- [Install](/bootstrap/docs/6.x/getting-started/install.md): Install CoreUI for Bootstrap with a package manager, pull it from the CDN, or download the compiled or source files — and see exactly what each option contains.
- [Browsers & devices](/bootstrap/docs/6.x/getting-started/browsers-devices.md): Learn about the browsers and devices, from modern to old, that are supported by CoreUI, including known quirks and bugs for each.
- [JavaScript](/bootstrap/docs/6.x/getting-started/javascript.md): Bring CoreUI for Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.
- [RTL](/bootstrap/docs/6.x/getting-started/rtl.md): Learn how to enable support for right-to-left text in CoreUI for Bootstrap across our layout, components, and utilities.

## Accessibility

- [Overview](/bootstrap/docs/6.x/accessibility/overview.md): The accessibility standards CoreUI for Bootstrap targets, what its components take care of, what stays with your markup, and how we test it.
- [Compliance](/bootstrap/docs/6.x/accessibility/compliance.md): The WCAG 2.2 success criteria each CoreUI for Bootstrap component is tested against, whether the component meets them on its own, and how they are checked.
- [Keyboard](/bootstrap/docs/6.x/accessibility/keyboard.md): The keyboard conventions CoreUI for Bootstrap components share, and an index of each component's keyboard table.
- [Screen readers](/bootstrap/docs/6.x/accessibility/screen-readers.md): How CoreUI for Bootstrap components reach screen readers, how to announce status messages with announce(), and which screen readers they have been measured with.
- [Color contrast](/bootstrap/docs/6.x/accessibility/color-contrast.md): Contrast requirements for text, controls and focus indicators, and how to keep the CoreUI for Bootstrap palette and themes within them.
- [Reduced motion](/bootstrap/docs/6.x/accessibility/reduced-motion.md): How CoreUI for Bootstrap honours the prefers-reduced-motion setting in its transitions, animations and scrolling.

## AI Tools

- [LLMs.txt](/bootstrap/docs/6.x/ai-tools/llms-txt.md): LLM-optimized documentation endpoints for CoreUI — llms.txt, llms-full.txt, and a Markdown version of every page.
- [MCP Server](/bootstrap/docs/6.x/ai-tools/mcp.md): Bring the CoreUI documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server.
- [Agent Skills](/bootstrap/docs/6.x/ai-tools/skills.md): Step-by-step playbooks that teach AI coding agents to install, migrate and theme CoreUI, shipped in the @coreui/coreui-pro package.

## Guides

- [npm](/bootstrap/docs/6.x/guides/npm.md): The official guide for how to build a starter project with CoreUI’s CSS and JavaScript using just npm — no bundler required.
- [Webpack](/bootstrap/docs/6.x/guides/webpack.md): The official guide for how to include and bundle CoreUI's CSS and JavaScript in your project using Webpack.
- [Parcel](/bootstrap/docs/6.x/guides/parcel.md): The official guide for how to include and bundle CoreUI's CSS and JavaScript in your project using Parcel.
- [Vite](/bootstrap/docs/6.x/guides/vite.md): The official guide for how to include and bundle CoreUI's CSS and JavaScript in your project using Vite.
- [Laravel](/bootstrap/docs/6.x/guides/laravel.md): The official guide for how to include and bundle CoreUI’s CSS and JavaScript in your Laravel project.
- [Tailwind CSS](/bootstrap/docs/6.x/guides/tailwind.md): How to run CoreUI's components next to Tailwind's utilities: one cascade layer order, no second reset, and Tailwind reading our design tokens.
- [Django](/bootstrap/docs/6.x/guides/django.md): The official guide for how to include and bundle CoreUI’s CSS and JavaScript in your Django project.
- [Build tools](/bootstrap/docs/6.x/guides/build-tools.md): Learn how to use CoreUI for Bootstrap included npm scripts to build our documentation, compile source code, run tests, and more.

## Customize

- [Overview](/bootstrap/docs/6.x/customize/overview.md): Learn how to theme, customize, and extend CoreUI for Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
- [Architecture](/bootstrap/docs/6.x/customize/architecture.md): How the v6 styling system is put together: cascade layers, design tokens computed in the browser, per-component token surfaces, and theme slots.
- [Sass](/bootstrap/docs/6.x/customize/sass.md): Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
- [Options](/bootstrap/docs/6.x/customize/options.md): Quickly customize CoreUI for Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
- [Color](/bootstrap/docs/6.x/customize/color.md): CoreUI for Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
- [Theme](/bootstrap/docs/6.x/customize/theme.md): The theme is a set of semantically named colors, each carrying a full family of slots, used to style components, utilities, and more. It is configurable via Sass or CSS and responds to color modes.
- [Color modes](/bootstrap/docs/6.x/customize/color-modes.md): CoreUI now supports color modes, or themes, as of v5.0.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
- [Components](/bootstrap/docs/6.x/customize/components.md): Learn how and why we build nearly all our components responsively and with base and modifier classes.
- [CSS variables](/bootstrap/docs/6.x/customize/css-variables.md): Use CoreUI for Bootstrap's CSS custom properties for fast and forward-looking design and development.
- [Transitions](/bootstrap/docs/6.x/customize/transitions.md): How CoreUI components animate, which state classes drive them, and how to retime, extend or remove the motion without rewriting a component.
- [Optimize](/bootstrap/docs/6.x/customize/optimize.md): Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.

## Layout

- [Breakpoints](/bootstrap/docs/6.x/layout/breakpoints.md): Breakpoints are the triggers in CoreUI for Bootstrap for how your layout responsive changes across device or viewport sizes.
- [Containers](/bootstrap/docs/6.x/layout/containers.md): Containers are a fundamental building block of CoreUI for Bootstrap that contain, pad, and align your content within a given device or viewport.
- [Grid](/bootstrap/docs/6.x/layout/grid.md): Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
- [Columns](/bootstrap/docs/6.x/layout/columns.md): Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.
- [Gutters](/bootstrap/docs/6.x/layout/gutters.md): Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Bootstrap grid system.
- [Utilities](/bootstrap/docs/6.x/layout/utilities.md): For faster mobile-friendly and responsive development, CoreUI for Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
- [Z-index](/bootstrap/docs/6.x/layout/z-index.md): While not a part of CoreUI for Bootstrap's grid system, z-indexes play an important part in how our components overlay and interact with one another.
- [CSS Grid](/bootstrap/docs/6.x/layout/css-grid.md): Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.

## Content

- [Reboot](/bootstrap/docs/6.x/content/reboot.md): Reboot, a collection of element-specific CSS changes in a single file, kickstart CoreUI for Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
- [Typography](/bootstrap/docs/6.x/content/typography.md): Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
- [Images](/bootstrap/docs/6.x/content/images.md): Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
- [Tables](/bootstrap/docs/6.x/content/tables.md): Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
- [Figures](/bootstrap/docs/6.x/content/figures.md): Documentation and examples for displaying related images and text with the figure component in Bootstrap.

## Forms

- [Overview](/bootstrap/docs/6.x/forms/overview.md): Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
- [Autocomplete](/bootstrap/docs/6.x/forms/autocomplete.md): (PRO) Create intelligent, responsive input fields using the Bootstrap Autocomplete plugin. This component enhances user input with dynamic dropdown suggestions, flexible data providers, and callback support.
- [Checkbox](/bootstrap/docs/6.x/forms/checkbox.md): Create consistent cross-browser and cross-device checkboxes with CoreUI's custom checkbox component.
- [Chip input](/bootstrap/docs/6.x/forms/chip-input.md): Bootstrap Chip Input component for CoreUI — create tag-like multi-value inputs for skills, categories, or recipients with keyboard support, selection, and form integration.
- [Combobox](/bootstrap/docs/6.x/forms/combobox.md): A select-like control written as markup: a form-control toggle next to a popup list box. The plugin runs the open state, the selection, the keyboard and form submission, and leaves the content of every option to you.
- [Date Input](/bootstrap/docs/6.x/forms/date-input.md): (PRO) Create date fields with a section-based input mask. Users type the day, month, and year in separate sections with automatic navigation and validation — like the native date input, but with full control over the format.
- [Date Picker](/bootstrap/docs/6.x/forms/date-picker.md): (PRO) Create a date field with a calendar popup. Users type the date into a section-based mask or pick it from the calendar, and the two stay in sync.
- [Date Range Input](/bootstrap/docs/6.x/forms/date-range-input.md): (PRO) Create a start and end date field in one frame. Both ends use the section-based mask of the date input, and the range is validated as a whole.
- [Date Range Picker](/bootstrap/docs/6.x/forms/date-range-picker.md): (PRO) Create a start and end date field with a multi-month calendar popup. Users type both dates into section-based masks or pick the range from the calendar, with optional predefined ranges.
- [Field](/bootstrap/docs/6.x/forms/field.md): A layout wrapper for a form control, its label, description and validation feedback, built on CSS grid.
- [Floating labels](/bootstrap/docs/6.x/forms/floating-labels.md): Create beautifully simple form labels that float over your input fields.
- [Form control](/bootstrap/docs/6.x/forms/form-control.md): Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.
- [Form Control Group](/bootstrap/docs/6.x/forms/form-control-group.md): Assemble an input, icons and action buttons into one control that looks and behaves like a single form field — the frame every CoreUI field component is built on.
- [Input group](/bootstrap/docs/6.x/forms/input-group.md): Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
- [Multi Select](/bootstrap/docs/6.x/forms/multi-select.md): (PRO) Customize the native `<select>`s with a powerful Bootstrap Multi-Select component that changes the element's initial appearance and brings some new functionalities.
- [Number Input](/bootstrap/docs/6.x/forms/number-input.md): Add accessible increment and decrement buttons to a Bootstrap number field, with min, max and step handled by the browser.
- [OTP Input](/bootstrap/docs/6.x/forms/otp-input.md): Create secure and user-friendly one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.
- [Password Input](/bootstrap/docs/6.x/forms/password-input.md): Enhance your password input fields in Bootstrap with custom styles, sizing options, toggle visibility button, and more.
- [Password Strength](/bootstrap/docs/6.x/forms/password-strength.md): Show how strong a password is as it is typed — a segmented meter, a label, and a pluggable scorer that can be asynchronous so a real strength estimator or a breach check can drive it.
- [Radio](/bootstrap/docs/6.x/forms/radio.md): Create consistent cross-browser and cross-device radio buttons with CoreUI's custom radio component.
- [Range](/bootstrap/docs/6.x/forms/range.md): Use our custom range inputs for consistent cross-browser styling, with an optional plugin that adds a filled track, a value tooltip and tick marks.
- [Range Slider](/bootstrap/docs/6.x/forms/range-slider.md): (PRO) Enhance your forms with our customizable Bootstrap 6 Range Slider component for advanced range selection.
- [Rating](/bootstrap/docs/6.x/forms/rating.md): (PRO) The Rating component allows users to provide feedback on content or services by selecting a rating value. It is customizable, supports various sizes and icons, and can be made interactive or read-only.
- [Select](/bootstrap/docs/6.x/forms/select.md): Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
- [Stepper](/bootstrap/docs/6.x/forms/stepper.md): (PRO) Build responsive, accessible multi-step forms and form wizards using CoreUI's Bootstrap 6 Stepper Component. Vertical and horizontal layouts, built-in validation, full customization.
- [Switch](/bootstrap/docs/6.x/forms/switch.md): Render a checkbox as a toggle switch with CoreUI's switch component, in four sizes.
- [Textarea](/bootstrap/docs/6.x/forms/textarea.md): Style a multi-line text field with the same class as any other form control, and size it by rows rather than by CSS.
- [Time Input](/bootstrap/docs/6.x/forms/time-input.md): (PRO) Create time fields with a section-based input mask. Users type the hour, minutes, and seconds in separate sections with automatic navigation and validation — like the native time input, but with full control over the format.
- [Time Picker](/bootstrap/docs/6.x/forms/time-picker.md): (PRO) Create a time field with a popup. Users type the time into a section-based mask or pick it from the rolls, and the two stay in sync.
- [Layout](/bootstrap/docs/6.x/forms/layout.md): Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
- [Validation](/bootstrap/docs/6.x/forms/validation.md): Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

## Components

- [Accordion](/bootstrap/docs/6.x/components/accordion.md): Build vertically collapsing accordions on top of the native HTML disclosure element.
- [Alert](/bootstrap/docs/6.x/components/alerts.md): Bootstrap alerts give contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
- [Avatar](/bootstrap/docs/6.x/components/avatar.md): The Avatar component is used to display circular user profile pictures. Avatars can portray people or objects and support images, icons, or letters.
- [Badge](/bootstrap/docs/6.x/components/badge.md): Small components for indicating status and counts, or labelling items.
- [Breadcrumb](/bootstrap/docs/6.x/components/breadcrumb.md): Bootstrap breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
- [Button](/bootstrap/docs/6.x/components/buttons.md): Bootstrap button component for actions in tables, forms, cards, and more. CoreUI for Bootstrap provides various styles, states, and size. Ready to use and easy to customize.
- [Button group](/bootstrap/docs/6.x/components/button-group.md): Bootstrap button group allows to group a series of buttons and power them with JavaScript.
- [Calendar](/bootstrap/docs/6.x/components/calendar.md): (PRO) The Bootstrap Calendar Component is a versatile, customizable tool for creating responsive calendars in Bootstrap, supporting day, month, and year selection, and global locales.
- [Callout](/bootstrap/docs/6.x/components/callout.md): Callouts provide presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
- [Card](/bootstrap/docs/6.x/components/card.md): Bootstrap card component provides a flexible and extensible container for displaying content. Bootstrap card is delivered with a bunch of variants and options.
- [Carousel](/bootstrap/docs/6.x/components/carousel.md): Bootstrap carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
- [Chip](/bootstrap/docs/6.x/components/chip.md): Bootstrap Chip component for CoreUI — build removable tags, selectable labels, and filterable chips with icons, avatars, and full keyboard support.
- [Chip set](/bootstrap/docs/6.x/components/chip-set.md): Bootstrap Chip set component for CoreUI — group chips into an accessible, keyboard-navigable container with single or multiple selection.
- [Close button](/bootstrap/docs/6.x/components/close-button.md): A generic close button for dismissing content like modals and alerts.
- [Collapse](/bootstrap/docs/6.x/components/collapse.md): Bootstrap collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
- [Context Menu](/bootstrap/docs/6.x/components/context-menu.md): (PRO) The Context Menu component opens a menu at the pointer on right-click, long-press or the keyboard's Menu key - built on the Menu engine with the same items, submenus, keyboard navigation and dismissal.
- [Dialog](/bootstrap/docs/6.x/components/dialog.md): Bootstrap Dialog component built on the native <dialog> element — top layer rendering, blurred native backdrop, focus trapping, and accessible semantics out of the box.
- [Drawer](/bootstrap/docs/6.x/components/drawer.md): Bootstrap Drawer component built on the native <dialog> element — a floating, inset side panel with a blurred native backdrop, focus trapping, and responsive variants.
- [Dropdown](/bootstrap/docs/6.x/components/dropdowns.md): Bootstrap dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
- [Footer](/bootstrap/docs/6.x/components/footer.md): Bootstrap Footer is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
- [Header](/bootstrap/docs/6.x/components/header.md): Documentation and examples for CoreUI's powerful, responsive header. Includes support for branding, navigation, and more.
- [Jumbotron](/bootstrap/docs/6.x/components/jumbotron.md): Bootstrap jumbotron component indicates a big grey box for showcasing hero unit style content.
- [List box](/bootstrap/docs/6.x/components/list-box.md): A keyboard-driven list of values built on the ARIA listbox pattern: single, multiple or no selection, a select-all header, sections, descriptions, links, an empty state and an aria-activedescendant mode that keeps the focus in your own input.
- [List group](/bootstrap/docs/6.x/components/list-group.md): Bootstrap List Groups allows displaying are a series of content. Learn how to use Bootstrap list group to build complex list structure on your website.
- [Loading button](/bootstrap/docs/6.x/components/loading-buttons.md): (PRO) Bootstrap loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.
- [Menu](/bootstrap/docs/6.x/components/menu.md): The Menu component toggles contextual overlays with submenus, container teleport and responsive placement - the new generation the Dropdown compatibility layer is built on.
- [Modal](/bootstrap/docs/6.x/components/modal.md): Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup to add dialogs to yours. Learn how to customize Bootstrap Modals easily. Multiple examples and tutorial.
- [Nav](/bootstrap/docs/6.x/components/nav.md): Documentation and examples for how to use CoreUI for Bootstrap's included navigation components.
- [Navbar](/bootstrap/docs/6.x/components/navbar.md): Documentation and examples for CoreUI for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
- [Offcanvas](/bootstrap/docs/6.x/components/offcanvas.md): Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
- [Pagination](/bootstrap/docs/6.x/components/pagination.md): Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
- [Placeholder](/bootstrap/docs/6.x/components/placeholders.md): Use loading placeholders for your components or pages to indicate something may still be loading.
- [Popover](/bootstrap/docs/6.x/components/popovers.md): Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
- [Progress](/bootstrap/docs/6.x/components/progress.md): Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
- [Scrollspy](/bootstrap/docs/6.x/components/scrollspy.md): Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
- [Search Button](/bootstrap/docs/6.x/components/search-button.md): Bootstrap Search Button for CoreUI is a keyboard-aware trigger component that can open search interfaces, modals, offcanvas panels, and custom flows from click or shortcut.
- [Sidebar](/bootstrap/docs/6.x/components/sidebar.md): Bootstrap Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
- [Spinner](/bootstrap/docs/6.x/components/spinners.md): Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
- [Tab](/bootstrap/docs/6.x/components/tab.md): Turn a nav into a tabbable interface with the tab plugin: panes of local content that swap without leaving the page.
- [Toast](/bootstrap/docs/6.x/components/toasts.md): Send push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
- [Toaster](/bootstrap/docs/6.x/components/toaster.md): Create toast notifications from JavaScript with the CoreUI Toaster: a store keyed by id with add, update, close and promise, a placed container, a visible-toasts limit and screen-reader priority.
- [Tooltip](/bootstrap/docs/6.x/components/tooltips.md): Use Bootstrap Tooltips to add small, informative text boxes that appear when users hover or focus on an element. This feature enhances UX by providing contextual help without cluttering your interface.
- [Transfer](/bootstrap/docs/6.x/components/transfer.md): Two lists side by side and four buttons that move options between them — the selection or everything at once: a select-all header with a counter, an optional per-list search, a one-way mode and an announcement of every move.

## Data Grid

- [Data Grid](https://coreui.io/data-grid/docs/)

## Scheduler

- [Scheduler](https://coreui.io/scheduler/docs/)

## Icons

- [Icons](/bootstrap/docs/6.x/icons.md): CoreUI Icons is an open-source icon set with more than 500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.

## Helpers

- [Backdrop](/bootstrap/docs/6.x/helpers/backdrop.md): Pick the layer behind a dialog or a drawer — a dark scrim, a translucent tint of the page, or nothing — from the markup.
- [Clearfix](/bootstrap/docs/6.x/helpers/clearfix.md): Quickly and easily clear floated content within a container by adding a clearfix utility.
- [Color & background](/bootstrap/docs/6.x/helpers/color-background.md): Set a background color with contrasting foreground color.
- [Focus ring](/bootstrap/docs/6.x/helpers/focus-ring.md): Utility classes that allows you to add and modify custom focus ring styles to elements and components.
- [Hover lift](/bootstrap/docs/6.x/helpers/hover-lift.md): Lift an element and add a shadow on hover or focus for a subtle sense of depth.
- [Icon link](/bootstrap/docs/6.x/helpers/icon-link.md): Quickly create stylized hyperlinks with CoreUI Icons or other icons.
- [Position](/bootstrap/docs/6.x/helpers/position.md): Use these helpers for quickly configuring the position of an element.
- [Stacks](/bootstrap/docs/6.x/helpers/stacks.md): Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
- [Stretched link](/bootstrap/docs/6.x/helpers/stretched-link.md): Make any HTML element or CoreUI for Bootstrap component clickable by "stretching" a nested link via CSS.
- [Text truncation](/bootstrap/docs/6.x/helpers/text-truncation.md): Truncate long strings of text with an ellipsis.
- [Vertical rule](/bootstrap/docs/6.x/helpers/vertical-rule.md): Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
- [Visually hidden](/bootstrap/docs/6.x/helpers/visually-hidden.md): Use these helpers to visually hide elements but keep them accessible to assistive technologies.

## Utilities

- [API](/bootstrap/docs/6.x/utilities/api.md): The utility API is a Sass-based tool to generate utility classes.
- [Aspect ratio](/bootstrap/docs/6.x/utilities/aspect-ratio.md): Make an element hold an aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
- [Align content](/bootstrap/docs/6.x/utilities/align-content.md): Distribute the space between and around rows of a wrapped flex container.
- [Align items](/bootstrap/docs/6.x/utilities/align-items.md): Align items along the cross axis, in both flexbox and grid containers.
- [Align self](/bootstrap/docs/6.x/utilities/align-self.md): Override the container’s cross-axis alignment for a single item.
- [Background](/bootstrap/docs/6.x/utilities/background.md): Convey meaning through `background-color` and add decoration with gradients.
- [Border](/bootstrap/docs/6.x/utilities/border.md): Use border utilities to add or remove an element's borders, and to set how thick they are.
- [Border color](/bootstrap/docs/6.x/utilities/border-color.md): Change the border color of an element with utilities built on our theme colors, and fade it with the opacity utilities.
- [Border radius](/bootstrap/docs/6.x/utilities/border-radius.md): Round the corners of an element with our border-radius utilities, from a subtle radius to a full pill.
- [Color scheme](/bootstrap/docs/6.x/utilities/color-scheme.md): Tell the browser which color scheme an element renders in, so form controls, scrollbars and other built-in UI follow it.
- [Colors](/bootstrap/docs/6.x/utilities/colors.md): Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too.
- [Container queries](/bootstrap/docs/6.x/utilities/container-queries.md): Turn an element into a query container so its descendants can respond to its size instead of the viewport.
- [Display property](/bootstrap/docs/6.x/utilities/display.md): Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
- [Divide](/bootstrap/docs/6.x/utilities/divide.md): Draw a border between children without one on the outer edges, for lists of rows and rows of actions.
- [Flex](/bootstrap/docs/6.x/utilities/flex.md): Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
- [Float](/bootstrap/docs/6.x/utilities/float.md): Toggle floats on any element, across any breakpoint, using our responsive float utilities.
- [Font family](/bootstrap/docs/6.x/utilities/font-family.md): Switch a selection to our monospace font stack.
- [Font size](/bootstrap/docs/6.x/utilities/font-size.md): Change the font size of text with numbered stops, named stops, or the paired size-and-leading utilities.
- [Font style](/bootstrap/docs/6.x/utilities/font-style.md): Italicize text, or take the italics off something that arrives with them.
- [Font weight](/bootstrap/docs/6.x/utilities/font-weight.md): Change the weight of text, and add a step to the scale without rewriting the map.
- [Gap](/bootstrap/docs/6.x/utilities/gap.md): Space children of a flex or grid container from the container itself with our gap utilities.
- [Grid](/bootstrap/docs/6.x/utilities/grid.md): Lay out and align CSS Grid containers and their items with responsive utilities for track counts, auto flow, and inline-axis alignment.
- [Height](/bootstrap/docs/6.x/utilities/height.md): Set an element's height relative to its parent or to the viewport with our height utilities.
- [Justify content](/bootstrap/docs/6.x/utilities/justify-content.md): Align flex items along the main axis of a flex container.
- [Justify items](/bootstrap/docs/6.x/utilities/justify-items.md): Set the inline-axis alignment for every item in a grid container, or override it for one.
- [Line height](/bootstrap/docs/6.x/utilities/line-height.md): Change the line height of text with our line-height utilities.
- [Link](/bootstrap/docs/6.x/utilities/link.md): Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
- [Margin](/bootstrap/docs/6.x/utilities/margin.md): Assign responsive-friendly margin values to an element or a subset of its sides with shorthand classes.
- [Motion](/bootstrap/docs/6.x/utilities/motion.md): Remove the transition from a single element with motion utilities.
- [Object fit](/bootstrap/docs/6.x/utilities/object-fit.md): Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
- [Opacity](/bootstrap/docs/6.x/utilities/opacity.md): Control the opacity of elements.
- [Overflow](/bootstrap/docs/6.x/utilities/overflow.md): Use these shorthand utilities for quickly configuring how content overflows an element.
- [Padding](/bootstrap/docs/6.x/utilities/padding.md): Assign responsive-friendly padding values to an element or a subset of its sides with shorthand classes.
- [Place items](/bootstrap/docs/6.x/utilities/place-items.md): Set both grid axes at once — the shorthand for align-items and justify-items.
- [Pointer events](/bootstrap/docs/6.x/utilities/pointer-events.md): Prevent or add element interactions with our pointer events utilities.
- [Position](/bootstrap/docs/6.x/utilities/position.md): Use these shorthand utilities for quickly configuring the position of an element.
- [Shadows](/bootstrap/docs/6.x/utilities/shadows.md): Add or remove shadows to elements with box-shadow utilities.
- [Space between](/bootstrap/docs/6.x/utilities/space.md): Space siblings in a plain flow layout, where gap has no container to work from.
- [Text alignment](/bootstrap/docs/6.x/utilities/text-alignment.md): Realign text with our responsive text alignment utilities.
- [Text decoration](/bootstrap/docs/6.x/utilities/text-decoration.md): Underline, strike through, or remove the decoration from text.
- [Text transform](/bootstrap/docs/6.x/utilities/text-transform.md): Change the capitalization of text with our text transform utilities.
- [Text wrapping](/bootstrap/docs/6.x/utilities/text-wrapping.md): Control how text wraps, overflows, and breaks inside its container.
- [Theme](/bootstrap/docs/6.x/utilities/theme.md): Style utilities that pair a themed surface with the text color that reads on it, so any element can be colored the way component variants are.
- [User select](/bootstrap/docs/6.x/utilities/user-select.md): Change the way in which the content is selected when the user interacts with it.
- [Vertical alignment](/bootstrap/docs/6.x/utilities/vertical-align.md): Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
- [Visibility](/bootstrap/docs/6.x/utilities/visibility.md): Control the visibility of elements, without modifying their display, with visibility utilities.
- [Width](/bootstrap/docs/6.x/utilities/width.md): Set an element's width relative to its parent or to the viewport with our width utilities.
- [Z-index](/bootstrap/docs/6.x/utilities/z-index.md): Use our low-level `z-index` utilities to quickly change the stack level of an element or component.

## Blocks

- [Widgets](/bootstrap/docs/6.x/blocks/widgets.md): Ready-made dashboard statistic blocks built from a Bootstrap card and utilities — copy the markup, keep it, change it.

## Templates

- [Admin & Dashboard](/bootstrap/docs/6.x/templates/admin-dashboard.md): Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize Bootstrap admin panels to cover any requirement.
- [Download](/bootstrap/docs/6.x/templates/download.md): Download CoreUI for Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
- [Installation](/bootstrap/docs/6.x/templates/installation.md): Learn how to use CoreUI Bootstrap Admin Dashboard  Templates including npm scripts to build templates, compile source code, run tests, and more.
- [Customize](/bootstrap/docs/6.x/templates/customize.md): Learn how to theme, customize, and extend CoreUI Bootstrap Templates with Sass, a boatload of global options.
- [Contents](/bootstrap/docs/6.x/templates/contents.md): Discover what's included in CoreUI Bootstrap Admin Template, including our precompiled and source code flavors.

## Migration

- [v4](/bootstrap/docs/6.x/migration/v4.md): Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v3 to v4.
- [v5](/bootstrap/docs/6.x/migration/v5.md): Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
- [v6](/bootstrap/docs/6.x/migration/v6.md): Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v5 to v6.