Discussion :

[Ushuango]

Bonjour,

Je suis en train de découvrir bootstrap et j'essaie de faire un header pour l'instant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<header>
    <div class="container">
        <div class="row justify-content-between align-items-center">
            <img class="col-5 col-sm-3 my-1 rounded-circle" src="{{asset('images/bear_hello.jpg')}}" alt="bear say welcome">
            <h1 class="col-4 col-sm-3 text-uppercase text-center">adm</h1>
            <button class="col-2 col-sm-1 btn btn-info btn-sm">Connexion</button>
        </div>
    </div>
</header>

Mon projet (exercice) est en Symfony, au cas ou ça pourrait avoir un impact!

Histoire d'avoir une image pas trop petite en mode portable et pas trop grosse en mode Desktop j'ai utilisée les classes col-5 col-sm-3
Quelque chose m'échappe forcément: normalement, je devrais avoir 5 colonnes pour mon image en très petit et 3 sur les autres écrans.
Mais ce n'est pas le cas !! col-5, col-4, col-2 ne sont pas prises en compte en mode portable.
Ou bien je n'ai pas compris le principe du responsive et des breakpoints de bootstrap .

Par ailleurs, la taille du texte pour le bouton connexion en petit écran est ... très petite, ça rapetisse automatiquement ? un moyen d'avoir une talle plus grosse uniquement
en mode portable?

Je vous remercie par avance de vos réponses.

Laurent.

[kevin254kl]

Salut,

https://getbootstrap.com/docs/3.4/cs...sive-utilities

Surcharge la propriété qui pose problème https://themesberg.com/knowledge-cen...-bootstrap-css

[Ushuango]

Merci pour ta réponse, mais avant de commencer à bidouiller , je vais repartir de zéro:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<header>
    <div class="container-fluid">
        <div class="row justify-content-between align-items-center">
            <img class="col col-sm-2 my-1 bear" src="{{asset('images/bear_hello.jpg')}}" alt="bear say welcome">
            <h1 class="col text-uppercase text-center">adm</h1>
            <button class="col col-sm-2 col-lg-1 btn btn-info btn-sm mx-3  ">Connexion</button>
        </div>
    </div>
</header>

qui me donne en mode portable (320 pixels de large )

Pièce jointe 610995

On note que ADM n'est pas bien aligné horizontalement avec le bouton et l'image. Pourquoi, je n'en sais rien, mais s'il est possible d'y remédier, je suis preneur.

Si je passe en mode Desktop:

Pièce jointe 610996

Finalement tout fonctionne bien ( je ne sais pas pourquoi ça ne marchait pas avant !)
Juste le problème de l'alignement horizontal pour l'instant...

[jreaux62]

Bonjour,

ATTENTION à la VERSION de Bootstrap utilisée !
Certaines syntaxes / classes / ... sont différentes !

Voir :

• Bootstrap 5 (sans jQuery)
• Grid system

[Ushuango]

J'utilise en vérité bootswatch qui, normalement, utilise la dernière version de bootstrap...

Mais je précise encore une fois: pour l'instant, bootstrap fait ce que je veux, sauf l'alignement horizontal correct du H1 ADM