Mise en page bootstrap

Version imprimable

Bonjour, je suis débutant en mise en page css grille-bootstrap & bootstrap , je rencontre un problème pour aligner une div.row du moins...ce qu'elle contient, j'aimerai aligner les texte sur l'axe secondaire, les centrer ,et un logo a coté sur la même ligne, hors que modifie la taille du texte la ligne grossi du coup l'image aussi, je m'arrache les cheveux depuis ce matin! ! je suis nouveau donc merci pour votre indulgence ce qui est évident pour vous ne l'est pas vraiment pour moi :D
je vous poste le code qui est assez rudimentaire ..je l'avoue

je vous remercie par avance pour votre réponse !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- favicon -->
 
 
    <!-- importation font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
 
 
    <!-- importation bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
    <!-- importation css -->
    <link rel="stylesheet" href="style.css">
 
 
 
 
    <title>Devenez Aide ménagère</title>
</head>
<body>
  <div class="container-fluid align-middle"> 
 
       <!-- titre -->
<div class="row" >
    <div class="col-md-8 titre bg-primary align-middle   ">
        <p class="text-white   titre " >Devenez Aide ménagère</p>
    </div>
 
 
    <div class="col-md-3 titre  bg-primary align-middle  ">
        <p class="text-white  "> <span> appeler-nous</span></p>
    </div>
 
    <div class="col-md-1 titre  bg-primary align-middle">
        <img src="checked2.png" class=align-middle"  alt="logo" width="80" height="80">
    </div>
 
</div>
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
  background: white;
  padding: 20px;
  color:black;
  font-family: 'Roboto', sans-serif;
}
 
 
.titre{
  font-size: 1.5em;
}
span{
  font-size: 1.5em;
}

05/08/2020, 11h42
Octosquid

1 pièce(s) jointe(s)

Besoin d'aide

Personne pour m'aider ? je veux juste savoir comment aligner des images avec des divs de cette façon Pièce jointe 576622
en gros comment aligner un pictogramme à coté d'une row sur la méme ligne sans que la row ne grossisse trop et fini par changer de taille.Merci

Bonjour,

Citation:

Personne pour m'aider ?

prenons le temps de prendre le temps surtout en période de vacances.

Je vais répondre à ta première interrogation, la seconde n'ayant rien à voir à priori avec celle-ci.

Pour commencer il ne faut pas mettre de conteneur inutile juste pour le plaisir.

Deuxième point, se servir de la notion de cascade pour ne pas avoir à répéter les classes pour tous les éléments contenus.

Ton code HTML pourrait s'écrire avantageusement, par exemple, comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="container-fluid bg-primary"> <div class="row perso-row titre text-white " > <div class="col-md-8"> Devenez Aide ménagère </div> <div class="col-md-3"> appeler-nous </div> <div class="col-md-1"> <img src="checked2.png" class=align-middle" alt="logo" width="80" height="80"> </div> </div> </div>
Tu noteras que j'ai ajouté sur l'élément div class="row" la classe perso-row et c'est elle qui va centrer verticalement tes éléments.
Code:

1 2 3 .perso-row { align-items: center; }

05/08/2020, 15h09
Octosquid

1 pièce(s) jointe(s)

Merci NoSmoking pour ta réponse, j'avoue c'est la frustration m'a fait oublier quel mois on est et que potentiellement il y a des gens qui sont en vacances:D ton message m'a beaucoup aider,ça se comporte déjà mieux sur mon navigateur, je voulais par ce message savoir comment on fait pour déplacer l'image à gauche ou à droite dans le cas ou j'aurais mis <div class="col-md-4"> par exemple. Merci pour ton aide
Pièce jointe 576657

Comme tu utilises BootStrap, il est préférable d'utiliser les classes qu'il te met à disposition, je parle pour align-items:center.

Pour répondre à ta question et en reprenant le point ci-dessus cela pourrait donner :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="container-fluid bg-primary"> <div class="row titre text-white align-items-center"> <div class="col-md-6"> Devenez Aide ménagère </div> <div class="col-md-2"> appeler-nous </div> <div class="col-md-4 text-right"> <img src="checked2.png" class="align-middle" alt="logo"> </div> </div> </div>

10/08/2020, 16h44
Octosquid

Merci NoSmoking d'avoir pris le temps de me répondre, j'ai beaucoup appris grâce à toi ! je mets le post en "résolu". bonnes vacances ;)