Using a common CSS class for Bootstrap 3 settings

Question

This might have been asked before but I can't find anything that addresses my question or I'm not searching on the correct terms.

Is there a way to have a CSS class that I can set the specific Bootstrap settings and use that class over and over again.

EX: say I want to have a table with a border, striped, and hoover (<table class="table table-striped table-hover table-condensed table-bordered">). I would set this in a single class and then just call that class when I create a table tag. Then if I decide I don't want the hoover effect anymore I would just change that class and not all the tables throughout the site.

Cassie · Accepted Answer · 2015-12-11 19:57:17Z

3

David's answer is correct, but I also wanted to elaborate on another option:

You may want to consider picking up SASS or LESS. Bootstrap is originally written in LESS, and is compiled down to CSS (and SASS as well).

LESS and SASS allow you to do cool stuff, like extending classes. In SASS specifically, you could do this to get the effect you want:

.custom-table {
    @extend .table-striped;
    @extend .table-bordered;
    /* and so forth */
}

Then, you could use .custom-table on all of your tables. If you wanted to change the table later, you could amend the rule.

More about SASS here: http://sass-lang.com/guide

Edit: To clarify -- there isn't a good way to do this in regular CSS, unless you copy the Bootstrap rules by hand into a new class and then change that class when needed. This isn't a bad idea if you think you'll use the class a lot and don't want to pick up SASS/LESS, but isn't very DRY.

answered Dec 11, 2015 at 19:57

Cassie

4743 silver badges11 bronze badges

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

2 Comments

Caverman Over a year ago

Thanks. I see a SASS/LESS class in PluralSight. I'll try to watch it soon. I know it's the way things are going so I need to get up to speed on it.

Cassie Over a year ago

I can't recommend it enough. It's a huge pain to set up your projects to use it, but once you do coding is so much nicer.

davbuc · Accepted Answer · 2015-12-11 19:49:15Z

2

Just use a normal class and apply it to the table like:

<table class="my-class"></table>

and style it like this:

.my-class {
  border: 1px solid #000;
  etc...
}

This is just the basic CSS use - nothing to do with bootstrap if I get you right.

answered Dec 11, 2015 at 19:49

davbuc

5376 silver badges14 bronze badges

2 Comments

Caverman Over a year ago

Not specifically. I want to keep with bootstrap settings so the theme can be changed out pretty easily. I added a table tag for an example to my original post. Say I had that table tag on 10 tables and then decided I want to not have the hoover effect on them. I would like a central location (or class) that I would only change the setting once and not on all 10 tables.

davbuc Over a year ago

okay, so why not take a bootstrap class or element like table and extend it in your own css file, like .table-striped{border:1px..} and then in your css file use .table-striped:hover{cursor:pointer e.g} ?

Collectives™ on Stack Overflow

Using a common CSS class for Bootstrap 3 settings

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related