Exts.Html.Bootstrap

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

-> Bool

-> List ( String, String )

-> Maybe String

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

krisajenkins/elm-exts/27.4.0

Modules