The menubar does not maintain a uniform appearance in Bootstrap 4

I am currently developing a navigation bar using Bootstrap 4. Here is the code I have so far:

<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 challenge I am facing is to ensure that all the buttons in the navigation bar have uniform widths. The dropdown buttons are currently resizing based on the text content, while the non-dropdown buttons are taking up excess space. I have attempted to set width:20% and utilize col-*-* on the parent buttons, but these solutions have not produced the desired outcome.

Do you have any suggestions on how to achieve consistent button widths throughout the navigation bar?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To resolve the issue, include the following CSS code in your CSS stylesheet:

.dropdown-menu {
  min-width: unset !important; // adjust width as needed
}

See the Live Demo Here

This should hopefully address your problem.

Answer №2

To optimize your layout using the Bootstrap framework, I recommend creating a grid with one row consisting of five columns, each with a class of col-sm-2. On extra small (XS) screens, you may need to adjust the layout due to limited width. To center the grid, apply the offset-sm-1 class to the first col-sm-2 item. Additionally, ensure that buttons occupy the full width of their respective columns by using the btn-block class. Below, you will find the modified code example implementing these changes:

<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>

Answer №3

It's important to note that in Bootstrap 4, the row class should be specifically used to contain col* elements and not other elements like btn and dropdown. According to the Bootstrap documentation...

"Rows act as wrappers for columns. Each column has horizontal padding known as gutter to control the spacing between them... In a grid layout, content should always be placed within columns with columns being the only immediate children of rows."

It is recommended to place dropdowns and buttons within columns. Utilize the auto-layout grid (col or col-auto) to ensure equal widths. To make buttons fill the width of their parent element, use btn-block.

For achieving full equal width, utilize 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 content that "shrink to fit" in 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>

View a demonstration of both options

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing SeleniumRC within JUnit framework for elements with dynamically changing IDs

I'm currently in the process of automating a workflow and I need to click on a link within a table row. The challenge is that all links within the rows share the same element ID, and the source code has a JavaScript code snippet like this: ("Element I ...

cssseleniumelementxpath

Firefox failing to display input placeholder text properly when wrapped

I've been working on making my placeholder text wrap to the next line in an input field. While I found solutions that work in Chrome, I'm struggling to get it right in Firefox. After researching on Stack Overflow, I came across this question: P ...

htmlcssfirefoxinput

The tab content in VerticalTab Material React UI is spilling out and overflowing

Having some trouble with this particular component. Whenever I input content larger than my Grid size, it overflows the VerticalTab section. You can see an example of this in this codesandbox. Here's what I've attempted: return ( <div cla ...

htmlcssmaterial-ui

Tips for enclosing the "body" element using a background image

Hey there! I'm a newbie web developer with a casual approach to coding. I'm trying to jazz up my menu by adding a background image, but no matter what I do, it keeps showing the default white background. Can anyone lend me a hand? If you're ...

htmlcss

What is the purpose of activating hover styles when tapping on mobile devices?

On my button, you can see the color change when hovering: button { background-color: orange; } button:hover { background-color: darkorange; } Check out this example: https://jsfiddle.net/oepb5ks4/ While this works well on desktop, it's a diffe ...

htmlcss

What is the best method for retrieving text that does not contain tags (such as text

My challenge involves storing headings and paragraphs into separate arrays, but I am struggling with handling text between <br>. Below is my HTML code and Python snippet: <p><strong>W Ognisku</strong><br>W londyńskim Ognisku ...

pythonhtmlweb-scrapingbeautifulsouppython-docx

Populating fields in a new AngularJS document from a table

I have a project where there is a table displaying different instances of our service, and each row has an info button that opens a form with the corresponding row's information autofilled. However, I am facing an issue where by the time I retrieve th ...

javascripthtmlangularjsweb

Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most im ...

htmlcss

Modify the color of the select element when it is in an open state

If you're new to Material UI, I have a select element that I would like to change the color of. When 'None' is selected, I want the background color of the input field above it to match the 'None' section. Then, when the dropdown m ...

javascriptcssreactjstypescriptmaterial-ui

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

What steps can be taken to ensure that an element does not exceed the boundaries of its grandparent container?

I am facing a unique scenario where I have a div with dynamic content, and inside it is another div containing a growing list. The challenge is to allow the internal div to expand until the root div reaches its maximum height, after which overflow should ...

htmlcss

A tutorial on converting a tree structure into a JSON object using jQuery

Struggling to create a JSON object from the tree class, specifically needing only the span values. The structure of the tree is dynamic and nested, so utilizing a recursive function seems like the most suitable approach. Currently able to extract the keys ...

jqueryhtml

What is the best way to ensure a floated image matches the height of its parent container?

I am facing an issue with setting the height of a logo within a footer div to match the height of the div itself. Using height: 100% doesn't seem to work as expected. Below is the relevant HTML: <footer> <img src="images/circle_logo.png" ...

cssimagehtmlcss-float

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider

As a beginner, I realized too late that adding code in comments is not an option. Consequently, I decided to create a new question and ask for your assistance once again. To optimize the use of space, I have implemented bxSlider with fixed dimensions (wid ...

javascriptjqueryhtmlcss

Combining table rows using the <td> class in JavaScript

I am currently working on refining the JS code to merge rows with common values and classes in a table. The existing code successfully merged common rows but failed to consider their classes. Snippet of the Table code: <tbody id="property_dtl_table_bo ...

javascriptjqueryhtmlruby-on-rails

Proper handling of retrieving POST method data on the current page

I'm uncertain if I'm handling my "same page" forms effectively. My current method involves adding a hidden input named "action" with value='1' to the form. Then, at the start of the page, I check if $_POST["action"] has a value, and ...

phphtmlweb

Tips for merging two classes in CSS

Within my code, I have two classes named classA and classB. I am looking to have classB inherit the style of classA while still only using classB. .classA{ width:100px;} .classB{ height:100px;} <div class="classB"></div> ...

htmlcss

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

Description : I have implemented a dropdown list using element that contains a list of items along with a search field. This allows users to easily search for specific items in the list instead of manually scrolling through a long dropdown menu. They can ...

javascripthtmlangularmat-selectmat-option

Is there a way to automatically launch a new tab upon arriving from another website?

I currently have a website that displays a table of elements, each with its own set of sub-elements. On another page, I can view the element along with multiple tabs for its corresponding sub-elements. The current setup is depicted as follows: <a clas ...

javascripthtml

Tips for setting discrete mapper style in cytoscapejs?

Currently, I am defining the style of cytoscape.js through CSS and converting it to JSON format using this resource. My goal is to implement a discrete mapper for styling. It's similar to the scenario discussed in How to use a descreteMapper like on c ...

cssjsoncytoscape.js