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 Shiny will also breed familiarity with many components of the Bootstrap framework, such as navigation bars, organizing content on a page using a bar with icons and a well panel, which is used to organize inputs and outputs.

Modals are another important component; they are popup information boxes that give alerts to your users.

As we move forward and continue to develop with Shiny, it's worth learning about its connections to the Bootstrap framework, so we can easily control content using HTML and CSS. As Shiny is based on the Bootstrap framework, Bootstrap will be inevitably pre-owned whenever Shiny is used.

Moving away from vanilla layout functions, such as a sidebar layout, can be done through Bootstrap. For example, the grid system is the layout of your applications that develop using fluidPage() and fixedPage().