Faire une page exemple (des voitures)

Bootstrap

Guillaume LELEU

Mis en ligne le 05-01-2022 à 12:05

Langues disponibles

1 . Introduction

2 . La page de base

3 . Le texte de bienvenue

4 . Les cartes des voitures

Afin de présenter les voitures nous allons utiliser les cartes que nous avons vues dans un précédent tutoriel avec un point différent :

Nous allons aligner les cartes grâce à la classe `card-group`et le travail est fait !

```
<h2>Voici les voitures :</h2>
          <div class="card-group">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Peugeot 508</h5>
                <p class="card-text">Voici la voiture de peugeot</p>
              </div>
            </div>
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Mercedes AMG 45</h5>
                <p class="card-text">Voici la voiture de mercedes</p>
              </div>
            </div>
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Volvo S60</h5>
                <p class="card-text">Voici la voiture de volvo</p>
              </div>
            </div>
          </div>
```

![voiturepresentation](https://coding-school.fr/images/users/1641385351.png)

5 . Le formulaire pour choisir la voiture

Enfin nous allons faire un petit formulaire afin de sélectionner la voiture que l'on veut :
![voiturechoix](https://coding-school.fr/images/users/1641385659.png)

Avec le bouton :
![voiturechoixbouton](https://coding-school.fr/images/users/1641385901.png)

Voici le code utilisé : 
```
<h2>Choisissez votre voiture :</h2>
          <form>
            <div class="mb-3">
              <label for="exampleFormControlInput1" class="form-label">Votre nom</label>
              <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Jean">
            </div>
            <div class="mb-3">
              <select class="form-select" aria-label="Default select example">
                <option selected>Choisissez votre voiture</option>
                <option value="Peugeot 508">Peugeot 508</option>
                <option value="Mercedes">Mercedes</option>
                <option value="Volva">Volvo</option>
              </select>
            </div>
            <button class="btn btn-primary" type="submit">Soumettre ma demande</button>
          </form>
```