Menubar not consistent using Bootstrap 4

bootstrap 4 navbar
navbar-fixed-top bootstrap 4
navbar fixed-top after scrolling bootstrap 4
bootstrap responsive menu with submenu example
bootstrap 4 sticky header on scroll
bootstrap navbar examples
navbar-fixed-top not working
bootstrap sticky header on scroll

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"><a href='ABC.php' style="text-decoration:none;color:#fff;">Option 5</a></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?

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

Menubar not consistent using Bootstrap 4, Menubar not consistent using Bootstrap 4. bootstrap 4 navbar navbar-fixed-top bootstrap 4 navbar fixed-top after scrolling bootstrap 4 bootstrap navbar  Instead of adding popper, jquery dependency in your scripts, try this instead you can install ng-bootstrap (look for documentation in https://ng-bootstrap.github.io). Advantage of using ng-bootstrap over adding scripts of bootstrap, jquery and popper is it will not bloatup your bundle size and for these reason angular community has created ng

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">
      <a href='ABC.php' style="text-decoration:none;color:#fff;">Option 5</a>
    </div>
  </div>

</div>

</div>

Fixed Top Navbar Example for Bootstrap, This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to  Responsive Navbar Using Bootstrap 4. it is really good it works almost, a problem is when i want to input links in the dropdown so link does not work. I can use the same links outside so no problems in sending me a guide

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

Components · Bootstrap, Dropdowns in button groups. Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering. Bootstrap Navbar Guide and Free Navigation Examples. Bootstrap Nataly Birch • August 09, 2019 • 7 minutes READ Every good user experience begins with well-thought-out navigation. It is the heart and soul of the website that stands behind the comfortable presence of the visitors. It is a glue that holds everything together.

Bootstrap 4: How to make top fixed navbar stay in container and not , Hey, I'm looking for some elegant and simple way to make fixed navbar stay inside parents div.container. Here's the code, that I copied and  Assuming Bootstrap and Popper libraries were installed using Nuget package manager, for a web application using Visual Studio, in the Master page file (Site.Master), right below where body tag begins, include the reference to popper.min.js by typing:

Bootstrap Navbar Guide and Free Navigation Examples, Bootstrap navbar is a baseline component in the Bootstrap should stay consistent to avoid confusions and misinterpretations. Bootstrap is no alien to improvements in CSS, so its fourth version makes the most out of it. Find the Bootstrap menu that best fits your project. The best free menu snippets available. Design elements using Bootstrap, javascript, css, and html.

A Simple Bootstrap Tutorial, If you're getting started in front-end work, use this handy Bootstrap tutorial by Toptal The Bootstrap grid system has four tiers of classes: xs for phones (<​768px), sm any fixed-width component, such as a fixed navbar, will not be visible when the For example, heading font sizes are not consistent across browsers, some  This Bootstrap menu has an underline effect on the menus. Like the previous example, you can place your company’s logo on the left-hand side of the menu bar, and on the right-hand side of it, there is a menu icon clicking which shows the menus.