What is the best way to create a responsive grid layout for my form using Bootstrap?

I have designed a form using bootstrap 5 with 1 row containing 4 columns (1 dropdown menu and 3 buttons). While it looks fine on my desktop, the problem arises when I view the page on a mobile device. The buttons shrink and remain on the same row instead of adjusting to the new resolution. How can I restructure the form so that the buttons stack on top of each other on mobile devices instead of next to each other?

Here is a snapshot of my current code

<div class="container-fluid">
        <div class="row g-3 mx-3">
            <div class="col">
                <select class="form-select form-control">
                    <option selected>Select Level</option>
                    <option value="1">Easy</option>
                    <option value="2">Medium</option>
                    <option value="3">Hard</option>
                    <option value="4">Evil</option>
                </select>
            </div>
            <div class="col">
                <button type="submit" class="form-control btn btn-primary">New Board</button>
            </div>
            <div class="col">
                <button type="submit" class="form-control btn btn-danger">Clear Board</button>
            </div>
            <div class="col">
                <button type="submit" class="form-control btn btn-success">Check</button>
            </div>
        </div>
    </div>

Answer №1

Ensure the class is set to col-md-3 col-sm-12.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d362b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b2a9b4a9b5">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="row g-3 mx-3">
      <div class="col-md-3 col-sm-12">
        <select class="form-select form-control">
          <option selected>Select Level</option>
          <option value="1">Easy</option>
          <option value="2">Medium</option>
          <option value="3">Hard</option>
          <option value="4">Evil</option>
        </select>
      </div>
      <div class="col-md-3 col-sm-12">
        <button type="submit" class="form-control btn btn-primary">New Board</button>
      </div>
      <div class="col-md-3 col-sm-12">
        <button type="submit" class="form-control btn btn-danger">Clear Board</button>
      </div>
      <div class="col-md-3 col-sm-12">
        <button type="submit" class="form-control btn btn-success">Check</button>
      </div>
    </div>
  </div>

</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

Steps for designing image animations with fade in and fade out effects

I have a task to enhance the current code provided below, which currently works with only two images. HTML: <div id="cf"> <img class="bottom" src="<?php bloginfo('template_directory') ?>/assets/img/image1" /> <img class ...

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

Maximizing Particle Performance Using JavaScript

I am experimenting with creating particles in JavaScript for the first time, and I'm unsure if the code below is optimized. When I generate 100 particles on the screen, there isn't much of an FPS drop noticeable. However, when multiple clicks o ...

Having an issue with Local Storage returning undefined

I've been working on a form to input values and show the data on a different page after submission. Below is my form: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hr ...

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

Conceal the choice if its value matches that of another option

My goal is to create a code that will hide an <option> if its value matches the value of the first option (which is retrieved dynamically with PHP). Here's the initial code snippet: <select onChange="this.form.submit()" name="cart[<?php e ...

Shifting an image within a div using HTML5 and CSS3

I am wondering how to position the image 50px from the top and 50px from the left within the div. Should I use padding for this? <header> <img src="logo.png" alt="" /> </header> header { width... height: background: (url) } ...

Is there a way to eliminate the surplus 2 download icons from this Angular code when there are a total of 3 users?

Here is some HTML code snippet: <tr *ngFor="let user of users"> <td> <h6 class="font-medium">{{user.id}}</h6> </td> <td> <h ...

What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance of the table: Current HTML code: <div class="row"> <d ...

Leveraging basscss through NPM/Webpack installation

As a newcomer to the webpack/react app environment, I am attempting to incorporate the Basscss CSS framework into my project. After successfully running 'npm i basscss' and adding require('basscss/css/basscss.css'); to my app entry poin ...

Maintain visibility of the vertical scroll bar while scrolling horizontally

Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars. The vertical scroll bar should only navigate throu ...

Converting an HTML table into an Excel spreadsheet

In the process of developing an application that populates a table based on a JSON dataset, I am seeking a way to store the filtered data into an Excel file or even a CSV. The structure includes two script files - app.js and mainController.js (organized fo ...

Executing a jQuery function automatically & Invoking a jQuery function using the onClick attribute in an HTML element

Having some issues with jQuery and could use some assistance... Currently, I am trying to have a jQuery function automatically execute when the page loads, as well as when a button is clicked. [Previous Issue] Previously, the jQuery function would automa ...

When developing a website with HTML/CSS, is it recommended to utilize tables for organizing content

Seeking guidance as a novice in web development. I am planning to design a table with input fields that will be sent to the server upon submission. What is the preferred method for achieving this? Is it advisable to utilize html-tables or would it be more ...

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

Incorporating Angular module into the mean.io bundle

Need help with adding the angular-ui-grid module to a mean.io package: $ cd packages/custom/mypackage $ npm install angular-ui-grid --save To import the JS, add this line to packages/custom/mypackage/public/index.js: import 'angular-ui-grid'; ...

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

Issue occurred while attempting to resolve tab panel identification for incorporating tab panes within Razor Pages code

So I've run into a bit of a snag here. I'm fairly new to working with Bootstrap and Razor Pages, and I can't seem to figure out why I'm encountering this error. My current project involves implementing tabs and their corresponding tab ...

the ajax success function is malfunctioning

I'm encountering an issue with my ajax function. I am trying to change the CSS for certain HTML elements on 'success', using the following code: success:function(d){ $('#name').css('weight','normal'); ...

Align select and number inputs vertically in Firefox

How can I achieve vertical alignment for these inputs on Firefox? The alignment works perfectly in Chrome, Safari, and Opera, but not in Firefox (Version 57 tested on macOS, Windows, and Linux Mint). While removing type="number" from the input resolves th ...