Pico

A pure HTML example, without dependencies.

Demo page from picocss.com model docs

Preview

Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.

Rows

Similar to Bootstrap 5.3.3, with the responsive .col-*COL#*, .col-*BREAKPOINT*-*COL#*, .offset-*COL#*, .offset-*BREAKPOINT*-*COL#*, you can have a responsive grid system with offsets as well to easy customization.

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.

Breakpoints available: sm, md, lg, xl, xxl

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

col-4
col-4

-md- Breakpoints

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

Buttons

Form elements

Curabitur consequat lacus at lacus porta finibus.
Checkboxes
Radio buttons
Switches

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.

Article

Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra rutrum.

Duis nec elit placerat, suscipit nibh quis, finibus neque.

Group

Confirm your action!

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