In this section, we will learn about Bootstrap and its framework as well as its usage and the concepts that it brings to web design in the Shiny applications. We will also see how to add a theme to a Bootstrap setup.

Bootstrap is an open source toolkit that makes use of HTML, CSS, and JavaScript. It is of particular interest to web developers because it enables them to make responsive websites that can seamlessly scale up or down depending on the screen it's viewed on, including PC monitors, tablets, and even mobile phones.

Shiny was built on Bootstrap version 3. However, Bootstrap version 4 is available with minor changes. The main content that attracts Shiny developers about Bootstrap is the grid system.

The grid system is a way of organizing content in a sample format, and is initially done by organizing rows and then by columns. Familiarity with...

There are many free and open source themes available online if you do not want to use the default theme of Bootstrap.

Using them is as simple as putting the theme inside a www folder, which is at the same level as your application, and providing the filename. For example, sandstone.css as the theme argument to fluidPage, fixedPage, bootstrapPage, or navbarPage.

As we already know, Shiny uses the grid system from Bootstrap to lay out content. There are a couple of ways to carry this out, but built-in Shiny functions are always involved. The differences between the functions are minor and the basic idea of each is the same.

This section will cover the server installation steps of the following functions:

• fluidPage()
• bootstrapPage()
• fixedPage()

The most standard way of using the grid layout within Shiny is to use the fluidPage() function. The following code snippet illustrates the fluidPage() function:

server = function(input, output){    
 
# server code
}
ui = fluidPage(
 
 fluidRow(
  column(2, wellPanel(p("Column width 2")))...

Shiny allows you to layout your application using navbars and navlists. These are layouts that come from the Bootstrap framework. However, navlist has disappeared as a named class in Bootstrap 3.

From the following screenshot, in the first tab (Budgets over time), we have the year, title, and genre controls, as well as the graph underneath containing content from the Movies explorer application:

On the next tab (Movie picker), we have a table with the movie selector combo box. The navbar layout gives you buttons along the top, which allows you to select different tab panels, as shown in the following screenshot:

In this section, we will look at all of the layout functions to give an overview of what is available. We will review applications with each of the layouts with the same content to give an idea of how they all compare.

The following screenshot illustrates the flowlayout function of the setup. Elements are ordered left to right and top to bottom, as seen in the following screenshot:

Resizing the application window causes the elements to reorder themselves so that they fit left to right and top to bottom.

The...

Shiny provides a lots of ways to make the user experience as simple and easy as possible. By controlling what the user sees, taking control of the user's inputs, and giving the user feedback about what the application is doing and why, it is possible to make the experience easy to follow for everyone.

So, in this section, we will look at the following topics:

• Using the conditional UI function
• Controlling the user interface with observe()
• Using modals to give messages to the user

The first thing to note here is that the movie selector does not show on the graph screen, as shown in the following screenshot:

It is often useful in a large application to show the user only those controls that can currently be used. This prevents your UI from being cluttered and helps show how the application works.

As you can see...

In this chapter, we looked at the Bootstrap framework and how Shiny makes use of it, and how to build an application layout using rows and columns. We explored the navigation bar, navigation list—based layouts, and also looked at an overview of all of the layout functions. Lastly, we looked at using conditional UI elements and how to control the UI.

In the next chapter, we will be taking a look at dashboards and how to put together our very first dashboard.