Menubar not consistent using Bootstrap 4 - html

Question

I am creating a menu using Bootstrap 4. This is my current code:
<div class="row mx-2">
<div class="dropdown">
<div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
Option 1
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO11
</div>
<a href="abc.php" class='dropdown-item'>DDO12</a>
</form>
</div>
</div>
<div class="dropdown">
<div class="btn btn-info dropdown-toggle mx-3" data-toggle='dropdown'>
Option 2
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO21</div>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO22</div>
</div>
</div>
<div class="btn btn-dark col mx-2" onclick="dosomething()">Option3</div>
<div class="dropdown">
<div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
Option 4
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDOP41</div>
</div>
</div>
<div class="btn btn-dark col mx-2">Option 5</div>
</div>
The problem is that the dropdown buttons are as wide as text, while the non-dropdown buttons are too wide and taking up all the left over space. I need all the option buttons to be of same width.
I tried assigning width:20% and also tried col-*-* on all of the parent option buttons, but nothing worked.
What else can be done to achieve equal width for all option buttons?

Answer 1

You need add CSS like below in your CSS file
.dropdown-menu {
min-width: unset !important; // add width as per your need
}
Live Demo
Hope it will solve your problem

Answer 2

Using the Bootstrap approach, I suggest you to made a grid (a grid have 12 columns) with one row and five columns with class col-sm-2 (On XS screens the layout should be different because of the small total width you have). To make this centered, just add a offset-sm-1 class to the first col-sm-2 item. And to make buttons have the full-width of the column that wraps it, just use the btn-block class. I made changes to your example to make this work:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="offset-sm-1 col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 1
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO11
</div>
<a href="abc.php" class='dropdown-item'>DDO12</a>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 2
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO21
</div>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO22
</div>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="btn btn-dark btn-block" onclick="dosomething()">Option3</div>
</div>
<div class="col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 4
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDOP41
</div>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="btn btn-dark btn-block">
Option 5
</div>
</div>
</div>
</div>

Answer 3

In Bootstrap 4, the row class should only be used to contain col* and not other elements like btn and dropdown. The other elements are placed inside the columns. From the Bootstrap docs...
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... In
a grid layout, content must be placed within columns and only columns
may be immediate children of rows."
Put the dropdown and btn in columns. Use the auto-layout grid (col or col-auto) to control the equal widths. For buttons that fill the width of their parent use btn-block.
For full equal width use col...
<div class="row mx-2">
<div class="col">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
Option 1
</div>
<div class="dropdown-menu">
...
</div>
</div>
</div>
<div class="col">
<div class="btn btn-dark btn-block mx-2">Option3</div>
</div>
...
</div>
</div>
For "shrink to fit" content width use col-auto...
<div class="row mx-2">
<div class="col-auto">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
Option 1
</div>
<div class="dropdown-menu">
...
</div>
</div>
</div>
<div class="col-auto">
<div class="btn btn-dark btn-block mx-2">Option3</div>
</div>
...
</div>
</div>
Demo of both options