How can I combine 2 CSS classes into one?

Question

I'm working with bootstrap, and trying to get the right classes on various elements for appropriate layout on various devices. It seems for many, I want something like control-label col-md-2. So I can go through a couple dozen elements, and change them all, but then - what if I realize I really want col-md-9? I then have to go through each element and change the classes! So what I'm trying to do is:

<label class="label-class"/>

with

.label-class {
   control-label col-md-9
}

Is this possible? Every answer I've found online about combining classes relates to a different type of question. Alternately, if I'm going about this all wrong, I'm willing to learn a better way to test various layouts :)

Edit: After some more searching, I found Can a CSS class inherit one or more other classes? - seems like maybe the answer is 'not without additional utilities' sadly.

Then one approach can be to store the class name in a variable in your controller and echo it in your view. Now if you need to change the class , change it in one place and you are done. In my view that's the easiest option. — Genocide_Hoax, Mar 12 '14 at 08:39

Federico J. · Accepted Answer · 2014-03-12T09:07:16.647

You can achieve it, but not with CSS. You could use LESS files, and with the proper medium to parse from LESS to CSS file (and "casually" Bootstrap core is written in LESS, ;D). The specification you're looking for is: http://lesscss.org/features/#mixins-parametric-feature

Bootstrap allows you download the LESS files of its code to modifications, and then, you may use a JS compiler as said in lesscss.org/usage/#using-less-in-the-browser

If you're using PHP, there are some libraries to compile it before send it to the browser, the latest is going well with Bootstrap 3.0 and that I'm using is: http://leafo.net/lessphp/

Hope this helps, XD

Kunj · Answer 2 · 2021-03-26T08:17:43.643

2

@Chococroc is right. Here are simple steps:

Step1: Write style.less

.label-class {
    .control-label;
    .col-md-9;
}

Step2: Add less.js

<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="script/less-1.3.3.min.js"></script>

Remember, js will call after including the less in page.

More information about less rules are available at: http://lesscss.org/

edited Mar 26 '21 at 08:17

answered Mar 12 '14 at 09:16

Kunj

1,980
2
22
34

score 2 · Answer 3 · answered May 01 '20 at 19:08

If you don't want to use .less and a compiler, you could use jQuery to add classes onready:

$(document).ready(function() {
  $('.label-class').addClass('control-label col-md-9');
})

You can make a whole set of these in an easy to edit function mixing up bootstrap classes(btn-1 & btn-2) add custom classes (btn-3) and even inline css (btn-4 - but don't overdo this one - it gets messy fast).

$(document).ready(function() {
  $('.btn-1').addClass('btn btn-danger btn-xl');
  $('.btn-2').addClass('btn btn-warning btn-xl');
  $('.btn-3').addClass('btn btn-success btn-sm custom-class-1 custom-class-2');
  $('.btn-4').addClass('btn btn-warning btn-xl').css('text-decoration','underline');

How can I combine 2 CSS classes into one?

3 Answers3