<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.js" integrity="sha256-crfkMD0BL2TtiwpbIlXF/SVmGSvOtgbMM8GBkibVKyc=" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row"> <div class="btn-group btn-lg btn-block"> <div class="btn-group col-xs-12 mega-dropdown"> <button type="button" class="btn btn-secondary btn-lg btn-block">Split-dropdown Button</button> <button class="btn btn-primary btn-lg dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button> <div class="dropdown-menu dropdown-menu-right mega-dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="col-md-6"> <div class="dropdown-header">BS4 Progress bars</div> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="col-md-6"> <div class="dropdown-header">BS4 Standard Links</div> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <div class="btn-group col-xs-12 mega-dropdown"> <button type="button" class="btn btn-secondary btn-lg btn-block">Mega-menu</button> <button class="btn btn-warning btn-lg dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button> <div class="dropdown-menu dropdown-menu-right mega-dropdown-menu" aria-labelledby="dropdownMenuButton2"> <div class="col-xs-12 col-lg-4"> <div class="dropdown-header">BS4 Standard List-group</div> <div class="list-group"> <a href="#" class="list-group-item active">Cras justo odio</a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> </div> </div> <div class="col-xs-12 col-lg-4"> <div class="dropdown-header">BS4 Carousel</div> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide" /> </div> <div class="carousel-item"> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide" /> </div> <div class="carousel-item"> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide" /> </div> </div> </div> </div> <div class="col-xs-12 col-lg-4"> <div class="card-group"> <div class="card"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap" /> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap" /> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> </div> <div class="btn-group col-xs-12 mega-dropdown"> <button type="button" class="btn btn-secondary btn-lg btn-block">Jumbotron</button> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button> <div class="dropdown-menu dropdown-menu-right mega-dropdown-menu" aria-labelledby="dropdownMenuButton3"> <div class="jumbotron"> <h1 class="display-3">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> </div> </div> </div> <h1>View in Fullscreen</h1> </div> </div>

body{ overflow-x:hidden; } .mega-dropdown > .btn:first-child, .mega-dropdown > .btn:last-child:not(:first-child), .mega-dropdown > .dropdown-toggle:not(:first-child){ border-radius:0px!important; } .mega-dropdown { position: static !important; width: 100%; padding-right: 0px; padding-left: 0px; } .mega-dropdown-menu{ min-width: 100%; padding: 20px 0; width: 100%; box-shadow: none; -webkit-box-shadow: none; margin: 1.5% 0 0; height:100%; min-height:43rem; } .mega-dropdown-menu:not(:first-child){ margin: 5% 0 0; } .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } @media (min-width: 768px) { .mega-dropdown-menu{ margin: 4% 0 0; } .mega-dropdown-menu:not(:first-child){ margin: 4% 0 0; } } @media (min-width: 992px) { .mega-dropdown-menu{ margin: 3.5% 0 0; } .mega-dropdown-menu:not(:first-child){ margin: 3.5% 0 0; } } .mega-dropdown-menu > [class*="col-"]{ float:left; } .mega-dropdown-menu .dropdown-header{ color: #428bca; font-size: 36px; font-weight: bold; padding-left: 0px !important; } .mega-dropdown-menu > .dropdown-item{ display: block; padding: 3px 20px; clear: both; width:auto; }

$(document).ready(function(){ $('.mega-dropdown-menu').on("click", function(e){ e.stopPropagation(); //e.preventDefault(); }); });