Can a Div Have Multiple Classes (Twitter Bootstrap)

Can a div have multiple classes (Twitter Bootstrap)

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>

How to apply two CSS classes to a single element

1) Use multiple classes inside the class attribute, separated by whitespace (ref):

<a class="c1 c2">aa</a>

2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

.c1.c2 {
}

What's the correct way to add multiple classes in Bootstrap 4?

I would say the first option looks like the best. You could create a custom class in your own styles.css file if you would like to create a shorter way of doing this.

The thing with using helper classes (like the kind that Bootstrap provides) is that they could potentially clutter your HTML but that happens a lot of the time and you shouldn't worry too much about it. The advantage is that you end up saving time by being able to quickly drop these in when you need them instead of having to rewrite CSS.

CSS multiple values in Class attribute

They are only different classes, that's all. In your example, that div will have the class navbar, which has specific styles for a default navigation bar, it also has the class navbar-collapse, which is used in bootstrap to tell an element that it has to collapse at an specific width, allowing it to look like a different collapsed dropdown menu. Bootstrap has a lot of these classes and for you to known them all I suggest you to take a closer look at the doc in the website which explains in more details each specific class.

Is having multiple classes in an element a good (or best) practice?

Did you got some of these classes and pieces of code from the Bootstrap website?

Sometimes classes need to be on separate nested divs, because they use :before and :after or margin, padding or positioning for that div. When you paste all classes inside one div, this may not work, and classes may overwrite eachother.

how to dynamically Add collapse class to multiple divs of same class using jquery

Something like this

$(function(){

  const $sections = $('.section-title')    for (let i = 0; i< $sections.length; i++){      const $section = $sections.eq(i)    const $sectionText = $section.next()        $section.text(`Section ${i}`)    $sectionText.text(`Section Text ${i}`)        const targetId = `section_${i}`    $sectionText.attr('id',targetId)    $sectionText.addClass('collapse')       $section.attr('data-toggle','collapse')    $section.attr('data-target',`#${targetId}`)
  }
})

.section-title{  font-weight:bold;  cursor:pointer;  padding:.5em;}
.section-text{   padding:.5em;   margin-bottom:1em;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="section-title"></div><div class="section-text"></div>
<div class="section-title"></div><div class="section-text"></div> 
<div class="section-title"></div><div class="section-text"></div> 

---

Related Topics