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 (Attribute msg) -> List (Html msg) -> Html msg

Responsive fixed width container, which changes its max-width at breakpoint

containerFluid : List (Attribute msg) -> List (Html msg) -> Html msg

Full width container spanning the entire viewport

Rows

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

Create a row

options List of row options
cols List of columns

simpleRow : List (Column msg) -> Html msg

Create a row with no configuration options

keyedRow : List (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 options
keydCols List of key, column tuples

Columns

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

Create a column

options List of column options
children List of child elments

colBreak : List (Attribute msg) -> Column msg

Creates a full width column with no content. Handy for creating equal width multi-row columns.

keyedCol : List (Option msg) -> List ( String, Html msg ) -> Column msg

Create a column with keyed children

options List of column options
keyedChildren List of key,element child element tuples

type Column msg

Opaque type representing a column element

nixCodeX/elm-bootstrap/2.1.1

Bootstrap.Grid

Containers

Rows

Columns

Modules