implementing a properly aligned nested button group with Bootstrap 4 framework

My button group control looks like this.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div role="group" class="d-flex btn-group">
       <button type="button" class="w-100 btn btn-outline-secondary"><i class="fas fa-print"></i></button>
       <div role="group" class="dropdown btn-group">
          <button aria-haspopup="true" aria-expanded="false" type="button" class="dropdown-toggle btn btn-outline-secondary"><i class="fas fa-download"></i></button>
          <div aria-labelledby="" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 32px, 0px);"><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a></div>
       </div>
       <button type="button" class="w-100 btn btn-outline-secondary"><i class="fas fa-th"></i></button><button title="Clear" type="button" class="w-100 btn btn-outline-secondary"><i class="fas fa-eraser"></i></button>
    </div>

I am facing an issue where the nested button group is not utilizing the available width like other buttons.

Even after applying w-100, the issue persists.

cssbootstrap-4flexboxbuttongroup

Answer №1

If you're looking for guidance, take a look at the code snippet below:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.btn-group .col-6-cus { width:50% !important;}
.btn-group .col-6-cus .dropdown-toggle { width:100%;}
</style>

</head>

<body>


    <div role="group" class="d-flex btn-group">
       <button type="button" class="w-100 col-6-cus btn btn-outline-secondary"><i class="fas fa-print"></i></button>
       <div role="group" class="dropdown btn-group col-6-cus">
          <button aria-haspopup="true" aria-expanded="false" type="button" class="dropdown-toggle btn btn-outline-secondary"><i class="fas fa-download"></i></button>
          <div aria-labelledby="" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 32px, 0px);"><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a></div>
       </div>
       <button type="button" class="w-100 btn btn-outline-secondary col-6-cus"><i class="fas fa-th"></i></button>
       <button title="Clear" type="button" class="w-100 btn btn-outline-secondary col-6-cus"><i class="fas fa-eraser"></i></button>
    </div>

</body>
</html>

Answer №2

Encountering this issue myself, I managed to resolve it by including the flex-fill class within the nested button group's div element.

Answer №3

<!DOCTYPE html>

<html>
<head>
<style></style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

</head>

<body>

      <div class="btn-group w-100" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-outline-secondary w-25"><i class="fas fa-print"></i></button>
  

  <div class="btn-group w-25" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle w-100" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="fas fa-download"></i>
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <button type="button" class="btn btn-outline-secondary w-25"><i class="fas fa-th"></i></button>
  <button type="button" class="btn btn-outline-secondary w-25"><i class="fas fa-eraser"></i></button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>
    <script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>
    <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/holder.min.js"></script>
    </body>
</html>

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

Aligning a rotated paragraph in the middle of its parent container

Here is my current progress: http://jsfiddle.net/2Zrx7/2/ .events{ height:100px; position: relative; } .tt_username{ position: absolute; top:0px; height: 100%; width: 30px; background: #ccc; text-align: center; } .tt_usern ...

javascriptjquerycss

Resizing Your WordPress Header Logo

Hi there! I am struggling to resize the logo in the header of my website www.cookingvinyls.com. Despite my efforts, I can't seem to override the hardcoded version. I attempted to modify the width and height lines in header.php, but unfortunately, it ...

htmlcsswordpresswordpress-themingimage-resizing

What strategies can I implement to ensure my modal dialog box remains responsive? Adjusting the window size causes the modal box to malfunction and lose its structure

Whenever I adjust the size of the browser window, the elements inside the modal box become misaligned. HTML <div class='modal'> <div class='modal-content'> </div> </div> Below is the CSS for the modal ...

javascripthtmlcss

Display every div element if none of the links have been clicked

On my webpage at url.com/yourfirstpage/, all div elements are hidden by default with a display:none property. If we specifically target #sec1 by going to url.com/yourfirstpage/#sec1, only sec1 is displayed while the others remain hidden. But what if we acc ...

javascripthtmlcss

Append the class to the div element

Hey there, I'm dealing with a div tag that looks like this: <div id = "product-tabs" class="gen-tabs gen-tabs--style1"> Now, I have to add 'accor' to the end of the class section, so it would look like this: gen-tabs gen-tabs--style ...

jquerycssclass

My experience with IE8 has been frustrating as I encounter issues while trying various methods to set min-width using

A variety of scripts are being tested: $(document).ready(function(){$(".body").addClass("ie-min");}); $(document).ready(function(){$(".body").attr("class", "ie-min");}); $(document).ready(function(){$(".body").css("min-width", "350px");}); $(document).rea ...

jqueryinternet-explorercss

Unable to retrieve the DOM element using jQuery

I'm currently facing an issue with fetching a DOM element from a jQuery selector array. var index = $(this).index(); $titleElement = $(".title:not(.small)")[index]; Unfortunately, the code above only gives me the text and not the actual DOM element ...

javascriptjqueryhtmlcssdom

Are image collections featuring the <img> tag available?

I am working on a website project and I'm looking for a way to create a gallery with a group of photos. The challenge is that I am using Spring MVC, which means regular js and jquery plugins may not work with my 'img src..' tags. Are there a ...

javascriptjqueryhtmlcss

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

htmlcssangularangular-ui-bootstrap

Why is it necessary to utilize absolute positioning in CSS?

Check out this link According to the link, an element with absolute positioning is placed in relation to its first parent element that has a position other than static. If no such element exists, then it refers to the containing block which is <html& ...

htmlcss

Incorporate Arabic typography into the React Material Theme

My goal is to utilize the Noto Sans Arabic font within my React material UI theme. Everything seems to be functioning correctly, including overrides. Despite consulting the React Material UI documentation and attempting to follow similar steps as outlined ...

htmlcssreactjsmaterial-ui

Duplicate CSS designed file upload buttons

I have used CSS to style an input type file. Whenever I click on a plus button, it duplicates the input field. However, this duplication only visually happens with an unstyled upload button. Hint: To replace the standard button with a styled one, I hide i ...

htmlcssfileclone

The element refuses to accept the appendChild method

I've created a tampermonkey script that generates certain elements and adds them to the page. The first element, named ControllerBG, is appended to an element with the id "motd". However, when I try to append a second element, nothing appears on the ...

javascripthtmlcsstampermonkey

Guide to positioning front layer in CSS3

I am currently working on a page and have added an "Under Construction" banner to indicate it is not yet finished. Could someone assist me in bringing the png to the forefront on this link? ...

htmlcss

Establish the appropriate height for the input field

Having an input class as shown below: <input type="number" class="inv_1"/> I attempted to adjust the height using CSS: .inv_1 { width: 50%; height: 32px; } Expected result: input tag with a height of 32px. Actual result: ...

htmlcss

Navigate to another HTML division using data-toggle

I have 2 HTML documents index.html and services.html In services.html, I have the following code: <a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a> <a class="nav-link" data-bs- ...

javascripthtmlcssbootstrap-4bootstrap-5

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss

Styling a div box

I've been experimenting with CSS on a div for a while now, but I'm still struggling to replicate the image below. If anyone can offer some guidance, it would be greatly appreciated. I'm looking for a solution involving a div or another elem ...

htmlcss

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

javascriptcssangularjssass

Unable to convert cursor to jpg format

I am facing an issue where I have a jpg file stored in the same folder as my styles.css, and I want to change the cursor on a webpage to this particular jpg file. Despite my efforts, it seems like the cursor is not changing as expected. Currently, I am us ...

htmlcss