Comment placer trois boutons en triangle sur Bootstrap

Bonjour,
Je souhaite placer 3 boutons en triangle sur Bootstrap lorsque ma page est sur un smartphone.
J'y arrive sur mon ordinateur, voici le rendu :



Cependant, lorsque je suis sur mon smartphone (que je reduis la page), les boutons se placent les un sous les autres :



Voici mon code :

<form method="post" action="requete.php" role="form" id="formulaire" style="margin-top: 150px">
		<div class="container-fluid">
			<div class="row">
					<button class="btn btn-lg btn-success btn-block" id="XX1" type="submit">XXXX</button>
			</div>
			<div class="row">
					<button class="btn btn-danger col-md-6" id="XX2" type="submit">XXXX</button>
					<button class="btn btn-warning col-md-6" id="XX3" type="submit">XXXX</button>
			</div>
	</div>
	</form>

Comment résoudre mon problème ?
Merci.

Yordi a écrit :
Hello,
Il te suffit de remplacer la class col-md-6 par col-6

Merci, tout fonctionne ! Quelle est la différence ?

Bootstrap est en fait ce que l'on appelle mobile-first. Cela veut dire que les class de base comme col-n s'appliqueront toujours pour le mobile. Ensuite, si tu veux avoir des changement visuel pour une plus haute résolution, il existe col-xs-n (il ne me semble plus utilisé depuis la version 4), col-sm-n, col-md-n, col-lg-n, col-xl-n (dispo depuis la version 4.?).

Donc en prenant un exemple concret, tu auras par exemple :

<div class="row">
	<div class="col-6 col-sm-4 col-md-2 col-xl-1"></div>
	<div class="col-6 col-sm-4 col-md-2 col-xl-1"></div>
	<div class="col-6 col-sm-4 col-md-2 col-xl-1"></div>
	<div class="col-6 col-sm-4 col-md-2 col-xl-1"></div>
</div>

Etant donné que la grid de bootstrap est constitué de 12 colonnes, et que les breakpoints sm/md/lg/xl correspondent à :

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Si ta fenetre (viewport) fait entre 0 et 575px, tes div feront 6/12 de la div.row (la moitié de l'espace),
Entre 576px et 767px, tes div feront 4/12 (1/3)
Entre 768px et 991px, tes div feront 2/12
Au dessus de 992px, 1/16


Pour simplifier ton exemple, tu peux tout a fait faire :

<div class="row">
					<button class="col-12 btn btn-lg btn-success btn-block" id="XX1" type="submit">XXXX</button>
					<button class="btn btn-danger col-6" id="XX2" type="submit">XXXX</button>
					<button class="btn btn-warning col-6" id="XX3" type="submit">XXXX</button>
			</div>

L'idée est que si la row (grid) n'a pas assez d'espace pour les columns, les suivantes reviennent à la ligne, tu n'es pas obligé de faire une row avec tiptop juste 12 columns.

Si tu veux rendre ce même code responsive, pour un grand format, tu peux avoir :

<div class="row">
					<button class="col-12 col-md-6 btn btn-lg btn-success btn-block" id="XX1" type="submit">XXXX</button>
					<button class="btn btn-danger col-6 col-md-3" id="XX2" type="submit">XXXX</button>
					<button class="btn btn-warning col-6 col-md-3" id="XX3" type="submit">XXXX</button>
			</div>

Ce qui fait que au dessus de "md", tes boutons feront, la moitié de la largeur pour le premier et ensuite un quart pour les 2 autres

Un peu long comme explication, mais c'est l'occasion de le partager pour tout le monde en détail