Grid layout

These functions are the foundation of any application. Grid elements are nested as follows: container() > columns() > column() ~ column(). A column() may be created with an explicit width, 1 through 12. To fit a column automatically to its content use width = "content". To divide the space in a row evenly amongst all columns use width = "equal". For examples and usage tips see the sections below.

column(..., width = "equal")

columns(...)

container(..., centered = FALSE)

Arguments

...	Any number of tags elements passed as child elements or named arguments passed as HTML attributes to the parent element.
width	A responsive argument. One of 1:12, "content", or "equal", defaults to "equal".
centered	One of TRUE or FALSE specifying how a container fills the browser or viewport window. If TRUE the container is responsively centered, otherwise, if FALSE, the container occupies the entire width of the viewport, defaults to FALSE.

See also

Other layout functions: fieldset(), flex(), navbar(), responsive, webpage()

Examples

### Equal width columns

container(
  columns(
    column(
      "Aliquam erat volutpat."
    ),
    column(
      "Mauris mollis tincidunt felis."
    ),
    column(
      "Cum sociis natoque penatibus et magnis dis parturient montes,",
      "nascetur ridiculus mus."
    )
  )
)
#> <div class="container-fluid">
#>   <div class="row">
#>     <div class="col">Aliquam erat volutpat.</div>
#>     <div class="col">Mauris mollis tincidunt felis.</div>
#>     <div class="col">
#>       Cum sociis natoque penatibus et magnis dis parturient montes,
#>       nascetur ridiculus mus.
#>     </div>
#>   </div>
#> </div>

###  Shiny's panel with sidebar layout

container(
  columns(
    column(
      width = 4,
      card(
        title = "Sidebar",
        formGroup(
          label = "Control 1",
          selectInput("control1", "...")
        ),
        formGroup(
          label = "Control 2",
          selectInput("control2", "...")
        ),
        formGroup(
          label = "Control 3",
          selectInput("control3", "...")
        )
      )
    ),
    column(
      d4("Main panel")
    )
  )
)
#> <div class="container-fluid">
#>   <div class="row">
#>     <div class="col-4">
#>       <div class="card" title="Sidebar">
#>         <div class="card-body">
#>           <div class="form-group">
#>             <label>Control 1</label>
#>             <div class="yonder-select" id="control1">
#>               <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/>
#>               <div class="dropdown-menu">
#>                 <button class="dropdown-item active" value="...">...</button>
#>               </div>
#>               <div class="valid-feedback"></div>
#>               <div class="invalid-feedback"></div>
#>             </div>
#>           </div>
#>           <div class="form-group">
#>             <label>Control 2</label>
#>             <div class="yonder-select" id="control2">
#>               <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/>
#>               <div class="dropdown-menu">
#>                 <button class="dropdown-item active" value="...">...</button>
#>               </div>
#>               <div class="valid-feedback"></div>
#>               <div class="invalid-feedback"></div>
#>             </div>
#>           </div>
#>           <div class="form-group">
#>             <label>Control 3</label>
#>             <div class="yonder-select" id="control3">
#>               <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/>
#>               <div class="dropdown-menu">
#>                 <button class="dropdown-item active" value="...">...</button>
#>               </div>
#>               <div class="valid-feedback"></div>
#>               <div class="invalid-feedback"></div>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="col">
#>       <h1 class="display-4">Main panel</h1>
#>     </div>
#>   </div>
#> </div>

### Mobile friendly grids

# Use `column()`s [responsive] `width` argument to make mobile friendly
# applications.

container(
  columns(
    column(
      width = c(sm = 4),
      "Mauris ac felis vel velit tristique imperdiet."
    ),
    column(
      width = c(sm = 4),
      "Nam vestibulum accumsan nisl."
    ),
    column(
      width = c(sm = 4),
      "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus."
    )
  )
)
#> <div class="container-fluid">
#>   <div class="row">
#>     <div class="col-sm-4">Mauris ac felis vel velit tristique imperdiet.</div>
#>     <div class="col-sm-4">Nam vestibulum accumsan nisl.</div>
#>     <div class="col-sm-4">Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.</div>
#>   </div>
#> </div>

# or

container(
  columns(
    column(
      width = c(sm = 4),
      "Aenean in sem ac leo mollis blandit."
    ),
    column(
      width = c(sm = 8),
      "Nulla posuere. In id erat non orci commodo lobortis."
    )
  )
)
#> <div class="container-fluid">
#>   <div class="row">
#>     <div class="col-sm-4">Aenean in sem ac leo mollis blandit.</div>
#>     <div class="col-sm-8">Nulla posuere. In id erat non orci commodo lobortis.</div>
#>   </div>
#> </div>

### Fit columns to their content

container(
  columns(
    column(),
    column(
      width = "content",
      "Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit."
    ),
    column()
  )
)
#> <div class="container-fluid">
#>   <div class="row">
#>     <div class="col"></div>
#>     <div class="col-auto">Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit.</div>
#>     <div class="col"></div>
#>   </div>
#> </div>