define a custom css class that uses bootstrap classes

Question

All,

Is there any way to define a custom CSS class that uses existing bootstrap classes?

For example, consider the following HTML snippet:

<div class="text-primary center-block">Here is some text</div>

Bootstrap will automatically make it blue and centered and displayed block. But adding all of those classes is a lot to remember. Can I just use my own class:

<div class="my_class">Here is some text</div>

And somehow in a CSS file add those Bootstrap properties?

The only solution I can think of is using JQuery like this:

$(document).ready(
  function() {
    $(".my_class").each(function() {
      $(this).addClass("text-primary center-block");      
    });
  }
);

But is there a better solution?

Answer 1

Hi yes there is a better way, if you are using the Less Source version of Bootstrap you can setup Bootstrap's Classes as Less Mixins by importing the Less files as a Reference

Which would mean you could setup something like this:

 .custom-class { .text-primary; center-block; }

This post discusses the technique in detail:

http://transmission.vehikl.com/using-bootstrap-as-a-semantic-mixin-library/