CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Caverman
Caverman

Reputation: 3707

Using a common CSS class for Bootstrap 3 settings

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.

Upvotes: 1

Views: 119

Answers (2)

Cassie
Cassie

Reputation: 474

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.

Upvotes: 3

davbuc
davbuc

Reputation: 537

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.

Upvotes: 2

Related Questions