How to make 3 column bootstrap dropdown to 4 column

I am using a 3 column drop down menu on the site here

I tried but this is how it shows

any help is much appreciated

Start by validating your code. You can only have li elements as direct children of an unordered list ul, but inside your uls at the top of each column you have an <h6> element. Bring that outside the <ul> element.

I know this probably won’t specifically fix the problem you are asking about, but it helps if you provide valid code.

I did as you asked and now h6 is not in pink color :frowning:

In your CSS, line 7179, you have

ul.multi-column-dropdown h6 {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ce555b;
	    padding: 0;

This says that the h6 inside the ul has a pink colour ( color: #ce555b; ), but that is not where your h6 is now that you moved it. So you have to add a new rule for that h6.

Try changing ul.multi-column-dropdown h6 to .dropdown-menu h6 in this rule.

now how do I go about making it 4 column?

I’m not that familiar with Bootstrap, but you have each column with a class of col-sm-4. Bootstrap sections are divided into 12 parts, so col-sm-4 is one-third of the 12 parts. Try labelling each column col-sm-3, so you will have 4 columns of 3 parts each. (Please let me know if my explanation is confusing :slight_smile: )

1 Like

OMG yes!!! it is working!!!wow! thanks

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.