How To Customize The Bootstrap Navbar Dropdown Column (Bootstrap 3.)

Hi ,In here I will share how to edit navbar dropdown in the bootstrap . The results are as shown above.

Style

@media screen and (max-width: 767px){
    .dd{
        height: 200px;
        overflow:scroll;
    }
}

@media screen and (min-width: 768px){
    .dd{
        -moz-column-count:3; /* Firefox */
        -webkit-column-count:3; /* Safari and Chrome */
        column-count:3;
        width: 500px;
    }
}
@media screen and (min-width: 992px){
    .dd{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        column-count:4;
        width: 500px;
    }

Next, add class 'dd' in 'dropdown-menu' class.
html nav :

  

    

      Brand
    

    
Link (current)
Link


Dropdown 

Action
Another action
Something else here
Separated link
           

        
      
Link

  

Done ! , thank you.