Bootstrap.Form

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Forms

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

Create an Html form element

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

Create an inline form for placing elements horizontally.

Note: You should stick to inline elements to get the effect you are probably expecting!

Groups

Use form groups to group items together (label + input is a typical simple example)

group : List (Option msg) -> List (Html msg) -> Html msg

Use the group function to create a grouping of related form elements. It just creates a div container with a form-group Bootstrap class. Typically you use this for vertically laid out forms.

options List of options for customizing the group
children List of children

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

Create a form control label. Suitable for use in form groups.

attributes List of attributes
children List of child elements

type Option msg

Opaque type representing options for customing form groups.

attrs : List (Attribute msg) -> Option msg

Use this function to handle any Html.Attribute option you wish for your form group.

Grid layouts

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

Create a form group row element. Use this function when creating horizontal forms (in various shapes) It reuses the options from Bootstrap.Grid.Row which gives you a ton of customization options for how to layout columns within this row.

options List of Bootstrap.Grid.Row options
cols List of column elements (see col or colLabel)

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

Create a Grid column for use in form rows. It reuses the options from Bootstrap.Grid.Col which gives you a ton of customization options for layout.

options List of Bootstrap.Grid.Col options
children List of child elements

colLabel : List (Option msg) -> List (Html msg) -> Col msg

Create a label element as a grid column to be used in a form row. Handy for use in horizontal form in various shapes.

options List of Bootstrap.Grid.Col options for layout customization
children List of child elements

colLabelSm : List (ColOption msg) -> List (Html msg) -> Col msg

Create a shorter (height) colLabel

colLabelLg : List (ColOption msg) -> List (Html msg) -> Col msg

Create a taller colLabel

type Col msg

Opaque type representing a column in a form row

Validation

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

Function to provide validation feedback information for valid inputs

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

Function to provide validation feedback information for invalid inputs

Handy helpers

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

Creates a block level text element, suitable for providing context related help text in form groups.

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

Creates an inline text element, suitable for providing context related help text for inputs.

nixCodeX/elm-bootstrap/2.1.0