# Get started with AdminKit

> Official AdminKit Documentation

## Table of Contents

### Getting started

- [Download](/docs/getting-started/download.md): Download AdminKit to get the compiled CSS and JavaScript and source code or use the cached versions delivered through a CDN.
- [Quick start](/docs/getting-started/quick-start.md): Get started with AdminKit in no time. Learn how to detect file changes, start a dev-server and compile the files with Webpack.
- [Customization](/docs/getting-started/customization.md): Customize AdminKit's theme, layout, sidebar position and sidebar layout. Match AdminKit with your brand.
- [Contents](/docs/getting-started/contents.md): Discover what's included in the AdminKit zip-file, including our precompiled, source code flavors and file names.
- [Changelog](/docs/getting-started/changelog.md): All noteworthy changes for AdminKit are listed below.

### Foundation

- [Bootstrap 5 Containers | Docs & Examples](/docs/foundation/containers.md): Containers are basic building blocks of AdminKit for Bootstrap that contain, pad, and align your content within a given device or viewport.
- [Bootstrap 5 Grid system | Docs & Examples](/docs/foundation/grid.md): AdminKit for Bootstrap features a mobile-first flexbox grid that creates layouts of all sizes with a column system, six responsive tiers, and more.
- [Bootstrap 5 Columns | Docs & Examples](/docs/foundation/columns.md): Learn to modify AdminKit for Bootstrap's grid columns with options for alignment, ordering, and offsetting using the flexbox grid system.
- [Bootstrap 5 Gutters | Docs & Examples](/docs/foundation/gutters.md): Gutters are the padding between your columns, used to align and responsively space content in the AdminKit for Bootstrap grid system.
- [Bootstrap 5 Typography | Docs & Examples](/docs/foundation/typography.md): Documentation and examples for Bootstrap typography, including global settings, headings, displays, paragraphs, lists, and more.
- [Bootstrap 5 Images | Docs & Examples](/docs/foundation/images.md): Documentation and examples for opting images into responsive behavior and add lightweight styles to them using CSS classes.

### Components

- [Bootstrap 5 Badges | Docs & Examples](/docs/components/badge.md): Documentation and examples for badges, the Bootstrap for AdminKit small count and labeling component.
- [Bootstrap 5 Buttons | Docs & Examples](/docs/components/buttons.md): Use AdminKit for Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
- [Bootstrap 5 Button group | Docs & Examples](/docs/components/button-group.md): Group a series of Bootstrap buttons together on a single line using or stack them in a vertical column using Bootstrap button groups.
- [Bootstrap 5 Cards | Docs & Examples](/docs/components/card.md): AdminKit for Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
- [Bootstrap 5 Close button | Docs & Examples](/docs/components/close-button.md): A generic Bootstrap close button for dismissing components like modals and alerts.
- [Bootstrap 5 List group | Docs & Examples](/docs/components/list-group.md): List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any kind of content.
- [Bootstrap 5 Tables | Docs & Examples](/docs/components/tables.md): Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with AdminKit for Bootstrap.
- [Bootstrap 5 Accordion | Docs & Examples](/docs/components/accordion.md): Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
- [Bootstrap 5 Alerts | Docs & Examples](/docs/components/alerts.md): Provide feedback messages for typical user actions with the handful of available and flexible alert messages.
- [Bootstrap 5 Carousel | Docs & Examples](/docs/components/carousel.md): A Bootstrap slideshow component for cycling through elements—images or slides of text—like a carousel.
- [Bootstrap 5 Collapse | Docs & Examples](/docs/components/collapse.md): Toggle the visibility of content and elements across your project with a few classes and our JavaScript plugins.
- [Bootstrap 5 Dropdowns | Docs & Examples](/docs/components/dropdowns.md): Toggle contextual overlays for displaying lists of links and more with the AdminKit for Bootstrap dropdown plugin.
- [Bootstrap 5 Modal | Docs & Examples](/docs/components/modal.md): Use AdminKit for Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
- [Bootstrap 5 Offcanvas | Docs & Examples](/docs/components/offcanvas.md): Build hidden sidebars into your project for navigation, side navigation, shopping carts, and more with a few CSS classes and our JavaScript plugin.
- [Bootstrap 5 Placeholders | Docs & Examples](/docs/components/placeholders.md): Use loading placeholders for your components or pages to indicate something may still be loading.
- [Bootstrap 5 Popovers | Docs & Examples](/docs/components/popovers.md): Documentation and examples for adding Bootstrap popovers to any element on your site or app.
- [Bootstrap 5 Progress | Docs & Examples](/docs/components/progress.md): Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
- [Bootstrap 5 Spinners | Docs & Examples](/docs/components/spinners.md): Indicate the loading state of a component or page with AdminKit for Bootstrap spinners, built entirely with HTML, CSS, without JavaScript.
- [Bootstrap 5 Toasts | Docs & Examples](/docs/components/toasts.md): Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
- [Bootstrap 5 Tooltips | Docs & Examples](/docs/components/tooltips.md): Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript for animations and data-bs-attributes for local title storage.

