Make Button use Bootstrap 5 CSS

Radzen.Blazor Components
1

Trying to get the buttons to follow the bootstrap color scheme for now but will probably need other attributes as well. I took the sample for buttons and copied it directly and the colors are not the same. This is important to maintain consistency throughout the website. The primary being orange and others being completely different can confuse the users.

I read a separate post on changing by CSS but the suggestions in there did not work for me. I tried both the default and default-base CSS. Neither changed the color. I do not want to create a CSS file or inline style with !important since it will be extensive and may not cover all of the Bootstrap button styling. Also violates DRY since it is already in the Bootstrap CSS files repeating the code does not make sense.

Code being used:
Head of _Layout.cshtml (tried both of the CSS's swapping commented code below)

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
@*<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">*@
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">

Bottom of Body
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

Code in index.cshtml (excluding unrelated code)

<div class="row">
<RadzenButton Click=@(args => OnClick("Default button")) Text="Default" />
<RadzenButton Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
<RadzenButton Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
<RadzenButton Click=@(args => OnClick("Light button")) Text="Light" ButtonStyle="ButtonStyle.Light" />
<RadzenButton Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
<RadzenButton Click=@(args => OnClick("Success button ")) Text="Success" ButtonStyle="ButtonStyle.Success" />
<RadzenButton Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
<RadzenButton Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
</div>

Is there anything that can be done to get the colors to have the Bootstrap look without rewriting the bootstrap styles with !important settings?
Thank you,

2

To get the Bootstrap look without using !important you can either edit the color variables in the provided SCSS theme files and compile them into CSS or use Radzen's Theme Editor (a paid feature) to generate a new theme. See this thread for more details -> Easiest way to create and maintain a custom theme.

1 Like