Can a div have multiple classes (Twitter Bootstrap)

HtmlCssTwitter Bootstrap

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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 - Html

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 - Html

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 - Html

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 - Html

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>

Solution 6 - Html

Yes, div can take as many classes as you need. Use space to separate one from another.

 <div class="active dropdown-toggle custom-class">Example of multiple classses</div>

Solution 7 - Html

A div can can hold more than one classes either using bootstrap or not

<div class="active dropdown-toggle my-class">Multiple Classes</div>
For applying multiple classes just separate the classes by space.

Take a look at this links you will find many examples
http://getbootstrap.com/css/
http://css-tricks.com/un-bloat-css-by-using-multiple-classes/

Solution 8 - Html

You can have multiple css class selectors:

For e.g.:

<div class="col-md-4 a-class-name">
</div>

but only a single id:

<div id = "btn1 btn">  <!-- this is wrong -->
</div>

Solution 9 - Html

space is used to make multiple classes:

<div class="One Two Three">

</div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFluxEngineView Question on Stackoverflow
Solution 1 - HtmlDarkAjaxView Answer on Stackoverflow
Solution 2 - HtmlOliverPView Answer on Stackoverflow
Solution 3 - HtmlEkinView Answer on Stackoverflow
Solution 4 - HtmlEric GoncalvesView Answer on Stackoverflow
Solution 5 - HtmlsellmeadogView Answer on Stackoverflow
Solution 6 - HtmlRavi VarmaView Answer on Stackoverflow
Solution 7 - HtmlRezaulView Answer on Stackoverflow
Solution 8 - HtmlHuzaifa SaifuddinView Answer on Stackoverflow
Solution 9 - HtmlforView Answer on Stackoverflow