Layout a sidebar and main area

sidebarLayout(sidebarPanel, mainPanel, position = c("left", "right"),
  fluid = TRUE)


sidebarPanel The sidebarPanel containing input controls
mainPanel The mainPanel containing outputs
position The position of the sidebar relative to the main area ("left" or "right")
fluid TRUE to use fluid layout; FALSE to use fixed layout.


Create a layout with a sidebar and main area. The sidebar is displayed with a distinct background color and typically contains input controls. The main area occupies 2/3 of the horizontal width and typically contains outputs.


# Define UI shinyUI(fluidPage( # Application title titlePanel("Hello Shiny!"), sidebarLayout( # Sidebar with a slider input sidebarPanel( sliderInput("obs", "Number of observations:", min = 0, max = 1000, value = 500) ), # Show a plot of the generated distribution mainPanel( plotOutput("distPlot") ) ) ))
<div class="container-fluid"> <h2>Hello Shiny!</h2> <div class="row"> <div class="col-sm-4"> <form class="well"> <div class="form-group shiny-input-container"> <label class="control-label" for="obs">Number of observations:</label> <input class="js-range-slider" id="obs" data-min="0" data-max="1000" data-from="500" data-step="1" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="0.1" data-drag-interval="true" data-data-type="number"/> </div> </form> </div> <div class="col-sm-8"> <div id="distPlot" class="shiny-plot-output" style="width: 100% ; height: 400px"></div> </div> </div> </div>