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.
To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.
An element is usually only assigned one class. The corresponding CSS for that particular class defines the appearance properties for that class. However, we can also assign multiple classes to the same element in CSS.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With