Ways to correct misaligned Bootstrap column grid

I'm currently working on a form using Bootstrap 4, but I'm facing an issue where the columns are not aligning properly, causing unwanted space and reducing the size of the input boxes.

Despite trying different Bootstrap CSS CDN codes in addition to the downloaded ones, the problem persists.

<!------ Begin Description Section ------->
<div id="Description_details" class="container">
<div class="row">
  <div class="step body current" id="trade-steps-p-2" role="tabpanel" aria-labelledby="" aria-hidden="false"
    style="display: block;">
    <fieldset class="trade">
      <legend>What are you Buying?</legend>
      <div class="form-group col-md-6 required" aria-required="true">
        <label for="ContractName">Give Your Trade a Name
          <a href="#" data-toggle="popover" data-trigger="hover" data-content=" data-original-title="" title="">
              <i class=" fa fa-question-circle"></i>
          </a>
        </label>
        <input name="data[Contract][name]" class="form-control" maxlength="50" type="text" id="ContractName"
          required="required" aria-required="true" aria-invalid="false">
      </div>

      <div class="form-group col-md-6 required" aria-required="true">
        <label for="">Industry Classification</label>
        <select name="data[Contract][industry]" class="form-control" id="" required="required" aria-required="true"
          aria-invalid="false">
          <option value="GENERAL_GOODS_SERVICES" selected="selected">General Goods &amp; Services</option>
          <option value="AGRICULTURE_LIVESTOCK_GAME">Agriculture, Livestock &amp; Game</option>
          <option value="ART_ANTIQUES_COLLECTIBLES">Art, Antiques &amp; Collectibles</option>
          <option value="BUSINESS_SALE_BROKING">Business Sale &amp; Broking</option>
          <option value="VEHICLES_WATERCRAFT">Cars, Bikes &amp; Watercraft</option>
          <option value="CONSTRUCTION">Construction</option>
        </select>
      </div>
  </div>
</div>

To ensure that the input areas align as col-md-6 on the left and right respectively.

htmlcssbootstrap-4

Answer №1

Adjust the margin specifically for this class

. col-md-6 {
 margin: 5px !important;
}

Fingers crossed that this solves the issue.

Answer №2

The input field isn't fitting the row because you're using col-md-6. Consider using col-lg-12 or col-md-12 instead. For more information on how the grid system works, refer to the Bootstrap 4 grid system documentation.

Answer №3

One way to utilize the full width is by using w-100 in the code. A helpful suggestion is to always begin designing for smaller screens initially, like using col-12. As the screen size increases, you can adjust to have side-by-side elements with col-md-6 for both.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!------ Begin Description Section ------->
<div id="Description_details" class="container">
  <div class="row">
    <div class="step body current w-100" id="trade-steps-p-2" role="tabpanel" aria-labelledby="" aria-hidden="false" style="display: block;">
      <fieldset class="trade">
        <legend>What are you Buying?</legend>
        <div class="row">
          <div class="form-group col-12 col-md-6 required" aria-required="true">
            <label for="ContractName">Give Your Trade a Name
          <a href="#" data-toggle="popover" data-trigger="hover" data-content=" data-original-title="" title="">
              <i class=" fa fa-question-circle"></i>
          </a>
        </label>
            <input name="data[Contract][name]" class="form-control" maxlength="50" type="text" id="ContractName" required="required" aria-required="true" aria-invalid="false">
          </div>

          <div class="form-group col-12 col-md-6 required" aria-required="true">
            <label for="">Industry Classification</label>
            <select name="data[Contract][industry]" class="form-control" id="" required="required" aria-required="true" aria-invalid="false">
              <option value="GENERAL_GOODS_SERVICES" selected="selected">General Goods &amp; Services</option>
              <option value="AGRICULTURE_LIVESTOCK_GAME">Agriculture, Livestock &amp; Game</option>
              <option value="ART_ANTIQUES_COLLECTIBLES">Art, Antiques &amp; Collectibles</option>
              <option value="BUSINESS_SALE_BROKING">Business Sale &amp; Broking</option>
              <option value="VEHICLES_WATERCRAFT">Cars, Bikes &amp; Watercraft</option>
              <option value="CONSTRUCTION">Construction</option>
            </select>
          </div>
        </div>
    </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

What could be causing the issue with my Angular integration with Jira Issue Collector to not function properly?

