I'm creating a navbar dropdown using Bootstrap 4. But in my one of menu item I want to customize downdown menu items using my own code. When I tried this I'm not able to increase the width of dropdown menu content. on click of dropdown-link it should show content properly.
Here below is the code.
<nav class="navbar navbar-expand-sm navbar-light bg-white text-black">
<div class="container">
<button class="navbar-toggler" type="button" style="border:none;outline:0;" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">T1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="row">
<div class="col-sm-6">
<div class="container">
<div class="">
<label label-default="" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="container">
<div class="form-group">
<label label-default="" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> T2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">t3</a>
</li>
</ul>
</div>
</div>
</nav>
I'm expecting below output.
