frandibar / elm-bootstrap / Bootstrap.Utilities.Display

Quickly and responsively toggle the display value of components and more with these display utilities.

Flexibily responsive display

You may combine hiding and display functions to control when an element is displayed accross breakposints.

** To hide only for xs:**

div [ Display.none, Display.blockSm ] [ text "Can't see me in XS" ]

** To show only for sm:**

div [ Display.none, Display.blockSm, Display.noneMd ] [ text "Only see me in MD" ]

Hiding elements

none : Html.Styled.Attribute msg

Hide element.

noneSm : Html.Styled.Attribute msg

Hidden from SM breakpoint and up.

noneMd : Html.Styled.Attribute msg

Hidden from MD breakpoint and up.

noneLg : Html.Styled.Attribute msg

Hidden from LG breakpoint and up.

noneXl : Html.Styled.Attribute msg

Hidden from XL breakpoint and up.

Displaying elements

block : Html.Styled.Attribute msg

Display as block element.

blockSm : Html.Styled.Attribute msg

Display as block element from SM breakpoint and up.

blockMd : Html.Styled.Attribute msg

Display as block element from MD breakpoint and up.

blockLg : Html.Styled.Attribute msg

Display as block element from LG breakpoint and up.

blockXl : Html.Styled.Attribute msg

Display as block element from XL breakpoint and up.

inline : Html.Styled.Attribute msg

Display as inline element.

inlineSm : Html.Styled.Attribute msg

Display as inline element from SM breakpoint and up.

inlineMd : Html.Styled.Attribute msg

Display as inline element from MD breakpoint and up.

inlineLg : Html.Styled.Attribute msg

Display as inline element from LG breakpoint and up.

inlineXl : Html.Styled.Attribute msg

Display as inline element from XL breakpoint and up.

inlineBlock : Html.Styled.Attribute msg

Display as inline block element.

inlineBlockSm : Html.Styled.Attribute msg

Display as inline block element from SM breakpoint and up.

inlineBlockMd : Html.Styled.Attribute msg

Display as inline block element from MD breakpoint and up.

inlineBlockLg : Html.Styled.Attribute msg

Display as inline block element from LG breakpoint and up.

inlineBlockXl : Html.Styled.Attribute msg

Display as inline block element from XL breakpoint and up.

table : Html.Styled.Attribute msg

Display as table element.

tableSm : Html.Styled.Attribute msg

Display as table element from SM breakpoint and up.

tableMd : Html.Styled.Attribute msg

Display as table element from MD breakpoint and up.

tableLg : Html.Styled.Attribute msg

Display as table element from LG breakpoint and up.

tableXl : Html.Styled.Attribute msg

Display as table element from XL breakpoint and up.

tableCell : Html.Styled.Attribute msg

Display as table cell element.

tableCellSm : Html.Styled.Attribute msg

Display as table cell element from SM breakpoint and up.

tableCellMd : Html.Styled.Attribute msg

Display as table cell element from MD breakpoint and up.

tableCellLg : Html.Styled.Attribute msg

Display as table cell element from LG breakpoint and up.

tableCellXl : Html.Styled.Attribute msg

Display as table cell element from XL breakpoint and up.

tableRow : Html.Styled.Attribute msg

Display as table row element.

tableRowSm : Html.Styled.Attribute msg

Display as table row element from SM breakpoint and up.

tableRowMd : Html.Styled.Attribute msg

Display as table row element from MD breakpoint and up.

tableRowLg : Html.Styled.Attribute msg

Display as table row element from LG breakpoint and up.

tableRowXl : Html.Styled.Attribute msg

Display as table row element from XL breakpoint and up.