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 it's 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

Columns

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

Create a column

options List of column options
cols 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.

type Column msg

Opaque type represetning a column element

rundis/elm-bootstrap/1.0.0

Bootstrap.Grid

Containers

Rows

Columns

Modules