Align Bootstrap 4 dropdown exactly to the width of the button - html

Question

i had tried a lot not get a solution for this can u please help with this..actually im setting it by giving by minimum width to the dropdown menu but when in case of responsive and when menu item contains big words the menu items are expanding to out of the box.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar-two" class="navbar-nav navbar-toggleable-md mb-4">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-two-list mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">You & Peers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Family</a>
</li>
</ul>
<div class="mt-2 mt-md-0">
<ul class="nav">
<li class="nav-item">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Add Mutual Funds<sub><i class="fa fa-angle-down" aria-hidden="true"></i></sub></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>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

I think you should put the button and dropdown together in a col and use btn-block so it always fill the column. Then you can resize the column responsively.
Demo: http://www.codeply.com/go/OE4tnyG1lt
<div class="container-fluid">
<div id="navbar-two">
<div class="row">
<div class="col-sm-8 col-md-9">
<ul class="nav navbar-two-list">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">You & Peers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Family</a>
</li>
</ul>
</div>
<div class="col-sm-4 col-md-3">
<ul class="nav">
<li class="col-12 px-0">
<button class="btn btn-success btn-block dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Add Mutual Funds<sub><i class="fa fa-angle-down" aria-hidden="true"></i></sub></button>
<div class="dropdown-menu w-100">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://www.codeply.com/go/OE4tnyG1lt

Answer 2

You can use following code to set the width for both dropdown and button.just change the size of width
.dropdown-menu {
width: 100%;
}
.btn{
width: 100%;
}

Answer 3

You can use media queries. like,
#media only screen and (max-width: 768px) {
.dropdown-menu{
min-width: 400px;
}
}
#media only screen and (max-width: 480px) {
.dropdown-menu{
min-width: 320px;
}
}

Answer 4

You could clip the overflow when the text of the menu items gets too long:
.dropdown-item {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Note with the ellipsis property, overflowed content is indicated to the user with dots instead of just hard clipping the content