locked
Show Bootstrp Menu Full Page RRS feed

  • Question

  • User2033107836 posted

    Hello

    I used this below complete code for menu

    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .dropdown-menu {
                min-width: 200px;
            }
    
                .dropdown-menu.columns-2 {
                    min-width: 400px;
                }
    
                .dropdown-menu.columns-3 {
                    min-width: 600px;
                }
    
                .dropdown-menu li a {
                    padding: 5px 15px;
                    font-weight: 300;
                }
    
            .multi-column-dropdown {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
    
                .multi-column-dropdown li a {
                    display: block;
                    clear: both;
                    line-height: 1.428571429;
                    color: #333;
                    white-space: normal;
                }
    
                    .multi-column-dropdown li a:hover {
                        text-decoration: none;
                        color: #262626;
                        background-color: #999;
                    }
    
            @media (max-width: 767px) {
                .dropdown-menu.multi-column {
                    min-width: 240px !important;
                    overflow-x: hidden;
                }
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Example</a>
                </div>
                <!--/.navbar-header-->
    
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                       
                       
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
                            <ul class="dropdown-menu multi-column columns-3">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-2">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-3">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-2">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-2">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </ul>
                        </li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
                <!--/.navbar-collapse-->
            </nav>
            <!--/.navbar-->
        </form>
    </body>

    It shows like this 

    but if i click three column it should show like this because in my real time i have long menu

    How to do to show like this above 

    Thursday, April 12, 2018 8:58 AM

Answers

  • User-369506445 posted

    also if you don't like use full width you can remove below line :

      width: 100%;

    namely your head tag be below like :

    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .nav > li.dropdown.open {
                ;
            }
    
                .nav > li.dropdown.open .dropdown-menu {
                    display: table;
                    /*width: 100%;*/
                    text-align: center;
                    left: 0;
                    right: 0;
                }
    
            .dropdown-menu > li {
                display: table-cell;
            }
    
    
    
            .multi-column-dropdown {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
    
                .multi-column-dropdown li a {
                    display: block;
                    clear: both;
                    line-height: 1.428571429;
                    color: #333;
                    white-space: normal;
                }
        </style>
    </head>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 12, 2018 4:04 PM

All replies

  • User516094431 posted

    Use below line of code. You will get you required output.

    <style type="text/css">
            .dropdown-menu {
                min-width: 200px;
            }
    
                .dropdown-menu.columns-2 {
                    min-width: 400px;
                }
    
                .dropdown-menu.columns-3 {
                    min-width: 600px;
                }
    
                .dropdown-menu li a {
                    padding: 5px 15px;
                    font-weight: 300;
                }
    
            .multi-column-dropdown {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
    
                .multi-column-dropdown li a {
                    display: block;
                    clear: both;
                    line-height: 1.428571429;
                    color: #333;
                    white-space: normal;
                }
    
                    .multi-column-dropdown li a:hover {
                        text-decoration: none;
                        color: #262626;
                        background-color: #999;
                    }
              .navbar-nav > li > .dropdown-menu {
                  margin-left: -100px !important;
              }
    
            @media (max-width: 767px) {
                .dropdown-menu.multi-column {
                    min-width: 240px !important;
                    overflow-x: hidden;
                }
            }
    </style>
    <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Example</a>
            </div>
            <!--/.navbar-header-->
    
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
    
    
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
            <!--/.navbar-collapse-->
        </nav>
        <!--/.navbar-->

    Thursday, April 12, 2018 10:36 AM
  • User2033107836 posted

    Hello

    Here Is My Code

     <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Example</a>
            </div>
           
    
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
    
    
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">First Menu <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    
                     <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Second Menu <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    
                    
                     <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Third Menu <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
           
        </nav>

    The First Menu Showing Perfect

    For Second Menu & Third Menu I want to be same like First Menu Full View Show

    How To Do

    Thursday, April 12, 2018 11:13 AM
  • User516094431 posted

    Use below line of code. 

    <style type="text/css">
            .dropdown-menu {
                min-width: 200px;
            }
    
                .dropdown-menu.columns-2 {
                    min-width: 400px;
                }
    
                .dropdown-menu.columns-3 {
                    min-width: 600px;
                }
    
                .dropdown-menu li a {
                    padding: 5px 15px;
                    font-weight: 300;
                }
    
            .multi-column-dropdown {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
    
                .multi-column-dropdown li a {
                    display: block;
                    clear: both;
                    line-height: 1.428571429;
                    color: #333;
                    white-space: normal;
                }
    
                    .multi-column-dropdown li a:hover {
                        text-decoration: none;
                        color: #262626;
                        background-color: #999;
                    }
                    @media (max-width: 767px) {
                .dropdown-menu.multi-column {
                    min-width: 240px !important;
                    overflow-x: hidden;
                }
            }
        @media (min-width: 1000px) and (max-width: 1280px)
        {
            .m-l-m-100 {
                margin-left: -100px !important;
            }
            .m-l-m-200 {
                margin-left : -210px !important;
            }
            .m-l-m-300 {
                margin-left: -340px !important;
            }
            .m-l-m-400 {
                margin-left: -450px !important;
            }
        }
    </style>
    
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Example</a>
        </div>
    
    
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
    
    
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">First Menu <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-column columns-3 m-l-m-100">
                        <div class="row">
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                        </div>
                    </ul>
                </li>
    
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Second Menu <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-column columns-3 m-l-m-200">
                        <div class="row">
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                        </div>
                    </ul>
                </li>
    
    
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Third Menu <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-column columns-3 m-l-m-300">
                        <div class="row">
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                            <div class="col-sm-2">
                                <ul class="multi-column-dropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </div>
                        </div>
                    </ul>
                </li>
    
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    
    </nav>
    

    Thursday, April 12, 2018 11:34 AM
  • User-369506445 posted

    hi

    you can fix full width and it's better than below like :

    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .nav > li.dropdown.open {
                ;
            }
    
                .nav > li.dropdown.open .dropdown-menu {
                    display: table;
                    width: 100%;
                    text-align: center;
                    left: 0;
                    right: 0;
                }
    
            .dropdown-menu > li {
                display: table-cell;
            }
    
    
    
            .multi-column-dropdown {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
    
                .multi-column-dropdown li a {
                    display: block;
                    clear: both;
                    line-height: 1.428571429;
                    color: #333;
                    white-space: normal;
                }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="navbar navbar-default">
    
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">First Menu <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Second Menu<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action1</a></li>
                                        <li><a href="#">Another action1</a></li>
                                        <li><a href="#">Something else here1</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link1</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link1</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action2</a></li>
                                        <li><a href="#">Another action2</a></li>
                                        <li><a href="#">Something else here2</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link2</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link2</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action3</a></li>
                                        <li><a href="#">Another action3</a></li>
                                        <li><a href="#">Something else here3</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link3</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link3</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action4</a></li>
                                        <li><a href="#">Another action4</a></li>
                                        <li><a href="#">Something else here4</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link4</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link4</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-2">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.navbar-->
        </form>
    </body>

    Thursday, April 12, 2018 4:01 PM
  • User-369506445 posted

    also if you don't like use full width you can remove below line :

      width: 100%;

    namely your head tag be below like :

    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .nav > li.dropdown.open {
                ;
            }
    
                .nav > li.dropdown.open .dropdown-menu {
                    display: table;
                    /*width: 100%;*/
                    text-align: center;
                    left: 0;
                    right: 0;
                }
    
            .dropdown-menu > li {
                display: table-cell;
            }
    
    
    
            .multi-column-dropdown {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
    
                .multi-column-dropdown li a {
                    display: block;
                    clear: both;
                    line-height: 1.428571429;
                    color: #333;
                    white-space: normal;
                }
        </style>
    </head>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 12, 2018 4:04 PM