JeremyBellows / elm-bootstrapify / Bootstrap.Grid

Bootstrap grid functions for generating html

Grid

containerFluid : List (Html msg) -> Html msg

Generates a fluid container html element

containerFluid []

container : List (Html msg) -> Html msg

Generates a container html element

container []

row : List (Html msg) -> Html msg

Generates a row html element

containerFluid
    [ row
        []
    ]

Column

column : List ColumnType -> List (Html msg) -> Html msg

Generates a column html element

containerFluid
    [ row
        [ column [ ExtraSmall Twelve, Small Twelve, Medium Twelve, Large Twelve ]
            []
        ]
    ]


type ColumnSize
    = One
    | Two
    | Three
    | Four
    | Five
    | Six
    | Seven
    | Eight
    | Nine
    | Ten
    | Eleven
    | Twelve

Type to be used when determining column size Note that a row can only container up to 12 column size units


type ColumnType
    = ExtraSmall ColumnSize
    | Small ColumnSize
    | Medium ColumnSize
    | Large ColumnSize

Type to be used when determining column size based on screen size Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)