How to strategically break Bootstrap 5 button groups for different resolutions?

Is there a way to create a line break in a specific place within a button group on a certain screen size? I have a button group with 4 buttons in a row, and I would like to split it into two lines after the first button if there isn't 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7a617f617f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e756b756b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

cssresponsive-designbootstrap-5

Answer №1

Below is a SCSS snippet that can be utilized:

@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;
    }
  }
}

Check out the 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;
  }
}


/* Additional styling: */

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101746f716f71">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6e8f6e8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

To implement this behavior, assign the class wrapping-group to the desired group, ensuring it does not affect all .input-group elements.
Bootstrap 5’s xs/sm breakpoint (576px) is utilized here, but feel free to adjust it to suit your requirements.

Answer №2

@tao's response was incredibly helpful to me. I made a few adjustments to the CSS code, in case it might benefit someone else. Unfortunately, I am not proficient enough to provide a detailed explanation as I am new to CSS.

@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%;
    flex: 1 0 100%;
    margin-top: -1px;
    margin-left: 0px;
  }
  .wrapping-group:not(#_)>*:not(:first-child) {
    flex: 1 0 100%;
    margin-top: -1px;
    margin-left: 0px;
  }
  .wrapping-group:not(#_)>*.form-control {
    margin-left: 0;
  }
  .wrapping-group:not(#_)>*:last-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.25rem;
  }
}
<div class="input-group wrapping-group" role="group">
  <input type="text" class="form-control">

  <div class="input-group-text d-grid gap-2" id="btnGroupClear">
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</a>
  </div>

  <div class="input-group-text d-grid gap-2" id="btnGroupSearch">
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
</svg></a>
  </div>
</div>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219071907">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e99c87998799">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

Answer №3

The correct CSS property to use here is display:block;

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

In the readmore.js script, position the "readmore" link within a div instead of outside of it

I have added annotations that vary in length, so I am looking to integrate the readmore.js plugin. To ensure uniform sizing for all annotations (even empty ones), I need to set a minimum height for the div container. <annotation> <div style="wi ...

javascriptjqueryhtmlcss

What is the proper way to assign a class name to an animation state in Angular 2/4?

I am currently working with Angular Animations using version 4.1.3 Check out the code snippet below: @Component({ selector : 'my-fader', animations: [ trigger('visibilityChanged', [ state('true' , style({ opaci ...

cssangularangular2-routingangular2-animation

No JavaScript needed for this CSS framework

I have been tasked with creating a website without the use of JavaScript, following very specific instructions. Furthermore, it must be compatible with iPhone and other mobile devices, while still adhering to the no JavaScript rule. I am open to utilizing ...

phphtmlcsswebcss-frameworks

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

I am facing an issue where adding body tags to my code in Visual Studio code does not yield the desired results. Interestingly, it doesn't seem to be a syntax error in CSS. body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI&apo ...

htmlcss

IE 11 does not support the use of absolute positioning with a height of 100%, however, this functionality works perfectly on Microsoft Edge

It appears that in IE 11, my absolutely positioned element is not displaying within another element with a height:100%. Strangely, it only works if I assign a fixed height to the element (even though its parent has a fixed height). Here is the HTML code: ...

cssinternet-explorerinternet-explorer-11

Is there a way to create an effect where the color of a floating action button changes when you hover over it, similar to a filter?

I'm new to using the <Fab /> element and I'm struggling to figure out how to implement a hover effect that will change the button's color. Here's what I have so far: JavaScript: <Fab variant="extended" className=&quo ...

javascriptcssmaterial-ui

The MAC slideshow circles at the bottom have been mysteriously chopped off

Utilizing the popular JQuery plugin Cycle for a slideshow on this site: bybyweb.com/pbm An issue has arisen - everything functions as expected on windows (across all major browsers), BUT on MAC (running lion 10.7.5, tested on one machine so far; unsure of ...

jqueryhtmlcss

Customize the appearance of semantic-ui-react components with hover effects

When I assign a specific className to components like <Segment className="Change" color='blue' inverted></Segment> and then in my CSS I apply the following: .Change:hover{ background-color: black; //or any other hover effect } N ...

cssreactjssemantic-uisemantic-ui-react

Move divs that are currently not visible on the screen to a new position using CSS animations

Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet: $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ ...

javascriptjqueryhtmlcssanimation

React is having trouble resolving the bootstrap issue

While working through a tutorial, I started the frontend development of my React project by executing this command: npx create-react-app frontend The tutorial instructor mentioned using bootstrap, but did not specify where it was installed. When I reache ...

reactjsnpmbootstrap-5create-react-app

The background image will expand to fill any available space

I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not ...

htmlcss

Is it feasible for nested div to remain unaffected by bleeding when the container is positioned relatively and has an overflow hidden

Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...

cssoverflowcss-positionhtml

Issue with MVC Bundle not functioning properly in Release Configuration due to Debug being set to False, causing CSS and JS files to not

Whenever I deploy my MVC.Net application in release mode, the following configuration will be present in the web.config file: <compilation debug="false" targetFramework="4.5" /> After making the above changes, the site loads with CSS and JavaScript ...

javascriptc#cssasp.netasp.net-mvc

What methods can be used to restrict users from navigating to the previous or next page while they are scrolling horizontally within a scrollable div?

Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage. The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" fe ...

htmlcssbrowseruser-experience

The select element is displaying with a different width compared to its sibling, causing the Bootstrap spacing to over

Working on styling an input form using Bootstrap-4. I have an input field and a select field, both having the class "col" with different spacing classes. However, the select field appears slightly smaller. When I assign the class "col-6" to both fields, t ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to delete spaces between span elements while preserving the spaces within each individual span tag?

Is there a way to eliminate unexpected spaces that appear between spans? One attempt was made by setting font-size: 0 within the wrapper <div>, which successfully removed spaces not only between <span> tags but also within each <span> ta ...

htmlcssvue.jsvuejs2

Utilize Rails file_field input as a clickable button

Currently, I have a button that needs to trigger the action associated with a file_field in my Rails application. Below is the erb code I am using: <label for='file-input'> <span class='btn btn-success' style='max-width ...

cssruby-on-railsrubyerb

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

javascriptjqueryhtmlcss

Having some trouble integrating CSS with JavaFx; encountering an error

Can anyone help me with using CSS in JavaFx? I'm encountering an error while trying to add a CSS file (style.css) to my fxml file through stylesheets. The error message I'm getting is: com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged W ...

javacss

Unable to scroll within ion-view component

I recently started working with the ionic framework and I am currently struggling with a scrolling issue in my page design. Below is the code from my index.html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

htmlcssangularjsionic-framework