Bootstrap jumbotron pleine largeur et hauteur de la fenêtre avec l'image de fond

J'ai un bootstrap jumbotron sur un site web, et je me demandais comment je pourrais faire ça toute la largeur et la hauteur de l'écran, ou au moins de toucher la barre de navigationcomme il existe un écart entre le jumbotron et la barre de navigation.

Jusqu'à présent, j'ai un "conteneur" de classe à l'intérieur de la "jumbotron" classe pour la rendre toute la largeur de l'écran, sans coins arrondis, mais comment pourrais-je l'avoir donc, il serait de la largeur et de la hauteur de l'appareil de la fenêtre d' jusqu'à ce que quelqu'un se défile vers le bas?

Jusqu'à présent c'est ce que j'ai:

<div class="jumbotron">
    <div class="container">
    <center><h1>Hello, World!</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula mauris, iaculis quis tortor eget, ultricies mollis nisi. 
        </p>
        <a class="btn btn-default" href="#">Button 1</a>
        <!-- <a class="btn btn-info" href="#">Button 2</a> -->
    </center>
    </div>
</div>

source d'informationauteur Hp123

  1. 42

    Nous avons donc 3 questions ici:

    Enlever l'excédent de l'espace sous la barre de navigation

    La valeur par défaut de bootstrap barre de navigation a une margin-bottom: 20pxvous voulez remplacer le comme ceci:

    .navbar {
    margin-bottom: 0px;
}

    Faire jumbotron pleine largeur

    Bootstrap, documentation dit:

    De faire le jumbotron pleine largeur, et sans coins arrondis, place
    en dehors de tous .les conteneurs et ajouter un .conteneur à l'intérieur.

    Donc en gros:

    <div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

    Faire jumbotron pleine hauteur

    Je ne suis pas sûr de la façon proprement ce sera adaptée à votre projet, mais vous pouvez essayer quelque chose comme:

    .jumbotron{
    height: 100vh;
}

    *Un bon à savoir: Le vh signifie viewport height

  2. 1

    Vous pouvez atteindre cet objectif en utilisant le jumbotron juste en dessous de la barre de navigation. Vous devez utiliser le jumbotron à l'intérieur d'un conteneur ou div, avec sa classe comme:

    <div class="container-full-bg">

    À l'aide de " bg " augmentera la largeur de la jumbotron pour s'adapter à la page. Afin d'augmenter la hauteur, j'ai utilisé le texte dans le conteneur de classe ou tout simplement utilisé <br> balises pour augmenter le jumbotron la hauteur en conséquence pour mes besoins. Un exemple:

    <div class="container-full-bg">  <!--  increased the jumbotron width -->
        <div class="jumbotron ">
            <div class="container">
              <br><br><br>
              <p> Write here <p>
              <br><br><br><br>
            </div>
        </div>
</div>

    Maintenant pour afficher correctement l'image dans le jumbotron, en arrière-plan de la taille que de couverture,la personnalisation du fichier css:

    .jumbotron{
    background-image: url(show-copy.jpg) ;
    background-size: cover; 
    height: 100%;
    width: 100%;
}

    Espère que cela aide 🙂

  3. 0
    <div class="jumbotron" style="height:100vh;"></div>

    Cela devrait vous donner une largeur et de la hauteur totale jumbotron

  4. -2

    Il y a un certain nombre de façons d'obtenir ce que vous voulez ici. Je sais que ce thread est un peu vieux, mais....

    <div class="jumbotron jumbotron-fluid">

    ferait le jumbotron pleine largeur.