Change the Colour of Bootstrap 5 Button Border

Wappler General Need Help
1

Hello

I want to change the colour of the border of a button. I am using Bootstrap 5 Slate theme. In the Design panel the borders options are unclickable

Thanks

2

This means the styles you are trying to change are overridden by the bootstrap theme css.
Either your custom CSS file is included before the bootstrap theme CSS file in the page head, or the rule you are trying to style is less specific than the definition in the bootstrap css.

3

image
image420×778 24.1 KB

My page on which the button is as follows :

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="bootstrap/5/slate/bootstrap.min.css" />
    <link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css" />
    <script src="dmxAppConnect/dmxValidator/dmxValidator.js"></script>
<script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js"></script>
</head>

Please can you help me change the border colour

4

Your
<link rel="stylesheet" href="css/style.css" />
include should be after
<link rel="stylesheet" href="bootstrap/5/slate/bootstrap.min.css" />

1 Like
5

This worked , thank you!