Mise en page bootstrap

**Octosquid** · 04/08/2020, 20h09

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

je vous poste le code qui est assez rudimentaire ..je l'avoue

je vous remercie par avance pour votre réponse !

Code HTML :

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

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 CSS :

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

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;
}

**Octosquid** · 05/08/2020, 11h42

Personne pour m'aider ? je veux juste savoir comment aligner des images avec des divs de cette façon Nom : 1.JPG
Affichages : 106
Taille : 26,8 Ko

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

**NoSmoking** · 05/08/2020, 14h39

Bonjour,

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 html :

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

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 :

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

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

**Octosquid** · 05/08/2020, 15h09

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

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
Nom : 2.JPG
Affichages : 100
Taille : 30,9 Ko

Nom : 2.JPG
Affichages : 100
Taille : 30,9 Ko

**NoSmoking** · 07/08/2020, 11h30

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 html :

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

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>

**Octosquid** · 10/08/2020, 16h44

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

Mise en page bootstrap

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager