Bootstrap 5 break button-group in specific place depending on resolution

Issue

How can I force line-break in specific place of button-group below specific screen size ?
I have button-group with 4 buttons in line. I want to break it into two lines AFTER first button if there is not enough space.

<div class="input-group" role="group">
  <div class="input-group-text" id="btnGroupAddon">
    <a class="btn btn-secondary" role="button">Add</a>
  </div>
     
  <!-- Line break when screen width<=600 -->
    
  <input type="text" class="form-control">

  <div class="input-group-text" id="btnGroupClear">
    <a href="#"><img src="backspace.svg" height="16px;" onclick="clearSearch()"></a>
  </div>

  <div class="input-group-text" id="btnGroupSearch">
    <a href="#"><img src="search.svg" height="16px;" onClick="submit()"></a>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

Solution

You could use this SCSS:

@media (max-width: 576px) {
  .wrapping-group:not(#_) > * {
    &:first-child {
      flex: 1 0 100%;
      border-top-right-radius: 0.25rem;
      border-bottom-left-radius: 0;
      .btn {
        width: 100%;
      }
    }
    &:not(:first-child) {
      margin-top: -1px;
    }
    &.form-control {
      margin-left: 0;
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0;
    }
  }
}

working demo:

@media (max-width: 576px) {
  .wrapping-group:not(#_)>*:first-child {
    flex: 1 0 100%;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .wrapping-group:not(#_)>*:first-child .btn {
    width: 100%;
  }
  .wrapping-group:not(#_)>*:not(:first-child) {
    margin-top: -1px;
  }
  .wrapping-group:not(#_)>*.form-control {
    margin-left: 0;
    border-bottom-left-radius: 0.25rem;
  }
  .wrapping-group:not(#_)>*:last-child {
    border-top-right-radius: 0;
  }
}


/* not part of solution: */

body {
  padding: 5rem 1rem 1rem
}
<div class="input-group wrapping-group" role="group">
  <div class="input-group-text" id="btnGroupAddon">
    <a class="btn btn-secondary" role="button">Add</a>
  </div>

  <!-- Line break when screen width<=600 -->

  <input type="text" class="form-control">

  <div class="input-group-text" id="btnGroupClear">
    <a href="#"><img src="backspace.svg" height="16px;" onclick="clearSearch()"></a>
  </div>

  <div class="input-group-text" id="btnGroupSearch">
    <a href="#"><img src="search.svg" height="16px;" onClick="submit()"></a>
  </div>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

You’ll have to apply wrapping-group class to the group you want this behavior on, so it doesn’t apply to all .input-groups.
Also, I used Bootstrap 5’s xs/sm breakpoint (576px) instead of 600px but you can change it to whatever makes sense for your case.

Answered By – tao

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published