# Bootstrap 4 - Grid's



## k3nguruh (19. Februar 2020)

Hallo,

ich versuche mich gerade (eigentlich schon seit Stunden / Tagen) an Bootstrap um das angehängte Aussehen zu realisieren. Es sollen je nach Bildschirmbreite die Form-Elemente anders angeordnet werden. Vll ist das auch gar nicht möglich. Ich würde mich über Infos und vor allem einen Code-Schnipsel sehr freuen.


----------



## Sempervivum (19. Februar 2020)

Warum Bootstrap? Mit den Rasterbereichen von Gridlayout kannst Du die Anordnung der Items einstellen, wie Du es brauchst:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche#Rasterbereiche


----------



## k3nguruh (19. Februar 2020)

Sempervivum hat gesagt.:


> Warum Bootstrap?



Naja, weil ich das für mich eigentlich als "einfach" ansehe ohne noch viel eigenes CSS zu "erfinden" und es  verschiedene Sachen (Datepicker, etc) bereits angepasst gibt. Ich möchte jedenfalls erstmal mit Bootstrap arbeiten.

Könntest du mir vll einen Code (mit meinem Problem) geben der von deiner verlinkten Seite kommt. Ggf. kann ich dann ja Rückschlüsse für Bootsrap ziehen.


----------



## Sempervivum (19. Februar 2020)

> weil ich das für mich eigentlich als "einfach" ansehe


Ganz so einfach scheint es dann doch nicht zu sein:


> ich versuche mich gerade (eigentlich schon seit Stunden / Tagen)



Es stimmt schon, dass es nützliche Sachen bei Bootstrap gibt wie Datepicker und Modal aber diese Gridsachen haben sich eigentlich überlebt dadurch, dass es jetzt Gridlayout gibt.

Damit kann man die Anordnung quasi WYSIWYG definieren. Würde für deinen Fall etwa so aussehen:

```
body {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-areas: "label-1"
                "input-1"
                "label-2"
                "input-2"
                "button";
        }

        @media (min-width: 30em) {
            body {
                grid-template-columns: repeat(2, 1fr);
                grid-template-areas: "label-2 input-1"
                    "label-2 input-2"
                    "null button";
            }
        }

        @media (min-width: 50em) {
            body {
                grid-template-columns: repeat(3, 1fr);
                grid-template-areas: "label-1 label-2 null"
                    "input-1 input-2 button";
            }
        }
```


----------



## Jan-Frederik Stieler (20. Februar 2020)

HI.
Dein Vorhaben ist mit Flexbox nicht ganz unmöglich aber doch recht aufwändig.
Da Flexbox immer in eine Richtung orientiert ist und Du mächtest die Reihenfolge von Elementen ändern.
Das würde über das Flexbox-Attribut `order` gehen, aber Du willst auch Elemente umbrechen und dafür gibts in flexbox nichts.
Ich müsste jetzt auch erstmal rumprobieren um das hinzubekommen.

Solange es nicht um eine Kunden Webseite geht, würd ich auf CSS-Grid setzen. Da kannste den IE11 getrost ignorieren.

Hier ist auch noch ein netter Text:
https://blog.theodo.com/2018/03/stop-using-bootstrap-layout-thanks-to-css-grid/

Ich nutze von Bootstrap auch inzwischen nur noch manchmal Komponenten oder wenns mal schnell gehen muss.
Aber ich hab gemerkt das mir grad das Grid inzwischen mehr arbeit macht als wenn ichs schnell selbst schreibe.

Grüße


----------



## k3nguruh (20. Februar 2020)

Hallo,
erstmal Danke für eure Antworten... mmhh, dann werd ich mich wohl erstmal hinsetzen müssen, um das CSS-Grid zu verstehen.

Muss ich erstmal selber probieren mit welchem "System" ich das am besten gebastelt bekomme. Falls aber doch noch einer was für Bootstrap kennen sollte, lasst mich bitte nicht dumm sterben ;-)


----------



## MrMurphy (20. Februar 2020)

Kurz: Mit Bootstrap ist dein Problem nicht lösbar.


----------

