Fine-tuning the page design

I'm working on a registration page using Bootstrap-5 for the layout. Is there a way to place all elements of the second row (starting with %MP1) on the same row, including the last field that is currently on the third row? See image below:

https://i.sstatic.net/NBPV6.png

Here's the code snippet:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d6c9d4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Body -->
<div class="container ms-1 me-1">
  ........
  
        </select>
      </div>
    </div>
    <div class="row">
      .....
     
       </select>
      </div>
      .......
      
          </option>
        </select>
      </div>
      .....
      
        
         </option>
        </select>
      </div>
      ...... 
       
          
            </td>
        </tr>
        
      </tbody>
    </table>

   
    <button type="button" class="btn btn-primary" onclick="validateBlends()">Submit</button>
  </form>
</div>

Answer №1

Sorry, the BS grid isn't the best option for your use case.
Instead of using .row, you can achieve the desired behavior by using a flex container with wrapping toggled at the medium breakpoint: .d-flex.flex-wrap.flex-md-nowrap.
In the following code snippet, I eliminated unnecessary .col-* wrappers, added .flex-shrink-0 to all .form-label elements to prevent them from wrapping, included .align-items-baseline on the flex container to align label text with input text, and applied .me-1 to items in the row for minimal spacing.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="container ms-1 me-1">
  <div class="jumbotron bg-danger">
  </div>

  <h2>Product Registration</h2>
  <form method="post">
    <div class="row">
      <div class="col-md-1 mt-3 align-self-center d-flex justify-content-start">
        <label for="type" class="form-label">Type:</label>
      </div>
      <div class="col-md-2 mt-3">
        <select class="form-select" aria-label="type" name="type" id="type">
          <option value="">Select type</option>
          <option value="1">Roll</option>
          <option value="2">Bag</option>
          <option value="3">Cut Sheet</option>
        </select>
      </div>
      <div class="col-md-1 mt-3 align-self-center d-flex justify-content-start">
        <label for="config" class="form-label">Configuration:</label>
      </div>
      <div class="col-md-3 mt-3">
        <select class="form-select" aria-label="config" name="config" id="config">
          <option value="">Select Configuration</option>
          <option value="1"></option>
          <option value="2">Tubular</option>
          <option value="3">Single Sheet</option>
          <option value="4">Double Sheet</option>
          <option value="5">Ref. 1 Side</option>
          <option value="6">Bubble Wrap</option>
          <option value="7">Embossed</option>
        </select>
      </div>
         ...
    </div>

    <div class="d-flex flex-wrap flex-md-nowrap align-items-baseline">
      <label for="perc-mp1" class="form-label flex-shrink-0 mt-3 me-1">% Raw Material 1:</label>
      <input type="text" class="form-control mt-3 me-1" aria-label="perc-mp1" name="perc-mp1" id="perc-mp1" disabled>
       ...other entries...
    </div>
    <div class="mt-4">
      <button type="button" class="btn btn-primary mt-3 me-1" onclick="validateBlends()">Register</button>
    </div>
  </form>
</div>

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

Unable to retrieve file path from image selection in JavaScript by clicking on a button

I am trying to create a simple browsing feature that only accepts images. However, after clicking the button, I am unable to retrieve the full path in JavaScript. All I can get is the filename. JavaScript <script type="text/javascript"> functio ...

a single button with dual functionalities

I am new to the development field and have a question about jQuery. I want a single button to perform two different actions. For example, let's say we have a button labeled Pause/Resume. When I click on the button, it should first display "Pause", and ...

What is the best way to hide a section of an image using the background of a different div?

How can I make the background of div2 cover the image in div1 when setting margin-top=-50px? Code snippet: <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> ...

Numerous SVGs sharing identical IDs

Is it possible to include multiple SVGs on an HTML page and utilize the same IDs in each of them? <div> <svg height="0" width="0"> <clipPath id="svgPath"> ........ </svg> <svg height="0" width="0"> < ...

Obtaining the scene's coordinates in Three.js

Struggling with a coding issue, I've scanned various discussions that don't quite address my specific problem. Any assistance would be greatly appreciated. In my HTML document, I am using the three.js library to create a scene titled scaledScene ...

What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly. Below are the CSS lines I have used: position: fixed; bottom: 0; right: 0; left: 0; clear: both; line-height: 1.36em; padding: 08px 0px 0px; tex ...

Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code: <svg width="120" height="240" > <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> ...

Python code using selenium syntax cannot be run in Microsoft Visual Studio Code

Python code containing selenium syntax is correctly written, however, when attempting to execute it in visual studio code, the entire script gets underlined in red. The exact cause of this issue remains a mystery. Presented below is the specific portion ...

Tips for focusing on a background image without being distracted by its child elements

I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...

I am attempting to add user input to the parent container when the button is clicked, but for some reason it is

Recently delving into jquery, I attempted to dynamically add an input field to a parent div on button click, but encountered some difficulties. Specifically, my goal was to insert a div with an input element into the parent div identified by the id "join ...

Set the height of the unordered list (ul) to be

I came across a design on Facebook that resembles a timeline, but I am having trouble adjusting the height of the ul element. <ul class="timeline">...</ul> I want the line in the middle to fill the height of the page even when there is less c ...

The grayscale effect is not functioning on the default web browser of an Android device

I have implemented a grayscale effect for an image using the following CSS code snippet: img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\&apo ...

What is the best way to add or delete data when specific radio buttons are chosen?

Hey there, I'm facing an issue where the data is being appended regardless of which radio button is selected. Can someone help me with a solution on how to properly add and remove data based on the selected radio button? $( document ).ready(functio ...

Is it better to store JSON data locally using cookies or HTML5 local storage?

Currently, I am working on developing a mobile website using jquery mobile. My main concern right now is how to efficiently carry JSON data across multiple pages. I am debating whether it would be better to store this JSON data in a cookie or use HTML5 loc ...

Working with CSS3 transitions in PHPStorm is a breeze

For some reason, my phpstorm does not provide code completion for CSS properties like -webkit-translate, translate, or animation. Has anyone encountered this issue before? Any suggestions on how to fix it? ...

Troubleshooting Flexbox: Content within a Flex Item is not displaying properly within a scrollable container

I recently embarked on converting one of my websites to flexbox and encountered an issue with vertical scrolling within a flex container. It appears that Firefox displays it correctly, while Chrome and Safari do not. You can check out the code here. . ...

What is the process for converting an <input type="file> into a base64 string?

Currently, I'm attempting to send an image to my express backend by including the image directly in the post request body. var imgValue = document.getElementById("image").value; Within my post request: body : JSON.stringify({ image:imgValue ...

Specify the width of one element to always be the same as the width of another

One common challenge is maintaining the width of one element equal to another when the page loads (refer to link description here). However, it becomes tricky when the side width changes, such as resizing the browser window. Is there a way to dynamically ...