nixCodeX / elm-bootstrap / Bootstrap.Grid

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" ]
        ]
    ]

Containers

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

Rows

row : List (Row.Option msg) -> List (Column msg) -> Html msg

Create a row

simpleRow : 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.

Columns

col : List (Col.Option msg) -> List (Html msg) -> Column msg

Create a column

colBreak : 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


type Column msg

Opaque type representing a column element