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?

your jQuery code could be simplified to $(".my_class").addClass("text-primary center-block") — Kashif
– Kashif, Commented Jul 21, 2015 at 23:58

sjm · Accepted Answer · 2015-07-21 23:55:09Z

9

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/

edited Jul 21, 2015 at 23:55

answered Jul 21, 2015 at 23:34

sjm

5,5181 gold badge29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trubliphone Over a year ago

This sounds very promising. I will look into it and get back to you.

Suat Atan PhD · Accepted Answer · 2022-05-19 00:51:56Z

5

You can do the following: but this is work with SCSS not with the standard CSS

.my_class
{
    @extend .text-primary; 
    @extend .center-block;
}

Hope it helps!

edited May 19, 2022 at 0:51

Suat Atan PhD

1,41219 silver badges29 bronze badges

answered Oct 16, 2019 at 20:39

Pontios

2,39429 silver badges36 bronze badges

Collectives™ on Stack Overflow

define a custom css class that uses bootstrap classes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related