Twitter Bootstrap Question posted in

justified nested button group in bootstrap 4-Twitter bootstrap

I am having a Button group control 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>

The nested button group is not taking the available width as other buttons are taking.

I tried giving w-100 as well but no help.

Tags:

3

Answers


  1. 0 
    <!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>
    Login or Signup to reply.
  2. 0

    Please check below code, its may help you

    <!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>
    Login or Signup to reply.
  3. 0

    I ran into this problem as well. I was able to fix it by adding the flex-fill class to the div of the nested button group.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search