Bootstrap 4 :root color displays invalid property value

Question

I tried to use bootstrap 4 :Root color property but i get error invalid property value

i also checked for bootstrap documentation and found nothing.

can someone help me how do i use bootstrap 4 :root property

check below snippet i tried to achieve but failed.

also not i get error in netbeans

thanks in advance

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

.frm-input:focus {
  border-color: --yellow;
}

<div class="frm-row">
  <input class="frm-input" type="text" name="email" placeholder="Email address">
</div>

Netbeans doesn't seem to support CSS variables. https://stackoverflow.com/questions/49225680/netbeans-show-css-variables-as-error — Carol Skelly, Aug 25 '18 at 15:00

Carol Skelly · Answer 1 · 2021-07-12T17:31:24.113

1

These are CSS variables. Reference them with var(--..). In your case it would be:

.frm-input:focus {
  border-color: var(--yellow);
}

Demo: https://codeply.com/go/I2WpYQe8oG

Also note: Netbeans doesn't currently support CSS variables. Netbeans show css variables as error

Related: CSS use color from another class?

edited Jul 12 '21 at 17:31

answered Aug 25 '18 at 14:47

Carol Skelly

351,302
90
710
624

Dajer · Accepted Answer · 2018-08-25T15:00:30.680

0

You have a mistake in your syntax. Try this:

.frm-input:focus {
  border-color: var(--yellow);
}

Also, the :root selector (or pseudo-class) does not come with bootstrap 4, it is a CSS built in feature. You can read more about it in this documentation. In brief, it refers to the document's root element. All in all, you are defining CSS variables for the document's root element, which has nothing to do with bootstrap.

Furthermore, Netbeans have not implemented the support for CSS variables yet, here.

edited Aug 25 '18 at 15:00

answered Aug 25 '18 at 14:46

Dajer

108
8

great it works but why do i get error in netbeans. please check my image addin in question. – Aug 25 '18 at 14:52
1

Unfortunately I haven't used netbeans yet. As far as I know, some IDEs just don't support CSS variables. – Dajer Aug 25 '18 at 14:56

Bootstrap 4 :root color displays invalid property value

2 Answers2