Comment rendre responsive ces exemples

 
<?php

//Démarrage des sessions
session_start();

//Affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

// Un peu de lecture sur l'utilisation de PDO  :
// https://www.commentcamarche.net/faq/46512-pdo-gerer-les-erreurs
//connexion à la bdd
require_once './base.php';


// Découpage en "fonctions" du code pour le rendre plus facile à maintenir et pouvoir plus facilement réutiliser ces fonctionnalités
// perso, je placerai ces fonctions dans un fichier à part que j'inclurerai ensuie dans les pages où j'en ai besoin..

/**
 * Fonction permettant de faire des requêtes PDO "proprement"
 * @global type $bdd  issue de base.php
 * @param type $sql La requete à executer
 * @param type $datas les datas à transmettre dans la requete
 */
function execQuery($sql, $datas = NULL) {
  global $bdd; // variable de connexion à la BDD
  try {
    $requete = $bdd->prepare($sql);
    return $requete->execute($datas);
  } catch (Exception $e) {
    // en cas d'erreur :
    echo "<br><span style='color:red'>Erreur : </span>" . $e->getMessage();
    echo "<br> Requete SQL :<br>" . $sql;
    echo " <br>Les datas : <br>";
    print_r($datas);
  }
}

function getUserByPseudo($pseudo) {
  //Execution de la requete
  $sql = "SELECT * FROM client WHERE pseudo = ?";
  $datas = array($pseudo);
  $res = execQuery($sql, $datas);
  return $res->fetch(); // on retourne les infos dans un array
}

function addUser($pseudo, $pass) {
  $sql = "INSERT INTO client(pseudo, passe, date_inscription) VALUES(:pseudo, :passe, CURDATE())";
  $datas = array(':pseudo' => $pseudo, ':passe' => $pass);
  $res = execQuery($sql, $datas);
  return $res;
}

/**
 * Fonction qui vérifie que le pseudo/password existent en bdd
 * @param type $pseudo
 * @param type $pass
 * @return type
 */
function verif_login($pseudo, $pass) {
  $user = getUserByPseudo($pseudo);
  if (!empty($user)) {
    return password_verify($pass, $user['passe']);
  }
}

//-------- FIN DES FONCTIONS ----------//

//récupération PROPRE des variables AVANT de les utiliser
$pseudo = !empty($_POST['pseudo']) ? trim($_POST['pseudo']) : NULL;
$passe = !empty($_POST['passe']) ? trim($_POST['passe']) : NULL;
$confirm_passe = !empty($_POST['confirm_passe']) ? trim($_POST['confirm_passe']) : NULL;

//Traitement du SUBMIT
if (isset($_POST['entrees'])) {


  $passe_hache = password_hash($passe, PASSWORD_DEFAULT);

  if (!empty($_POST['pseudo']) AND!empty($_POST['passe']) AND!empty($_POST['confirm_passe'])) {

    if ($passe == $confirm_passe) {
      if (strlen($pseudo) >= 4 AND strlen($pseudo) <= 10) {

        $user = getUserByPseudo($pseudo);
        //Si l'utilisateur n'existe pas
        if (empty($user)) {
          //si l'insert en BDD c'est bien passé
          if (addUser($pseudo, $passe_hache)) {
            $message = '
                  <div class="col-sm-12">
                     <p class="bg-light border mt-2">
                     <h3> Bienvenue ' . $pseudo . '!</p></div></div> <div class="row"><div class="col-sm">
                     <p class="bg-light border mt-2">Vous avez été inscrit comme client.  </p>
                 </div>
                  <div class="col-sm-12">
                     <p class="bg-light border mt-2">
                        <h3>Cliquez sur le lien pour retourner au bon de commande.</h3>
                       <a href="commande.php?pseudo=' . $pseudo . '">
                         <span style="font-size:22px"><strong>  Retour au bon de commande   </strong></span>
                       </a>
                    </p>
                  </div>
                 

              </div>';
          }
        } else {
          $message = ' <div class="col-sm-12">  
                        <p class="bg-light border mt-2">
                        <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Ce pseudo existe déjà. Vous êtes déjà inscrit. Vous devez vous connecter. </a> </span></p>
                        <div class="col-sm">
                           <p class="bg-light border mt-2">
                           <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Choisissez un autre pseudo : <a href="connexion_perle.php">Se connecter</a> </span></p>
                       </div>
                     </div>';
        }
      } else {
        $message = '<div class="col-sm-12">  
                        <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Le pseudo doit contenir entre 4 et 10 caractères.</span>
                        <div class="col">
                          <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;">  Essayez à nouveau : <a href="inscr_perle.php">S\'incrire</a> </span>
                        </div>
                      </div>';
      }
    } else {
      $message = '<div class="col-sm-12"> 
                      <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Vos mots de passe ne correspondent pas. </span>
                      <div class="col">
                        <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;">  Essayez à nouveau : <a href="inscr_perle.php">S\'incrire</a> </span>
                      </div>
                   </div> ';
    }
  }
}
?>

<!Doctype>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Jumbotron Template · Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/jumbotron/">

    <!-- Bootstrap core CSS -->
    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <main role="main">
        <!-- Main jumbotron for a primary marketing message or call to action -->
        <form method="post" action="">
          <!-- Example row of columns -->
          <div class="row">
            <div class="col-md-4">
              <p><label for="pseudo">Votre pseudo S.V.P:</label></p>
              <p><label for="passe">Votre mot de passe:</label></p>
              <p> <label for="confirm_passe">confirmation du mot de passe:</label> </p>
            </div>
            <div class="col-md-4">

              <p><input type="text" name="pseudo" id="pseudo" value="<?php echo htmlspecialchars($pseudo); ?>"> </p>
              <p><input type="password" name="passe" id="passe"></p>
              <p><input type="password" name="confirm_passe" id="confirm_passe"> </p>
              <p><input type="submit" name="entrees" value="entrez"> </p>
            </div>
            <hr>
          </div>
        </form>
      </main>


          <?php
          if (!empty($message)) {
            echo $message;
          }
          ?>



    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script>
      window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')
    </script>
    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>