### Navigation

- [Bootstrap 5 Navs and tabs | Docs & Examples](/docs/navigation/navs-tabs.md): Documentation and examples for how to use AdminKit for Bootstrap's included navigation tabs components.
- [Bootstrap 5 Navbar | Docs & Examples](/docs/navigation/navbar.md): Documentation and examples for AdminKit for Bootstrap's powerful, responsive navigation navbar. Includes support for branding, navigation, dropdowns, collapse components and more.
- [Bootstrap 5 Breadcrumb | Docs & Examples](/docs/navigation/breadcrumb.md): Indicate the current page's location within a navigational hierarchy that automatically adds separators.
- [Bootstrap 5 Pagination | Docs & Examples](/docs/navigation/pagination.md): Documentation and examples for showing Bootstrap's pagination component to indicate a series of related content exists across multiple pages.

### Forms

- [Bootstrap 5 Forms | Docs & Examples](/docs/forms/overview.md): Examples and usage guidelines for Bootstrap form control styles, layout options, and custom components for creating a wide variety of forms.
- [Bootstrap 5 Form controls | Docs & Examples](/docs/forms/form-control.md): Bootstrap 5 form control examples show how AdminKit upgrades `<input>`s and `<textarea>`s with custom styles, sizes, focus states, and more.
- [Bootstrap 5 Select | Docs & Examples](/docs/forms/select.md): Customize the native `<select>`s with custom Bootstrap CSS that changes the element's initial appearance.
- [Bootstrap 5 Multiselect | Docs & Examples](/docs/forms/multiselect.md): The multiselect component for Bootstrap 5 extends the native `<select>` element, featuring variations like dropdown, options, option groups, and more.
- [Bootstrap 5 Checkbox | Docs & Examples](/docs/forms/checkbox.md): Checkboxes are used to select one or more options from a list. Bootstrap allows you to create cross-browser checkboxes with their custom Bootstrap checks component.
- [Bootstrap 5 Radio | Docs & Examples](/docs/forms/radio.md): Radios are used to select one option from many in a list. Bootstrap allows you to create cross-browser radios with their custom Bootstrap checks component.
- [Bootstrap 5 Toggle switch | Docs & Examples](/docs/forms/toggle-switch.md): A Bootstrap switch component is a simple element which can be used to toggle between two options. Switches are commonly used to toggle on/off buttons.
- [Bootstrap 5 File upload | Docs & Examples](/docs/forms/file-upload.md): The Bootstrap file input component is a field which the user can use to upload one or more files (photos, documents, pdf's, etc) from their device.
- [Bootstrap 5 Range | Docs & Examples](/docs/forms/range.md): Use our custom range inputs for consistent cross-browser styling and built-in customization.
- [Bootstrap 5 Input group | Docs & Examples](/docs/forms/input-group.md): Easily extend AdminKit for Bootstrap's form controls by adding text, buttons, or button groups to the sides of textual inputs, selects, and file inputs.
- [Bootstrap 5 Floating labels | Docs & Examples](/docs/forms/floating-labels.md): Create beautifully simple Bootstrap form labels that float over your input fields.
- [Bootstrap 5 Layout | Docs & Examples](/docs/forms/layout.md): Give your forms some structure—from inline to horizontal to custom grid implementations—with our Bootstrap form layout options.
- [Bootstrap 5 validation | Docs & Examples](/docs/forms/validation.md): Provide valuable, actionable feedback to your users with HTML5 form validation for Bootstrap, via browser default behaviors or custom styles and JavaScript.
- [Bootstrap 5 Input mask | Docs & Examples](/docs/forms/input-mask.md): The input mask component for Bootstrap 5 extends the native `input` element, allowing formats for form inputs like phone numbers, dates and IP addresses.

### Charts

- [Bootstrap 5 Bar Chart | Docs & Examples](/docs/charts/bar-chart.md): A bar chart is the best tool for displaying comparisons between categories of data.
- [Bootstrap 5 Doughnut Chart | Docs & Examples](/docs/charts/doughnut-chart.md): Doughnut charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
- [Bootstrap 5 Line Chart | Docs & Examples](/docs/charts/line-chart.md): Line charts are a typical pictorial representation that depicts trends and behaviors over time.
- [Bootstrap 5 Pie Chart | Docs & Examples](/docs/charts/pie-chart.md): Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
- [Bootstrap 5 Polar Area Chart | Docs & Examples](/docs/charts/polar-area-chart.md): Polar area charts are similar to pie charts, but each segment has the same angle.
- [Bootstrap 5 Radar Chart | Docs & Examples](/docs/charts/radar-chart.md): Radar charts are similar to pie charts, but each segment has the same angle.
- [Bootstrap 5 Area Chart | Docs & Examples](/docs/charts/area-chart.md): Area charts are used to represent quantitative variations.
- [Bootstrap 5 Bubble Chart | Docs & Examples](/docs/charts/bubble-chart.md): Bubble charts are used to show three dimensions of data at the same time.
- [Bootstrap 5 Candlestick Chart | Docs & Examples](/docs/charts/candlestick-chart.md): A candlestick chart is a style of financial chart used to describe and visualize price movements or trading data.
- [Bootstrap 5 Column Chart | Docs & Examples](/docs/charts/column-chart.md): A column chart uses vertical bars to display data and is used to compare values across categories.
- [Bootstrap 5 Heatmap Chart | Docs & Examples](/docs/charts/heatmap-chart.md): Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
- [Bootstrap 5 Mixed Chart | Docs & Examples](/docs/charts/mixed-chart.md): A Mixed Chart is a visualization that allows the combination of two or more distinct graphs.
- [Bootstrap 5 Scatter Chart | Docs & Examples](/docs/charts/scatter-chart.md): Scatter charts are very similar to line charts, but the x axis is changed to a linear axis.
- [Bootstrap 5 Timeline Chart | Docs & Examples](/docs/charts/timeline-chart.md): A timeline chart is a visual rendition of a series of events.
- [Bootstrap 5 Treemap Chart | Docs & Examples](/docs/charts/treemap-chart.md): Treemap charts are a visualization that displays hierarchically organized data as a set of nested rectangles, parent elements being tiled with their child elements.

### Icons

- [Bootstrap 5 Feather Icons | Docs & Examples](/docs/icons/feather-icons.md): Feather offers 250+ simple and beautiful open-source SVG icons designed on a 24x24 grid. It's fully compatible with the Bootstrap admin template, AdminKit.
- [Bootstrap 5 Font Awesome | Docs & Examples](/docs/icons/font-awesome.md): Font Awesome is the world's top icon library with 1500+ icons in font and SVG formats, fully compatible with the Bootstrap admin template, AdminKit.

### Utilities

- [Bootstrap 5 Background | Docs & Examples](/docs/utilities/background.md): Convey meaning through `background-color` and add decoration with Bootstrap's gradients.
- [Bootstrap 5 Borders | Docs & Examples](/docs/utilities/borders.md): Use Bootstrap's border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
- [Bootstrap 5 Clearfix | Docs & Examples](/docs/utilities/clearfix.md): Quickly and easily clear floated content within a Bootstrap container by adding a clearfix utility.
- [Bootstrap 5 Display property | Docs & Examples](/docs/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.
- [Bootstrap 5 Flex | Docs & Examples](/docs/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.
- [Bootstrap 5 Float | Docs & Examples](/docs/utilities/float.md): Toggle floats on any Bootstrap element, across any breakpoint, using our responsive float utilities.
- [Bootstrap 5 Interactions | Docs & Examples](/docs/utilities/interactions.md): Use AdminKit's utility classes to change how users interact with contents of a website or app.
- [Bootstrap 5 Overflow | Docs & Examples](/docs/utilities/overflow.md): Use these shorthand utilities for quickly configuring how content overflows Bootstrap for AdminKit elements.
- [Bootstrap 5 Position | Docs & Examples](/docs/utilities/position.md): Use these helpers for quickly configuring the position of an Bootstrap element.
- [Bootstrap 5 Ratios | Docs & Examples](/docs/utilities/ratio.md): Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
- [Bootstrap 5 Shadows | Docs & Examples](/docs/utilities/shadows.md): Add or remove shadows to elements with Bootstrap's box-shadow utilities.
- [Bootstrap 5 Sizing | Docs & Examples](/docs/utilities/sizing.md): Easily make an element as wide or as tall using the width and height Bootstrap utilities.
- [Bootstrap 5 Spacing | Docs & Examples](/docs/utilities/spacing.md): Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.
- [Bootstrap 5 Text | Docs & Examples](/docs/utilities/text.md): Documentation and examples for Bootstrap's text utilities to control alignment, wrapping, weight, and more.
- [Bootstrap 5 Text colors | Docs & Examples](/docs/utilities/text-colors.md): Use Bootstrap's text color utility to apply colors to text elements and provide "meaning thorugh colors". The text utility also supports styling links with hover states.
- [Bootstrap 5 Text truncation | Docs & Examples](/docs/utilities/text-truncation.md): Truncate long strings of text using AdminKit for Bootstrap's utility.
- [Bootstrap 5 Vertical alignment | Docs & Examples](/docs/utilities/vertical-align.md): Bootstrap 5 vertical center examples. Easily change the vertical alignment of Bootstrap's inline, inline-block, inline-table, and table cell elements.
- [Bootstrap 5 Visibility | Docs & Examples](/docs/utilities/visibility.md): Control the visibility of Bootstrap elements, without modifying their display, with visibility utilities.

### Getting started

- [AppStack for React](/docs/react.md)