Bootstrap Snippet BS4 btn-group Btn-block Dropdown Mega Menus using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(document).ready(function(){
  $('.mega-dropdown-menu').on("click", function(e){
    e.stopPropagation();
    //e.preventDefault();
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"BS4 btn-group Btn-block Dropdown Mega Menus"
Bootstrap 4.0.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"BS4 btn-group Btn-block Dropdown Mega Menus" Bootstrap 4.0.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"BS4 btn-group Btn-block Dropdown Mega Menus"
Bootstrap 4.0.0 Snippet by blayderunner123