navbarPage Column layout issue when using bslib::bs_theme(version = 4)

[chalg]

When I use Bootstrap 4 (theme = bslib::bs_theme(version = 4, bootswatch = "minty"), under ui), the column configuration does not display correctly, as per Bootstrap 3. Instead of the width 8 column being displayed out to the right, it is displayed underneath, which doesn't look good.

Is there a way to get version 4 to display as expected, or is navbarPage()or something I'm doing, not compatible with version 4? I have tried Googling this issue, but haven't seen anyone come across this issue. The layout issue is not apparent when using fluidPage() & fluidRow() combination - I haven't tried fluidPage() & sidebarLayout() but expect that would also be ok

Note: I'm using navbarPage() because I have multiple pages with different sidebar input settings. The code below is just to reproduce the issue.

# LIBRARIES ----
library(shiny)
library(bslib)



ui <- navbarPage(
    title = "Test App",
    theme = bslib::bs_theme(version = 4, bootswatch = "minty"),          # layout issue
    # theme = bslib::bs_theme(version = 3, bootswatch = "cerulean"),     # no layout issue
    
    tabPanel(
        title = "1st Tab Panel",
        
        # fluidRow(
        #     title = "Generation & Consumption",
            
            div(
                class = "container",
                id = "header",
                h1(class = "page-header", "Test App", tags$small("by Grant Chalmers"))
            ),
            
            column(4,
                   
                   wellPanel(
                       div(
                           id = "input_main",
                           
                           sliderInput("obs", "Number of observations:",
                                       min = 1, max = 1000, value = 500)
                           
                       ) 
                   ) 
                   
                   
            ),
            
            
            column(8,
                   
                   tabsetPanel(
                       id = "gen_cons_tabset",
                       type = "tabs",
                       selected = "generation_tab", #Generation
                       # Plot Generation
                       tabPanel(title = "Test 1", 
                                value = "generation_tab",
                                plotOutput("distPlot")),
                       
                       # Plot Consumption
                       tabPanel(title = "Test 2",
                                value = "test2_tab",
                                uiOutput(outputId = "test_plot"))
                   )
                   
                   
            )
        #)
    ),
    
    # Generation & Consumption Percentages Tab Panel
    tabPanel(
        title = "2nd Tab Panel"
        
    )
    
)

# SERVER
server <- function(input, output) {
    # bs_themer()
    output$distPlot <- renderPlot({
        hist(rnorm(input$obs))
    })
}

shinyApp(ui = ui, server = server)

[cpsievert]

You need to wrap the column()s in a fluidRow().

Technically speaking, Bootstrap columns should always have been wrapped in a row container, but for some reason, columns "just worked" in Bootstrap 3 without a row container, but that's no longer the case with Bootstrap 4 and above.