Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 428
FluxEngine Avatar asked Feb 14 '13 21:02

FluxEngine


People also ask

How do I put multiple classes in one div?

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.

Can div add two classes?

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.

Can an element have multiple classes?

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

Can an element have multiple CSS classes?

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.


1 Answers

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> 
like image 200
DarkAjax Avatar answered Sep 22 '22 22:09

DarkAjax