Ways to evenly distribute form fields with Bootstrap 4

I've been attempting to achieve a more balanced distribution of these fields, but so far I have not succeeded:

Current https://i.sstatic.net/6R1wb.png

Expectation https://i.sstatic.net/azior.png

This code segment needs attention:

<div class="row flex-nowrap d-flex align-items-center">
  <div style="width: 37%" class="form-group col-sm col-md-3"><select class="form-control" id="taskList" placeholder="Pick a task">
      <option value=""></option>
      <option value="review and approve on page recommendations">Review and approve</option>
      <option value="review and approve technical seo recommendations">Review</option>
    </select></div>
  <div style="width: 15%" class="form-group col-sm col-md-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
  <div style="width: 10%" class="form-group col-sm col-md-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
  <div style="width: 32%" class="form-group col-sm col-md-3"><input type="text" class="form-control" placeholder="Notes"></div>
  <div style="width: 7%" class="form-group col-sm col-md-1"><button id="addTask" type="submit" onclick="addTaskToDb()">+</button></div>
</div>

Check out the Fiddle

htmlcssbootstrap-4

Answer №1

To achieve a total of 12 for the columns, you must remove the style: width: xx% from each one and assign the class col-md-x to them accordingly. For example, in this scenario, I used 4 + 2 + 2 + 3 + 1. Make sure to adjust it based on your requirements.

In the demonstration, I utilized col-sm.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a495805414b4746"><strong>[email protected]</strong></a>/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row flex-nowrap d-flex align-items-center">
  <div class="form-group col-sm-4">
    <select class="form-control" id="taskList" placeholder="Pick a task">
      <option value=""></option>
      <option value="review and approve on page recommendations">Review and approve</option>
      <option value="review and approve technical seo recommendations">Review</option>
    </select>
  </div>
  <div class="form-group col-sm-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
  <div class="form-group col-sm-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
  <div class="form-group col-sm-3"><input type="text" class="form-control" placeholder="Notes"></div>
  <div class="form-group col-sm-1"><button id="addTask" type="submit" onclick="addTaskToDb()">+</button></div>
</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

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...

csswebpacknode-modulescss-loader

Loading Web Applications Screen

My web app contains multiple tree views. Upon loading the page, I first see the unordered lists before the styling of the trees is displayed in the DOM after a brief delay. Is there a method to mask the web app with a spinner placed in the center of the s ...

javascriptjqueryhtmlcssweb-applications

What steps do I need to take in order to load the static folder from a CSS file?

Is there a way to load the static folder from a CSS file? I attempted to import using URL(), however, it was unsuccessful. I am looking to utilize the static path in order to apply a background to an element. .input_card:checked+.check-box { backgroun ...

pythoncssdjango

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

htmlreactjsreact-dom

Ways to split images and text in list items using CSS

Can the text be formatted in a specific location on the page, separate from the image and heading? This is the HTML code I am currently using: <div class="tab-pane container fade" id="environmental"> <div class="row"> <div class="c ...

javascriptjqueryhtmlcss

The form features a "Select all" button alongside a series of checkboxes for multiple-choice options

I am facing difficulties trying to get the "Select all" and "Remove all" buttons to function properly within my form. Whenever I remove the "[]" (array) from the name attribute of the checkboxes, the JavaScript code works perfectly fine. However, since I n ...

javascripthtml

Is there a way to position the textfield so that it is next to my button?

I'm currently customizing a newsletter form using a WordPress plugin and CSS. I'm also trying to apply the same style to a search form located above the newsletter signup section. Here is the HTML output and corresponding CSS: #sidebar { fo ...

phphtmlcsswordpress-theming

What is the best way to create a triangle-shaped div using CSS styling?

Seeking assistance in creating a triangular shape using CSS within a rectangular division. Grateful for any guidance provided. ...

htmlcssstyling

Restricted to desktop and large devices: use container-fluid

Looking to create a website using the Bootstrap 4 grid system. The goal is to have the container-fluid only apply to desktop sizes, and for smaller screens than lg, to follow the standard container flow. Attempted to implement the following: @include med ...

sassbootstrap-4

Is it possible to pass multiple IDs into document.getElementById?

I am working on a form that contains 45 dropdown lists and currently, I am using the following code for validation. Is there a way to modify this code so that I can use a single function to validate all 45 dropdown lists? Below is the Function: function ...

javascripthtml

Is the JavaScript code not executing properly?

There seems to be an issue with this code as it's not displaying an unordered list of HTML elements as intended. I've written the script and HTML code using Sublime Text, but even after trying to run the script in Chrome's developer console ...

javascripthtmlscripting

The Javascript function call from the <img src="myFunction()"> is malfunctioning

I am looking to dynamically pass the URL of an image using a JavaScript function. <head> <script> function myFunction() { var str1 = "somepictureurl.png"; return str1; } </script> </head> <body> <img src="myFu ...

javascripthtmljsp

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

javascriptcssnode.jsexpress

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

cssangularsassangular-material

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css

Discovering a class within a div element using Selenium

Currently, I am attempting to utilize Selenium in Python to locate and click on the 'X' button. This action will redirect me to the next page where I can extract some crucial information. However, I am encountering difficulties in finding the ele ...

htmlpython-3.xselenium

Setting dynamic image dimensions within a div element

Is there a way to display the div width in percentage even when the image is not loaded? The image sizes are mentioned in percentage and they load dynamically, making it impossible to fix their size. How can we ensure that the div maintains the correct wid ...

htmlimagecss

Why is Google Chrome cutting off parts of my website?

Has anyone encountered the strange rendering issue in Google Chrome? Check out this bug here http://community.mediabrowser.tv/uploads/site_1/126/annoying_rendering_bug.jpg I sometimes experience it when I visit What is causing this issue? Is there a way ...

htmlcssgoogle-chrome

What could be causing my script to not execute properly?

I have reviewed my script multiple times and I am completely stumped as to why it is not running at all. Any assistance would be greatly appreciated... This is the script in question.... </head> <script type="text/javascript> $(document) ...

jqueryhtml

transitioning from font-awesome v4 to the latest version, v5

For a while now, I have been utilizing a responsive template. However, I am interested in updating its fa-module from v4 to v5. By downloading the free web package, replacing "font-awesome.min.css" with "all.min.css", and adjusting all references to the ...

htmlcssclassfont-awesomeresponsive