Bootstrap Button resposive machen

[Cjls96]

Ich habe mit Bootstrap zwei Buttons erstellt und mir die Icons, die auf den Buttons abgebildet sind, über FontAwesome geholt. Wie bekomme ich es jetzt aber hin, dass die Buttons responsive sind, also sich je nach Bildschirmgröße vergrößern bzw. verkleinern?

 

[Pille1002]

Sind sie doch, bzw.. der Button ändert nicht seine Größe, sonder Wandert dann (also wenn nebeneinander kein Platz dann wird untereinander angeordnet)

und zwei Class Elemente schein mir auch falsch zu sein

 

[Yuuri]

https://getbootstrap.com/docs/4.0/layout/grid/

Woran hakts genau?

 

[blablub1212]

Du musst dich bei Bootstrap zwingend mit dem Grid-System auseinander setzen und auch verstehen wie das funktioniert. Sonst kann dabei nichts rauskommen ...

Für dein Problem: https://travishorn.com/responsive-buttons-with-bootstrap-7c2a7c144308 (erster Google-Treffer ...)

 

[pReya]

Wenn ich dich richtig verstehe, willst du einfach nur, dass der Button sich seinem Eltern-Element in der Breite anpasst. Das hat nicht wirklich etwas mit "responsive" zu tun. Dazu musst du nur den Buttons noch zusätzlich die Klasse .btn-block geben. Dann nehmen sie immer die Breite ihres Eltern-Elements ein. Sieht dann so aus:

<div><button type="button" class="btn btn-block btn-outline-info btn-md active"><i class="fas fa-edit fa-2x"></i></button></div>
<p></p>
<div><button type="button" class="btn btn-block btn-outline-info btn-md active"><i class="fas fa-cogs fa-2x"></i></button></div>

 

[Cjls96]

Sorry für das Missverständnis, der Button ist schon responsive. Es geht um das Icon darin. Ich habe es jetzt so gemacht, dass ich das Icon bei bestimmter Screengröße verkleinere. Jetzt habe ich leider nur noch das Problem, dass das Icon dann nicht mittig bleibt (siehe Bild). Woran liegt das? Info: Das grüne ist der Button.