Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range.
Grid.container
[ Grid.row
[ Row.topXs ]
[ Grid.col
[ Col.xs4 ]
[ text "col1-row1" ]
, Grid.col
[ Col.xs8 ]
[ text "col2-row1" ]
]
, Grid.simpleRow
[ Grid.col
[ Col.xs4 ]
[ text "col1-row2" ]
, Grid.col
[ Col.xs6 ]
[ text "col2-row2" ]
]
]
container : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Responsive fixed width container, which changes its max-width at breakpoint
containerFluid : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Full width container spanning the entire viewport
row : List (Row.Option msg) -> List (Column msg) -> Html msg
Create a row
options
List of row optionscols
List of columnssimpleRow : List (Column msg) -> Html msg
Create a row with no configuration options
keyedRow : List (Row.Option msg) -> List ( String, Column msg ) -> Html msg
Create a row with keyed columns. Handy when you need to move columns around without getting massive rerenders.
options
List of row optionskeydCols
List of key, column tuplescol : List (Col.Option msg) -> List (Html msg) -> Column msg
Create a column
options
List of column optionschildren
List of child elmentscolBreak : List (Html.Attribute msg) -> Column msg
Creates a full width column with no content. Handy for creating equal width multi-row columns.
keyedCol : List (Col.Option msg) -> List ( String, Html msg ) -> Column msg
Create a column with keyed children
options
List of column optionskeyedChildren
List of key,element child element tuplesOpaque type representing a column element