WordPress : Comment implémenter le code du widget bootstrap pour l’en-tête personnalisé dans WordPress ?

Publié par Jean-Michel le

Bootstrap : remplacer l’adresse par 3 logos (et les masquer sur mobile) 🏆

  • 1· Objectif — Afficher BBB A+, Google Partner & cie à la place du bloc adresse, alignés horizontalement.
  • 2· Structure recommandée — Une ligne Bootstrap .row contenant 3 colonnes de même largeur (.col-md-4 chacun).
  • 3· Code exemple :
<div class="address">
  <div class="row">
    <div class="col-4 d-none d-md-block">
      <img src="bbb.png"  class="img-fluid" alt="BBB A+ Logo">
    </div>
    <div class="col-4 d-none d-md-block">
      <img src="google-partner.png" class="img-fluid" alt="Google Partner">
    </div>
    <div class="col-4 d-none d-md-block">
      <img src="badge-3.png" class="img-fluid" alt="Votre badge">
    </div>
  </div>
</div>
  • 4· Masquer sur mobile — Les classes d-none d-md-block cachent chaque logo sur <576 px.
  • 5· Astuce alignement — Utilise .img-fluid pour une largeur 100 %, ou ajoute .text-center sur les div.col-4 pour centrer.

➡️ Trois logos alignés, grille intacte (12 colonnes), et invisibles sur mobile grâce aux classes utilitaires Bootstrap.

Je travaille sur le site, je ne suis pas un pro du bootstrap. Voici l’en-tête que j’ai avec le thème :

entrez la description de l'image ici

Je souhaite remplacer l’adresse par 3 petites images png, à savoir BBB A + Accredited Business et Google Partner.

Comme ça : (Photoshopé)
entrez la description de l'image ici

Voici le code du widget :

<div class="col-xs-12 col-sm-9 col-lg-10 start-xs start-sm">
    <aside id="text-3" class="widget header-right widget_text">
        <div class="textwidget">
            <div class="container extra-info">
                <div class="row">
                    <div class="col-sm-5 col-md-5">
                        <i class="fa fa-phone"></i>
                        <div class="phone">
                            <h3>1-775-97-377</h3>
                            <span>info@thememove.com</span>
                        </div>
                    </div>
                    <div class="col-sm-7 col-md-6">
                        <i class="fa fa-home"></i>
                        <div class="address">
                            <h3>14 Tottenham Court Road</h3>
                            <span>London, England.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</div>

Pourriez-vous s’il vous plaît me faire savoir quels seront les bons tags et le bon code que je peux utiliser ? J’ai aussi un problème d’alignement ! col-md, je veux le cacher dans la version mobile (peut-être col-xs)

L’aide sera vraiment appréciée!

Solution n°1 trouvée

Essayez de remplacer le contenu de l’adresse par une autre ligne et les trois divs comme ci-dessous. N’oubliez pas que les colonnes doivent totaliser 12 pour que la grille fonctionne comme il se doit.

<div class="address">
<div class="row">
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
</div>

En ce qui concerne également le masquage des colonnes, je sais que bootstrap a différentes manières de le faire avec l’ajout de leurs classes, mais examine également les requêtes multimédias.

@media only screen and (max-width: 960px) {
.whatever {
display:none;
}
}

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *