Partage
  • Partager sur Facebook
  • Partager sur Twitter

Disposition des éléments avec bootstrap

Sujet résolu
    23 avril 2019 à 17:26:34

    Bonjour,

    Je voudrais reproduire cette structure pour mon site.

    Voici mon code. Vous obtiendrez ça.

    Pour commencer, que pensez-vous des imbrications des éléments et de l'utilisation du système de grille ?

    Ensuite, je voudrais savoir comment faire pour que le texte de la deuxième section soit par dessus la première section, c'est-à-dire avoir le texte qui s'affiche sur une image en fond. Vous avez un exemple sur le site de blablacar. On peut voir que lorsque l’écran est large, "Et vous, qui allez-vous retouver ?" est par dessus l'image. Lorsqu'on réduit la fenêtre, le texte se place en dessous.

    Je vous remercie pour votre aide.

    • Partager sur Facebook
    • Partager sur Twitter
      23 avril 2019 à 17:42:48

      Bonjour,

      En dessous de ton header tu fait un jumbotron tu colle ton image en background de celui-ci, et tu englobe ton texte et ton bouton dedans.

      • Partager sur Facebook
      • Partager sur Twitter

      Compos sui.

        23 avril 2019 à 20:33:57

        Merci pour ta réponse, mais le problème reste le fait que lorsqu'on réduit la taille de la fenêtre, le texte reste sur l'image, masquant celle-ci.

        Je voudrais qu'il se place en dessous dans ce cas.

        -
        Edité par Awbro 23 avril 2019 à 20:34:46

        • Partager sur Facebook
        • Partager sur Twitter
          23 avril 2019 à 21:18:01

          Effectivement là à mon niveau sur bootstrap 4 je bloque bien qu'il doit y avoir une fonction pour le faire.

          Mais si tu veut je te dit comment tricher :D

          un jumbotron dedans tu met ton texte tu rajoute a tes class une class  text1. (par exemple)

          tu duplique ton élément text1 tu le colle sous ton jumbotron avec une class text2.

          Le texte du jumbotron tu ne le touche pas, le doublon text2 (hors du contenair jumboton) lui tu le met en display:none;

          tu rajoute une règle @média pour 768px

          en gros en css ca donnerais ceci :

          .jumbotron{
                              background: url("../assets/img/1.jpg") no-repeat fixed center;
                              margin: 0;
                          }
                          .text2{
                              display: none;
                          }
          
                          @media screen and (max-width: 764px) {
                              .text1{
                                  display: none;
                              }
                              .text2{
                                  display: block;
                              }
                          }



          • Partager sur Facebook
          • Partager sur Twitter

          Compos sui.

          Disposition des éléments avec bootstrap

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown