flexbox-boostrap.Rmd

---
title: "Two Columns: html_document"
output: html_document
---

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

# Intro

There are two web frameworks available to us for creating multiple columns in html_document .Rmd files

- [**flexbox**](https://css-tricks.com/snippets/css/a-guide-to-flexbox/): 

  - Very flexible solution for controlling a single row of content
  
  - Disadvantage: flexbox columns don't reflow based on browser width, so may be difficult to read on mobile devices.
  
  - Advantage: flexbox columns don't reflow, making them a very good choice 


extremely flexible solution for reflowing content, it does not automatically scale to the width of the browser window. 



- [**bootstrap**](https://getbootstrap.com/): designed to reflow content according to the browser width by default.

You could use either framework to achieve the same layouts, but they would require different code for each and some things might be easier in one than the other. To give you **practical** solutions I'm going to show you how to do two different things:

- Content in two columns **independent of browser width** using flexbox

- Content that reflows to one column when the browser becomes narrow using bootstrap

## HTML & `<div>` elements

Web pages are written in HTML. HTML is composed of open and close tags, for instance this is how we would create a heading and subheading with the h1 and h2 tags

```{html}
<h1>Heading</h1>
<h2>Sub heading</h2>
```

The `<div>` tag allows us to split up components of a web page. In this document we're using <div> to define a row than then contains two <div> components, one for each column.

In RMarkdown we have the choice between typing out <div> tags or using pairs of `:::`. Because [lots of documentation](https://bookdown.org/yihui/rmarkdown-cookbook/multi-column.html) uses the `:::` approach I've provided examples of both syntaxes.


# Two columns independent of browser width

This uses **flexbox** 

## Using :::

:::: {style="display: flex;"}

::: {}

This is the first column (on the left)

```{r}
str(quakes)
```

:::

::: {}

... and this is the second column (on the right)

```{r}
str(chickwts)
```

:::

::::

## Using `<div>`

<div style="display: flex;">

<div>

This is the first column (on the left)

```{r}
str(quakes)
```

</div>

<div>

... and this is the second column (on the right)

```{r}
str(chickwts)
```

</div>

</div>


# Two columns dependent on browser width

This uses **bootstrap**.

## Using `:::`

:::: {class='fluid-row'}

::: {class='col-md-6'}

1st column when browser is wide

```{r}
head(datasets::airmiles)
```

:::

::: {class='col-md-6'}

... 2nd column when browser is wide

```{r}
head(datasets::AirPassengers)
```

:::

::::

## Using `<div>`

<div class='fluid-row'>

<div class='col-md-6'>

1st column when browser is wide

```{r}
head(datasets::airmiles)
```

</div>

<div class='col-md-6'>

... 2nd column when browser is wide

```{r}
head(datasets::AirPassengers)
```

</div>

</div>