# Elm-Bulma Columns

**URL:** <https://discourse.elm-lang.org/t/elm-bulma-columns/6927>\
**Category:** Show and Tell\
**Created:** [February 16, 2021, 8:26am UTC](https://discourse.elm-lang.org/t/elm-bulma-columns/6927 "2021-02-16T08:26:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Redvis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/redvis/32/3608_2.png) [@Redvis](https://discourse.elm-lang.org/u/Redvis)\
**Post date:** [February 16, 2021, 8:26am UTC](https://discourse.elm-lang.org/t/elm-bulma-columns/6927/1 "2021-02-16T08:26:36Z")

</div>

After a lot of research, I’ve found that Bulma withing elm is a very good and easy package to use. I’ve decided to share some of the column layout in elm view for a few columns.

 ![Screenshot_2021-02-16 Booking](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/7/7623f754b30011b356d5ad200cfaeb651391e735.png)

The code is very simple and I used a very basic elm code to demonstrate columns.

module Columns exposing (…)

import Browser  
import Bulma.Elements exposing (box)  
import Bulma.Columns exposing (columnModifiers, column)  
import Html exposing ( Html, text, div)  
import Html.Attributes exposing (class)

type alias Model =  
{ header : String  
, body : String  
}

type Msg  
= Header1 String  
| Body1 String

init : Model  
init =  
{ header = “”  
, body = “”  
}

update : Msg → Model → Model  
update msg model =  
case msg of  
Header1 next →   
{ model | header = next }

```
    Body1 next ->
        { model | body = next }

```

view : Model → Html Msg  
view model =  
column columnModifiers [class “column has-background-info is-8”]  
[ box [ class “box has-background-light has-text-grey text is-size-1 has-text-centered has-text-weight-bold”  
][text “Working With Columns”]  
, box [ class “has-background-light has-text-grey text is-size-3 has-text-centered is-family-primary has-text-weight-semibold”  
][text “Diffrent Column Layouts!!!”]  
, column columnModifiers [class “has-background-grey has-text-centered has-text-black text is-size-3”][text “Column 1”]  
, div [class “mb-3”][]  
, column columnModifiers [class “has-background-warning has-text-centered has-text-black text is-size-3”][text “Column 2”]  
, column columnModifiers [class “has-background-danger has-text-centered has-text-black text is-size-3”][text “Column 3”]  
, div [class “mb-3”][]  
, column columnModifiers [class “has-background-light”]  
[column columnModifiers [ class “has-background-primary has-text-centered has-text-black text is-size-3”][text “Column 4”]  
, div [class “mb-3”][]  
, column columnModifiers [class “has-background-grey has-text-centered has-text-black text is-size-3”][text “Column 5”]  
]  
, div [class “mb-6”][]  
, div [class “columns”]  
[div [ class “column has-background-warning has-text-centered has-text-black text is-size-3”][text “Column 6”]  
, div [class “column has-background-primary has-text-centered has-text-black text is-size-3”][text “Column 7”]  
, div [class “column has-background-grey has-text-centered has-text-black text is-size-3”][text “Column 8”]  
]  
, div [class “mb-6”][]  
, div [class “box”]  
[div [ class “columns is-8”]  
[div [ class “column has-background-danger has-text-centered has-text-black text is-size-3”][text “Column 9”]  
, div [class “column has-background-grey has-text-centered has-text-black text is-size-3”][text “Column 10”]  
, div [class “column has-background-primary has-text-centered has-text-black text is-size-3”][text “Column 11”]  
]  
]  
]

main =  
Browser.sandbox  
{ init = init  
, view = view  
, update = update  
}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 26, 2021, 8:27am UTC](https://discourse.elm-lang.org/t/elm-bulma-columns/6927/2 "2021-02-26T08:27:28Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.