Creating a responsive btn-group for all screen sizes

I have a large collection of buttons that I need to organize into groups on my website. Currently, the design is not displaying them neatly in rows as I would like. I am using bootstrap 4.

<div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary">
            <input type="checkbox" name="bla" id="2" autocomplete="off" value="2" > example button
          </label>
          <label class="btn btn-primary">
            <input type="checkbox" name="bla2" id="2" autocomplete="off" value="2" > example button
          </label>
... (continue with more buttons)

Appreciate any assistance. Thank you!

cssbootstrap-4responsive

Answer №1

Make sure to include the .flex-wrap class in your button group container.

<div class="btn-group flex-wrap" data-toggle="buttons">

Answer №2

For those of us who may not require the buttons to be grouped together, an alternative option is to utilize the btn-toolbar class that automatically sets flex-wrap: wrap.

<div class="btn-toolbar" data-toggle="buttons">

Answer №3

If you want a simple button setup without using bootstrap, give this a try. It's designed for three buttons and may have some extra CSS due to being copied from another source. Keep in mind that this was one of my first creations, so the naming might not be perfect. Nevertheless, I hope this solution serves you well!

body {
  overflow-x: hidden;
}
.button {
  border: 1.2vh groove rgb(200, 200, 200);
  margin: 1.5vh 1vw;
  width: 28vw;
  font-size: 2vw;
  transition: all 1s ease-in-out;
}

#laptop {
  float: left;
  width: 65%;
}

#tablet {
  float: left;
  width: 50%;
}

@media only screen and (orientation: landscape) {
  .button,
  #instructions {
    font-size: 2vh;
  }
}

@media only screen and (max-width: 1160px) {
  #laptop {
    float: none;
    width: 100%;
  }
  #tablet {
    float: left;
    width: 50%;
  }
  .button {
    width: 45vw;
    font-size: 4vw;
  }
}

@media only screen and (max-width: 485px) {
  #laptop {
    width: calc(95vw - 32px);
  }
  #tablet {
    float: none;
    width: calc(95vw - 32px);
  }
  .button {
    width: calc(95vw - 32px);
    font-size: 4vw;
  }
}
<div id="laptop">
  <button type="button" id="b1" class="button" onclick="">Click to</button>
  <div id="tablet">
    <button type="button" id="b2" class="button" onclick=""> Click to</button>
  </div>
</div>
<button type="button" id="b3" class="button" onclick=""> Click to</button>

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

Items outside the container element

I recently noticed an issue with my website, which is built using Bootstrap. The problem arises when users scroll down the page and encounter the fixed navigation menu. It appears that the menu items and logo are no longer contained within the designated ...

javascripthtmlcsstwitter-bootstrap

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

javascripthtmlcsswordpresswpforms

Make the active navigation bar item bold and change its font color when clicked

I'm currently working on creating a navigation bar that changes font weight to bold and color to teal when a link is clicked. The issue I'm facing is that when the links are clicked, they turn blue instead of teal and lose their bold formatting, ...

htmlcssbootstrap-5

Ways to create sidebar images in a dual-column layout

I am currently working on creating images for my sidebar that have the same width but different heights. I am trying to achieve this without any spaces between the images. To get a better understanding of what I am trying to do, please refer to the follow ...

htmlcssvue.js

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

I'm struggling with implementing the popover and tooltip features in Bootstrap. While I have successfully implemented drop downs and modals, the tooltips are not styled or positioned correctly as shown in the Bootstrap examples, and the popover featur ...

javascriptjquerycsstwitter-bootstrap

The issue of the container div tag not being able to achieve 100% height and width

My web page layout has a CSS issue where I am unable to achieve 100% height in Firefox and Chrome, unlike in Internet Explorer 9. I have tried multiple examples but encountered the same problem. You can view the code on http://jsfiddle.net/cwkzq/3/ where i ...

csshtmlheightwidth

Remove the default CSS styling from Django CMS

When using Django CMS' text plug-in, I've noticed that the text is hardcoded with its own CSS, specifically within the p tags. Is there a way to remove this default styling? I would like for the text to inherit the styles defined in the theme I a ...

cssdjangodjango-cms

I am having difficulty centering the contents on the page horizontally

Struggling to achieve horizontal alignment, I suspect the floats are causing issues. Removing them disrupts the layout with left_wrap and right_wrap not staying next to each other. Check out this example on JSFiddle .main_wrap {width:100%;} .main_wrap_2 ...

htmlcss

Having trouble with CSS when using jQuery's gt() selector?

While working with jQuery, I encountered a warning from Firefox regarding the following code snippet: $("li.example div.code:gt(4)").hide(); Firefox indicates a CSS Error: Unknown pseudo-class or pseudo-element 'gt'. Although the code works as ...

jquerycss

The issue arises when using Jquery version 3.4.1, where the ".on()" method for the "click" event does not trigger when the

Currently, I am learning Cordova through a tutorial that involves Jquery 3.4.1 and Bootstrap 4.4.1. The tutorial is a bit outdated, so before reaching out to the author, I figured I would seek help on this platform (link to tutorial: ) While I assume the ...

jquerycordovabootstrap-4

Achieved anchoring an object to the top of the page while scrolling

Recently, I've been working on a piece of code to keep my div fixed at the top of the page while scrolling. However, it doesn't seem to be functioning as intended. Would anyone be able to point out where I might have gone wrong? The element in ...

javascriptjqueryhtmlcss

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

javascriptcssreactjs

Header 1 is not receiving any special styling, while Headers 2 through 6 are being styled accordingly

I am currently utilizing Skeleton V2.0.4 to design a landing page, but I seem to be having trouble with my styles not displaying correctly. Below are the specific lines of code related to it: /* Typography –––––––––––––– ...

htmlcsstags

Attempting to create a zoom-in effect on the background during hover

I attempted to create a hover effect on the image background and added an overlay using the "before" pseudo-element to later insert text on it. However, the overlay seems to be covering the container instead of the parent element (the Cimg1 class). When ...

csshtmlbootstrap-4

The Enigma of the Empty Gap When Employing "display:table/table-cell"

Struggling to understand why there is a blank space between the image and the menu. Here is the HTML and CSS related to it: <header class="header_nav"> <img src="img/logo.png" class="logo"/> <nav class="nav_bar"> <u ...

htmlcssweb

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

How can different Y position percentages be dynamically assigned to multiple layered background images in CSS using JavaScript so that they update as the page scrolls? <style> body { background-image: url(img/bg-pattern-01.png), ur ...

javascriptcssscrollparallax

When using the `justify-content: flex-end` property, the `overflow: auto

I'm attempting to align elements to the right within a container and hide any overflowed elements while still allowing them to be accessed via a scrollbar. However, I've noticed that the scrollbar disappears when using justify-content: flex-end. ...

htmlcssflexbox

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

javascripthtmlcssfrontendvisual-glitch

Shifting divs to different positions upon clicking

I am currently working on a project where I have three divs in a container positioned next to each other. My goal is to make them change their positions when clicked. For example, clicking on the left div should move it to the center position. Here is my p ...

javascripthtmljquerycssjquery-animate

What are the buttons featured in the header of this mobile-friendly bootstrap panel

Can anyone offer advice on how to make a bootstrap panel header responsive? The panel has a title with several buttons on the right side. While it looks good on a large screen, it becomes messy on smaller browser sizes. You can find my complete code here ...

htmltwitter-bootstrapcsstwitter-bootstrap-3