Storybook / Form Layout

Principe

Voici différentes implémentations de formulaires (en ligne, en grille) via les utilities de bootstrap.

Form

Rappelons qu'un formulaire doit être placé dans une balise form.
Par défaut, bootstrap empile les éléments de formulaire verticalement (chaque élément prenant 100% de la largeur).

Une solution simple consiste à utiliser des classes utilitaires comme les marges (.mb-3 par exemple).

Example label

Another label

<div class="mb-3">
    <label for="formGroupExampleInput" class="form-label">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
    <label for="formGroupExampleInput2" class="form-label">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

Grid

Il est possible de créer des formulaires plus complexes grâce aux classes de grille.
La variable $enable-grid-classes doit être activée (elle l'est par défaut).

Gutter

Possibilité d'ajuster les gouttières via les classes utilitaires.

<div class="row g-3">
    <div class="col">
        <input type="text" class="form-control" placeholder="First name" aria-label="First name">
    </div>
    <div class="col">
        <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
    </div>
</div>

Exemple plus complexe

Email

Password

Address

Address 2

City

State

Zip

Check me out

<form class="row g-3">
    <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4">
    </div>
    <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">Check me out</label>
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
</form>

Horizontal

On utilise ici des sections via des .row et on segmente chaque ligne via des .col-*-* pour spécifier les largeurs.
Ne pas omettre d'ajouter .col-form-label sur les labels pour garantir un bon alignement vertical par rapport à la colonne de droite.

Email

Password

Radios

First radio

Second radio

Third disabled radio

Example checkbox

Sizes

Utiliser .col-form-label-sm ou .col-form-label-lg pour suivre les éventuels .form-control-sm et .form-control-lg sur les inputs.

Email

<div class="row mb-3">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
</div>
<div class="row mb-3">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
</div>
<div class="row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
</div>

Column Sizing

<div class="row g-3">
    <div class="col-sm-7">
        <input type="text" class="form-control" placeholder="City" aria-label="City">
    </div>
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="State" aria-label="State">
    </div>
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
    </div>
</div>

Auto

<form class="row gy-2 gx-3 align-items-center">
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInput">Name</label>
        <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
        </div>
    </div>
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingSelect">Preference</label>
        <select class="form-select" id="autoSizingSelect">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div class="col-auto">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoSizingCheck">
            <label class="form-check-label" for="autoSizingCheck">Remember me</label>
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

Possibilité d'avoir un mix...

<form class="row gx-3 gy-2 align-items-center">
    <div class="col-sm-3">
        <label class="visually-hidden" for="specificSizeInputName">Name</label>
        <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3">
        <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
        </div>
    </div>
    <div class="col-sm-3">
        <label class="visually-hidden" for="specificSizeSelect">Preference</label>
        <select class="form-select" id="specificSizeSelect">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div class="col-auto">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
            <label class="form-check-label" for="autoSizingCheck2">Remember me</label>
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

Inline

Utilisez .row-cols-* pour créer des mises en forme horizontales adaptatives.

<form class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
        </div>
    </div>

    <div class="col-12">
        <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
        <select class="form-select" id="inlineFormSelectPref">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>

    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="inlineFormCheck">
            <label class="form-check-label" for="inlineFormCheck">Remember me</label>
        </div>
    </div>

    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>