bulma/tests/manual/layout/columns/bulma_layout_columns.Rmd

---
title: "Column Tests"
subtitle: "Testing Bulma Column Functions"
author: 
  - name: First Author
    url: https://rstudio.com
    extra: 
      - "First Affiliation"
      - "@tweeter345"
  - name: Second Author
    url: https://duckduckgo.com
    extra: 
      - "Second Affiliation"
      - "Very Cool Guy"
date: '`r strftime(Sys.time(), "%F %T")`'
header-links:
  - name: Github
    url: https://github.com/gerkelab
  - name: Home
    url: https://gerkelab.com
bulma:
  hero: ["info", "bold"]
output: bulma::bulma_document
editor_options: 
  chunk_output_type: console
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(bulma)
```

## Columns

```r
bulma::bulma_columns("first column", "second column", "third column")
```

`r bulma::bulma_columns("first column", "second column", "third column")`

### Setting Gap

```{r}
bulma_columns(
  "First", "Second", "Third", "Fourth",
  gap = 2
)
```


<div class="columns is-tablet is-2 is-variable is-multiline has-background-primary">
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</div>


### Apply Class to Columns Container

```{r}
bulma_columns(
  "First", "Second", "Third", 
  class = list(bulma_typography(alignment = "centered", size = 3))
)
```

### Apply Class to Columns Container and Columns

```{r}
bulma_columns(
  "First", "Second", "Third", 
  gap = 2,
  class = list(bulma_typography(alignment = "centered", size = 3)),
  column_options = bulma_column_options(
    class = list(
      bulma_color("white", background = "success"),
      bulma_modifier(state = "outlined")
    )
  )
)
```


<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
<div class="column has-background-primary">
Column
</div>
<div class="column has-background-warning">
Column
</div>
<div class="column has-background-danger">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>