krisajenkins / elm-exts / Exts.Html.Bootstrap

Base classes for Twitter Bootstrap 3 users.

stylesheet : Html msg

A tag that loads Bootstrap from a CDN.

You'll probably only want to use this to get you started. By the time you go into production, you should probably be loading this file in the <head> tag of your page.

container : List (Html msg) -> Html msg

Bootstrap grid container.

containerFluid : List (Html msg) -> Html msg

Bootstrap grid fluid container.

row : List (Html msg) -> Html msg

Bootstrap grid row.

col : { xs : GridWidths, sm : GridWidths, md : GridWidths, lg : GridWidths }

Bootstrap grid width elements. To be used as:

div
    [ classList
        [ col.xs.s12
        , col.md.s3
        ]
    ]
    ...

It doesn't save typing, but it does save typos, and that's worth having.


type alias GridWidths =
{ s1 : String
, s2 : String
, s3 : String
, s4 : String
, s5 : String
, s6 : String
, s7 : String
, s8 : String
, s9 : String
, s10 : String
, s11 : String
, s12 : String 
}

Bootstrap grid width definitions. See col for usage.

formGroup : List (Html msg) -> Html msg

Bootstrap form group.

empty : Html msg

The minimum markup - an empty span.

twoColumns : List (Html msg) -> List (Html msg) -> Html msg

Two evenly-sized columns.


type Ratio
    = SixteenByNine
    | FourByThree

Aspect ratios for responsive video embedding.

video : Ratio -> String -> Html msg

Embed a responsive video.

popover : PopoverDirection -> Basics.Bool -> List ( String, String ) -> Maybe String -> Html msg -> Html msg

Interface to the bootstrap popover that does not require bootstrap.js.


type PopoverDirection
    = Top
    | Right
    | Bottom
    | Left

clearfix : Html msg

Bootstrap clearfix.

well : List (Html msg) -> Html msg

Bootstrap well component.

jumbotron : List (Html msg) -> Html msg

Bootstrap jumbotron component.

badge : List (Html msg) -> Html msg

Bootstrap badge component.