Can a div have multiple classes (Twitter Bootstrap) [duplicate]

Can a div tag have two classes?

I am using twitter bootstrap, and there are two predefined classes that I would like to use.

One is an active class that I would like to use on a dropdown-toggle within a nav bar.

What is the best way of approaching this in the html, with out overriding the css.

Solution 1:

Sure, a div can have as many classes as you want (this is both regarding to bootstrap and HTML in general):

<div class="active dropdown-toggle"></div>

Just separate the classes by space.

Also: Keep in mind some bootstrap classes are supposed to be used for the same stuff but in different cases (for example alignment classes, you might want something aligned left, right or center, but it has to be only one of them) and you shouldn't use them together, or you'd get an unexpected result, basically what will happen is that the class with the highest specificity will be the one applied (or if they have the same then it'll be the one that's defined last on the CSS). So you better avoid doing stuff like this:

<p class="text-center text-left">Some text</p>

Solution 2:

Absolutely, divs can have more than one class and with some Bootstrap components you'll often need to have multiple classes for them to function as you want them to. Applying multiple classes of course is possible outside of bootstrap as well. All you have to do is separate each class with a space.

Example below:

<label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>

Solution 3:

You can add as many classes to an element, but you can add only one id per element.

<div id="unique" class="class1 class2 class3 class4"></div>

Solution 4:

separate the classes with a space.

<button class="btn btn-success dropdown-toggle active" data-toggle="dropdown">Success <span class="caret"></span></button>

demo: http://jsfiddle.net/wNfcg/

Solution 5:

I'm not sure if you're asking specifically about bootstrap, i.e., whether or not those two classes can be used together or if you're just asking in general?

You can apply as many classes to an element as you want, just separate class names with a space

<div class="active dropdown-toggle"></div>