## Validation

Form :user-valid and :user-invalid

Check JS for FileValidator class
English

## Group

Email:
Browser:

## Rows

Similar to Bootstrap 5.3.3, with the responsive `.col-*COL#*`, `.col-*BREAKPOINT*-*COL#*`, `.offset-*COL#*`, `.offset-*BREAKPOINT*-*COL#*`.

`.row` has a max width set to the viewport of your `xl` viewport (1300px by default)

`.row-fluid` max width is 100%.
col-3
col-6
col-3
col-3 offset-1
col-2
col-2
col-3
col-3
col-3
col-3
col-3
col-2
col-8
col-2
col-5
col-7
col-9
col-3

## Columns with offsets defined by breakpoints

When defining multiple `.col-*-*` on the same element, the order your put the classes on the element matter.

col-2, col-md-4
col-4, offset-8, col-md-6, offset-md-6
col-5, offset-1, col-md-11
col-2, col-md-6
col-3, offset-9, col-md-6, offset-md-6
col-3 col-md-12 col-lg-6
col-3 col-md-12 col-lg-6
col-4 col-md-6 col-lg-3
col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10

## Alignment

You can add `.align-start` (default), `.align-center` or `.align-end` to your `.row` or `.row-fluid` element to align the containing elements to the top, middle, or bottom.

col-4
col-4

## `-md-` Breakpoints

col-12, col-md-4
col-12, col-md-4
col-12, col-md-4

## Modal

## Notificaton

## Accordions

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

Accordion 2

- Vestibulum id elit quis massa interdum sodales.
- Nunc quis eros vel odio pretium tincidunt nec quis neque.
- Quisque sed eros non eros ornare elementum.
- Cras sed libero aliquet, porta dolor quis, dapibus ipsum.

## Timeline

View Custom CSS
--pico-timeline-line-color: var(--pico-primary-background);
--pico-timeline-dot-background-color: var(--pico-primary-inverse);
--pico-timeline-dot-border-color: var(--pico-primary-background);
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);

### 2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

### 2016

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

### 2015

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

### 2012

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

### Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.