Form Elements

Overview
We'll never share your email with anyone else.
Input, textarea

Les éléments de type input et textarea doivent avoir la class .form-control.
Bien penser à déclarer le bon type pour les input text, email, password, number.
Dans le cas d'un input file, .form-control est à remplacer par .form-control-file.

Input

File

Textarea

Sizing

Il est possible d'avoir des éléments plus petits ou plus grand. Il suffit d'ajouter les classes .form-control-lg ou .form-control-sm sur l'élément souhaité.

Input

File

Textarea

Contexte

Pour les cas de disabled, readonly.
Pour enlever l'aspect de l'input, remplacer .form-control par .form-control-plaintext

Input

File

Textarea

Select

Les éléments de type select class .form-select. Le sizing s'opère via les classes additionnelles .form-select-lg et .form-select-sm

Base

Sizing

Contexte

Input Checkbox & Radio

Chaque item de checkbox ou de radio button est encadré d'un conteneur .form-check.
Ajouter la classe .form-check-inline au conteneur pour mettre les éléments en ligne.

Checkbox empilés
Checkbox inline
Radio empilés
Radio inline
Cutom version

Il suffit d'ajouter la classe .form-check-custom sur le .form-check pour skinner l'input radio/checkbox.

Checkbox empilés
Checkbox inline
Radio empilés
Radio inline
Radio Switch

Il suffit d'ajouter la classe .form-switch sur le .form-check pour skinner l'input checkbox.

Configuration
Thème
Bases
Atomes
Molécules
Organismes
Projet GC
Projet KIOSQUE