Looking to link the Jira issue collector with an Angular application I attempted something along the lines of Component.ts import { Component, OnInit } from '@angular/core'; import * as jQuery from 'jquery'; declare global { inter ...

javascripthtmlangularjiraintegration

What is causing the animate callback to not properly wait for the completion of the animations?

Both animations are triggered simultaneously (sometimes even multiple times).... <div id="home-bt" class="button"></div> <div id="about-bt" class="button"></div> <div id="beauty-bt" class="button"></div> <div id="pam ...

javascriptjqueryhtmlcss

Extract particular information from the output of a web crawl

My task involves extracting specific parts of an HTML page and saving them into a CSV file, then repeating the process for the next set. I struggle with using regex to achieve this. <h1>Member Information</h1> <h2>Company Name</h2&g ...

pythonhtmlweb-scrapingbeautifulsoup

Enhancing the mobile menu with a feature that allows users to easily close the

I am currently designing a mobile menu for a website that I created using Wordpress with the Divi Theme. When the user clicks on a "hamburger icon", it triggers a fullscreen menu to open: mobile menu If you tap on "Termine", it will reveal a submenu: mo ...

javascriptcsswordpressmobilemenu

Looking for a way to connect a background image in Vue CLI?

When running the code below, I encounter an issue. The code runs properly but the images are not displaying and instead showing the URL as unknown. How can I fix this problem? The images definitely exist. <template> <div class="slider">< ...

javascripthtmlcssvue.jswebpack

Tips for decreasing the space between elements in flexbox using justify-content: space-between

I'm in the process of creating a footer for my website and I've decided to utilize flexbox for the layout. Below is the CSS code I am using for my footer: .footer { display: flex; flex-direction: row; align-items: center; justify-content ...

htmlcssflexbox

Strip certain tags from HTML without including iframes

Removing specific tags from HTML can be tricky, especially when working with PHP and JavaScript. One approach is to fetch an HTML page in a PHP file using curl and getJSON, storing the result in a .js file. However, this method may encounter issues with mu ...

phpjavascriptjqueryhtmlregex

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

htmlcss

How come I'm unable to showcase the inventory of items to the customer even though they are saved in the database and visible in the Network tab on the console?

Basically, my goal is to showcase products on the client side. I am using Angular 12 with .NET 5 for the backend. Although I am fetching products from the product's controller, they are not visible to me. However, I can see the "welcome" title and I k ...

htmlangulartypescriptangular-fullstack

Troubleshooting: Why Isn't My 3D Navigation CSS3 Rotate Transform

I am currently facing an issue while creating a 3D navigation bar. One of my CSS rules is not functioning as expected, despite having similar precedence to another rule that is working properly. The problematic rule is: #main-navbar.hover-home .bottom li ...

jqueryhtmlcss

Incorporating PHP into Dynamic Variables

I'm curious about how PHP coding can be utilized in PHP variables. Let's say, for instance, I wish to achieve something like: $Start = " IF($lala == "0"){ echo '"; $End = " '; }"; and be able to utilize it as: echo ''.$star ...

phphtml

What could be the reason for my flex items not shrinking when the browser window size is decreased?

Here is the CSS code for the header component using flexbox: .header { display: flex; flex-direction: row; justify-content: space-between; padding: 15px 20px; background-color: #ffffff; position: sticky; top: 0; z-index: ...

cssreactjsflexboxmaterial-ui

Creating a default homepage across various HTML files using Google Apps Script and deploying it as a WebApp

Is there a way to set a default main page on multiple HTML and GS files in Google AppScript? I plan to publish it as a Web App. Have you attempted using the doGet function? ...

javascripthtmlcssgoogle-apps-script

How come my label and input are showing up in my navigation bar?

For my assignment, I am designing a website layout and facing an issue where the text appears behind the navigation bar instead of below it. I have tried adjusting the margin-bottom to 50px with important tags and setting the nav bar as static. Despite tr ...

htmlcss

Tips for creating a Calculator with AngularJS

I am encountering issues while trying to develop a calculator using AngularJS. Below is the HTML code I have written: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-com ...

javascripthtmlangularjs

Can I access properties from the index.html file within the Vue.js mount element?

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="widt ...

javascripthtmlcssvue.jscomponents

How to successfully implement ng-show with Html5's <dialog> tags

It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...

angularjshtmldialog

The Vue component appears to be missing from the HTML code

I recently began learning Vue.js in school, and for my first assignment I need to print a h2 from a Vue component. However, I am having trouble getting it to work. Below is the code for the Vue component that I have created. var app = new Vue({ ...

javascripthtmlvue.js

"Dragging and dropping may not always perfectly align with the position of the droppable div that is

When attempting to drag and drop three images into a droppable div, I encountered an issue where the images were not perfectly positioned within the div. This problem seemed to be related to the positioning of the droppable div itself. Specifically, when s ...

jqueryhtmlcsscss-positiondrag

What is the best way to achieve a set number of columns at certain breakpoints?

Is there a way to implement the following layout using Bootstrap 4? Displaying 4 columns on a large breakpoint; 3 columns on a medium breakpoint; and 1 column on a small breakpoint. Below is my current code snippet: <html> <head> ...

bootstrap-4