Sorry, I have googled forever and I don't find the answer:
I have downloaded a css-file from Bootswatch and I have put it in my www directory where I have my app.R. Now I want to style my widgets to look like the different options presented at Bootswatch.
For example, to style an actionButton in the secondary button style, I put:
actionButton(
inputId = "action",
class = "btn-success")
How do I apply the more complicated styling source code? For example, for the selectInput widget the source code at Bootswatch is:
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-success">Success</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">Info</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-danger">Danger</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
This corresponds to four different styling options for selectInput. If I want to apply the success styling of the above code to a selectInput, where do I put it: As options to the relevant selectInput? In some header or tags for Shiny? Somewhere else?
I have already put the:
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "mytheme.css"))
In my R-script, but I don't know what to do next. Trying to read up on CSS now.
Edit: An example. My radio buttons right now look like:
I want them to look like:
