"Bootstrap Dropdowns - Material Design & Bootstrap 4"
Bootstrap 4.0.0 Snippet by MDBootstrap

Post to Facebook Tweet this

<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 ----------> <body class="hm-gradient"> <main> <!--MDB Dropdowns--> <div class="container mt-4"> <div class="text-center darken-grey-text mb-4"> <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1> <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a> </div> <div class="card mb-4"> <div class="card-body clearfix d-md-flex d-inline-block justify-content-center"> <!-- Primary dropdown --> <div class="btn-group mr-2 mb-md-0 mb-3"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Default dropdown --> <div class="btn-group mr-2 mb-md-0 mb-3"> <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Secondary dropdown --> <div class="btn-group mr-2 mb-md-0 mb-3"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- MDB color dropdown --> <div class="btn-group mb-md-0"> <button class="btn btn-mdb-color dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div> <div class="card mb-4"> <div class="card-body clearfix d-md-flex d-inline-block justify-content-center"> <!-- Danger dropdown --> <div class="btn-group mr-2 mb-md-0 mb-3"> <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Info dropdown --> <div class="btn-group mr-2 mb-md-0 mb-3"> <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Warning dropdown --> <div class="btn-group mr-2 mb-md-0 mb-3"> <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Success dropdown --> <div class="btn-group mb-md-0"> <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <!-- Grid row --> <div class="row mb-4"> <!-- Grid column --> <div class="col-md-12 clearfix d-md-flex d-inline-block justify-content-center"> <!-- Split button --> <div class="btn-group mr-2 pr-1 mb-md-0 mb-3"> <button type="button" class="btn btn-indigo">Split button</button> <button type="button" class="btn btn-indigo dropdown-toggle px-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group dropup mr-1 mb-md-0 mb-3"> <button type="button" class="btn btn-pink">Dropup</button> <button type="button" class="btn btn-pink dropdown-toggle px-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <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 class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12 clearfix d-md-flex d-inline-block justify-content-center"> <div class="dropdown mb-md-0 mb-3"> <button class="btn btn-light-blue dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Right aligned </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2"> <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 class="dropdown mb-md-0 mb-3"> <button class="btn btn-purple dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu header </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu3"> <h6 class="dropdown-header">Dropdown header</h6> <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 class="dropdown mb-md-0"> <button class="btn btn-deep-orange dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Disabled item </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu5"> <a class="dropdown-item" href="#">Regular link</a> <a class="dropdown-item disabled" href="#">Disabled link</a> <a class="dropdown-item" href="#">Another link</a> </div> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> </div> <hr class="my-4"> <div class="text-center darken-grey-text mb-4"> <h3 class="font-bold mb-3">Here you can find more Dropdowns:</h3> <a class="btn btn-danger" href="https://test.mdbootstrap.com/components/dropdowns/" target="_blank">Bootstrap Dropdowns</a> </div> </div> <!--MDB Dropdowns--> <!-- MDB core JavaScript --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script> </main> </body>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css); .hm-gradient { background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); } .darken-grey-text { color: #2E2E2E; } .navbar .dropdown-menu a:hover { color: #616161 !important; } .darken-grey-text { color: #2E2E2E; }

Related: See More

Paper Kit 2
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form

Questions / Comments: