Forum : jumbotron en bootstrap

Bonjour,

Je suis la formation du site pour apprendre le PHP, j'ai envie d'avoir un truc "pas trop mal" au fur et à mesure et également je teste au fur et à mesure des excercices des choses en plus. J'essaie d'avoir pour cela un "site" responsive qui ressemble à quelque chose. J'utilise bootstrap car j'aime bien ces "classes".

Le principal souci est dans le jumbotron, je trouve qu'il ne rend pas bien en mobile avec le texte en partie visible.

Je pense que mon erreur vient de l'alignement du jumbotron, j'ai l'impression que je ne vois pas le haut.
J'ai essayé de mettre une marge mais cela ne fonctionne pas.

<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;
  }

  .jumbotron {

background-size: cover;
height: 70%;}
}

  body{font-family: 'Inria Serif', serif;}

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
</style>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-10">
<div class="container">
<a class="navbar-brand" href="index"> <img src="Images\logo.png" width=25px class="rounded-circle">CQDQ</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

      <div class="collapse navbar-collapse" id="navbarsExample07XL">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.php">Accueil <span class="sr-only">(current)</span></a>
          </li>

          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownblague" data-toggle="dropdown" aria-expanded="false">fdsfds</a>
            <div class="dropdown-menu" aria-labelledby="dropdownblague">
              <a class="dropdown-item" href="1.php">1</a>
              <a class="dropdown-item" href="2.php">1</a>
              <a class="dropdown-item" href="3.php">3</a>
            </div>
          </li>
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownblague" data-toggle="dropdown" aria-expanded="false">fdsfds</a>
              <div class="dropdown-menu" aria-labelledby="dropdownfail">
                <a class="dropdown-item" href="11.php">1</a>
                <a class="dropdown-item" href="12.php">2</a>
                <a class="dropdown-item" href="13.php">3</a>
              </div>
          </li>   
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownblague" data-toggle="dropdown" aria-expanded="false">fdsfds</a>
            <div class="dropdown-menu" aria-labelledby="dropdownrecit">
                <a class="dropdown-item" href="21.php">1</a>
                <a class="dropdown-item" href="22.php">2</a>
                <a class="dropdown-item" href="23.php">3</a>
            </div>
          </li>

          </ul>

        <form class="form-inline">
           <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Chercher</button>
        </form>
        <a class="nav-link active text-white" href="Connection.php"> <i class="far nav-item fa-user-circle"></i> Se connecter</a>
      </div>
    </div>
</nav>

  <main role="main" class="container">
  <div class="jumbotron" style="background-image: url(img/fondjumbo.jpg); background-size: 100%;">
      <h1 class="text-white">CQDC</h1>
<p class="lead text-white">mon slogan</p>

</span>
</div>

jumbotron en bootstrap

2 réponses