Discussion :

[charlieda]

Bonjour à toutes et à tous,

J'utilise bootstrap et je bloque sur une disposition.

Voilà à quoi je voudrais arriver dans un container



J'ai essayer col-sm-8 suivi d'un row et ce pour les deux div l'un en dessous de l'autre, ça fonctionne mais comme je peux faire pour mettre le bleu aligné horizontalement avec le rouge ?

Merci d'avance pour vos avis et aides.

Bonne journée

[javatwister]

Bonjour,

Sur ton image, le bleu est centré verticalement par rapport au rouge et au vert. Est-ce vraiment ce que tu veux?

[charlieda]

Bonjour,

Merci pour ta réponse.

Oui c'est ce que je veux.

En fait c'est une zone texte donc je veux qu'elle soit plus haute que les deux autres.

Merci

[javatwister]

Ceci fonctionne mais il y a sans doute des dizaines de possibilités différentes:

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#cadre {
	display:flex;
	align-items:center;
	width:80%;
	margin:auto;
}
#duo {
	height:400px;
	width:80%;
	margin-right:40px;
}
#duo div {
	margin-right:30px;
	margin-bottom:40px;
	width:100%;
	height:180px;
}
#red {
	background:red;
}
#lime {
	background:lime;
}
#blue {
	background:blue;
	width:20%;
	height:420px;
}

Code html :

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

1
2
3
4
5
6
7
<div id="cadre">       
	<div id="duo">       
		<div id="red"></div>
		<div id="lime"></div>
	</div>       
	<div id="blue"></div>
</div>

[charlieda]

Un très grand merci.

Je l'ai mis à ma sauce et c'est parfait.

En fait, je cherchais une solution bootstrap pure mais pas trouvé.

Ca fonctionne c'est le le principal.

Merci