For Believers.

Padding sur le bootstrap

Bonjour,

Louis Nicolas

Concernant la hauteur des cards il y a une plus grande que l'autre à cause du "card-header" rajouter se qui creer un décalage en ecran grand taille

j'ai donc rajouter pb-5 et sur la card2 pb-4 voici le code es la bonne Méthode ?

PS --> voici le code

Bonne fin de journée..

<!DOCTYPE html>
<html lang="fr" >
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  
  <title>CodePen - Tesla avec Bootstrap 5</title>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- ENTETE -->
<header>
  
  <nav class="navbar bg-dark navbar-dark p-3">
    <div class="container">
      <img src="https://believemy.com/uploads/2f3811b9174e35a2d77902ffd36a9a37_4dfb82dd429edb6a11a81ff74e9abfc4.png" style="height: 30px" class="mx-auto d-block"/>
    </div>
  </nav>
  
</header>

<!-- ICI : bannière -->
<div class="text-white py-5" style="background: center/cover url('https://believemy.com/uploads/126d05180ddf6f2ea67c8b669855bf89_e45c0e92710b43b3b938ed8fc4938f71.png')">
  <div id="presentation" class="container" style="padding: 100px 10px;@media all and (max-width: 500px) { #presentation{ padding: 30px 10px;}}">
    <h1 class="display-4">Bienvenue.</h1>
    <p class="text-white-50">Le site Tesla vous permet de commander vos fusées et vos voitures, même lorsque vous êtes dans votre canapé.      <span class="badge bg-success rounded">Un conseillé est en ligne.</span></p>
  </div>
</div>

<!-- PREMIERE SECTION -->
<section>
  
  <div class="container mt-5">
    <!-- ICI : progress bar-->
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 43%"></div>
    </div>
    
  
    <!-- ICI : alerte -->
    <div class="alert alert-primary mt-3 p-5">
      <h3 class="alert-heading"> Bienvenue sur Tesla. Ce site est en maintenance.</h3>
      <hr>
      <!-- ICI : les deux boutons -->
      <div class="btn btn-group btn-toolbar">
        <a class="btn btn-danger btn-lg" href="#">Suivre les avancements</a>    
        <a class="btn btn-success btn-lg" href="#">Nous contacter</a>    
      </div>
    </div>
      
    
    <nav class="breadcrumb">
      <!-- ICI : fil d’Ariane -->
      <ul class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Accueil</a>
        </li>
        <li class="breadcrumb-item">
          maintenance
        </li>
      </ul>
      
    </nav>
  </div>
    
  
  
</section>

<!-- DEUXIEME SECTION -->
<section>
  
  
  <!-- ICI : les cartes --> 
  <div class="container">
    <div class="row bg-light mb-4"> 
      <div class="col-md-6 g-4">
        <div class="card bg-secondary text-white">
          <img src="https://believemy.com/uploads/c7fe8837368024dc01e1845337f167e9_18fb807dabb97a3e4f920d1b0c9176b1.png" alt="..." class="card-img-top">
          <div class="card-header pb-5"></div>  
          <div class="card-body">
             <h5 class="card-title">Nouveautés</h5>
              <p class="card-text">Vous pourrez un jour acheter des fusées pour aller sur la lune</p>
          </div>
        </div>
      </div>
    
      <div class="col-md-6 g-4">
        <div class="card bg-secondary text-white">
          <img src="https://believemy.com/uploads/c7fe8837368024dc01e1845337f167e9_18fb807dabb97a3e4f920d1b0c9176b1.png" alt="..." class="card-img-top">
          <div class="card-header pb-4">Information</div>
            <div class="card-body">
              <h5 class="card-title">Nouveautés</h5>
              <p class="card-text">Les 30 premiers acheteurs de fusées partiront avec Elon Musk.</p>
            </div>
        </div>
      </div>
    </div>   
  </div>
  
</section>

<!-- TROISIEME SECTION -->
<section class="bg-dark text-white p-5">
  <div class="mx-auto w-75">
    <h2>Contactez-nous</h2>
    <!-- ICI : formulaire -->
    <form>
      <p>
          <label for="email">Adresse email</label>
          <input type="email" class="form-control w-100" placeholder="Entrez votre adresse email" name="email" id="email">
          <small class="text-muted">Nous ne partagerons pas votre adresse email.</small>
      </p>
      <p>
        <label for="message">Message</label>
        <textarea name="massage" id="message" rows="3" class="form-control w-100"></textarea>
      </p>
        <button type="submit" class="btn btn-outline-light mt-3">Soumettre</button>

  </form>
  </div>
</section>

<!-- ICI : pied de page -->
<!-- partial -->
<footer class="bg-secondary p-3">
  <div class="container">
    © Tesla
  </div>

</footer>  
</body>
</html>

1 réponse

Louis-Nicolas Leuillet

Le 27/12/2022 à 14:19

Bonjour Didier !

Bravo pour ton code, c'est une bonne méthode.

Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 19 décembre 2022 16:17

Dernière activité le 19 décembre 2022 16:17

Cours : Le Programme Rocket