Bootstrap CSS classes wildcard

Question

I want to target all of the columns inside a Bootstrap container so I can give then a similar style. For example:

<div class="container unique">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>
</div>

I can target this with CSS:

.unique .col-md-3{...}

but what I want to do is when I have many different col-* elements, to target them all together.

I tried this:

.unique .col-*{...}

but it didn't work. Can I do this with CSS?

.unique [class^="col-"] This one worked for me. – Vel Murugan S Jul 07 '18 at 11:46 — Vel Murugan S, Jul 07 '18 at 11:46
[class*="col-"] { border-color: red;} – dev Feb 08 '22 at 10:03 — dev, Feb 08 '22 at 10:03

score 60 · Accepted Answer · edited Jun 05 '19 at 19:45

60

Pedro, what you're looking for is called attribute selector. In your particular case, you can use it like this:

.unique [class~=col] {color:red }

but you could also use this with more wide options like

[class*='col-']

to cover preceding white spaces.

Also, here you have the same documentation in Spanish

edited Jun 05 '19 at 19:45

Haifeng Zhang

27,283
17
68
115

answered Sep 20 '14 at 23:22

Devin

7,573
6
37
53

thank you Fabio for your help! :) – Sep 21 '14 at 00:13
3

The first selector won't match the columns, the second one may or may not. http://jsbin.com/rajaw/1/edit – Hashem Qolami Sep 21 '14 at 06:01
6

According to the linked documentation, the 100% correct form that matches the pattern in question is `.unique [class^=col-] {color: red}` – Attila Fulop Apr 04 '16 at 12:22
Keep in mind, you select all classes which begin with col-. That includes col-md-offset-... – aProgger Jan 22 '17 at 12:58

score 19 · Answer 2 · answered Sep 20 '14 at 23:18

19

The CSS attribute contains selector can be used to achieve this:

.unique [class*=col]{...}

MDN is a useful reference site for CSS selectors. For reference, the attribute selectors are found here.

answered Sep 20 '14 at 23:18

Rich O'Kelly

40,274
9
81
111

thank you Rich for your help! :) – Sep 21 '14 at 00:12

Bootstrap CSS classes wildcard

2 Answers2