<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>Material Design for Bootstrap</title> <!-- MDB icon --> <link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" /> <!-- Google Fonts Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <!-- MDB --> <link rel="stylesheet" href="../../css/mdb.min.css" /> <!-- PRISM --> <link rel="stylesheet" href="../../dev/css/new-prism.css" /> <!-- Custom styles --> <style></style> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- Container wrapper --> <div class="container-fluid"> <!-- Navbar brand --> <a class="navbar-brand" href="#">Brand</a> <!-- Toggle button --> <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <!-- Collapsible wrapper --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left links --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <!-- Navbar dropdown --> <li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false" > Dropdown </a> <!-- Dropdown menu --> <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown"> <div class="container"> <div class="row w-100 my-4 pt-3"> <div class="col-md-4"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate mollitia nam magnam, perspiciatis rem ea facilis ipsam vel consequuntur nobis deserunt fugiat vitae dignissimos dolorum enim ducimus voluptate dolor! Laborum? </p> </div> <div class="col-md-4"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate mollitia nam magnam, perspiciatis rem ea facilis ipsam vel consequuntur nobis deserunt fugiat vitae dignissimos dolorum enim ducimus voluptate dolor! Laborum? </p> </div> <div class="col-md-4"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate mollitia nam magnam, perspiciatis rem ea facilis ipsam vel consequuntur nobis deserunt fugiat vitae dignissimos dolorum enim ducimus voluptate dolor! Laborum? </p> </div> </div> </div> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <!-- Left links --> <!-- Search form --> <form class="d-flex input-group w-auto"> <input type="search" class="form-control" placeholder="Type query" aria-label="Search" /> <button class="btn btn-outline-primary" type="button" data-ripple-color="dark"> Search </button> </form> </div> <!-- Collapsible wrapper --> </div> <!-- Container wrapper --> </nav> <div class="container my-5"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-mdb-toggle="dropdown" aria-expanded="false" > Megamenu button </button> <ul class="dropdown-menu animated fade-in" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div> <!-- MDB --> <script type="text/javascript" src="../../js/mdb.min.js"></script> <!-- PRISM --> <script type="text/javascript" src="../../dev/js/new-prism.js"></script> <!-- MDB SNIPPET --> <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script> <!-- Custom scripts --> <script type="text/javascript"></script> </body> </html>