Troubleshoot: Border problem within nested columns in Bootstrap

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

My layout is based on the bootstrap 4 grid system, as shown in the image above. The problem I'm facing is that the border at the bottom row is misaligned. I have four nested columns in the first and second rows, but only two columns in the last row. I want the border of the last row to align with the row above it.

Please provide assistance. Thank you! Fiddle Link

<div class="container mt-3">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-7 border">
          <div class="row">
            <label for="adf_bd_nationality" class="bg-gray-light d-flex border-right  border-bottom-0 align-items-center col-7 col-form-label text-black col-form-label-sm">Registration (Tail No.)</label>
            <div class="col-5 bg-white">
              <input class="form-control" />
            </div>
          </div>
        </div>
        <div class="col-5 bg-white border border-md-left-0  ">
          <div class="row">
            <label for="adf_bd_serialNo" class="bg-gray-light d-flex border-md-right border-right border-bottom-0  border-top-0 align-items-center col-6 col-form-label text-black col-form-label-sm">Serial No.</label>
            <div class="col-6">
              <input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="row">
        <div class="col-7 border border-top-0 ">
          <div class="row">
            <label for="adf_bd_manufacturer" class="bg-gray-light d-flex border-right border-md-bottom-0 align-items-center col-7 col-form-label text-black col-form-label-sm">Manufacturer</label>
            <div class="col-5 bg-white">
              <select name="adf_bd_manufacturer" id="adf_bd_manufacturer" class="my-select form-control">
                <option value="" class="bg-black">Select</option>
                <option value="Airbus" class="bg-black">Airbus</option>
                <option value="Boeing" class="bg-black">Boeing</option>
                <option value="Bombardier" class="bg-black">Bombardier</option>
                <option value="Embraer" class="bg-black">Embraer</option>
                <option value="McDonnell Douglas" class="bg-black">McDonnell Douglas</option>
                <option value="Tupoloev" class="bg-black">Tupoloev</option>
                <option value="Cessna" class="bg-black">Cessna</option>
                <option value="Cirrus Design" class="bg-black">Cirrus Design</option>
                <option value="Diamond" class="bg-black">Diamond</option>
                <option value="Mooney" class="bg-black">Mooney</option>
                <option value="Piper" class="bg-black">Piper</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-5 bg-white border border-top-0 border-md-left-0 ">
          <div class="row">
            <label for="adf_bd_ICAO" class="bg-gray-light d-flex border border-md-right  border-bottom-0 border-md-bottom-0 border-top-0 border-left-0 align-items-center col-6 col-form-label text-black col-form-label-sm">Type ICAO</label>
            <div class="col-6 ">
              <input type="text" class="form-control text-black text-center" id="adf_bd_ICAO" name="adf_bd_ICAO" data-inputmask="'regex': '[a-zA-Z0-9]', 'repeat': 4, 'placeholder': ''" autocomplete="off" inputmode="text">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="row border border-top-0 ">
        <label for="adf_bd_engineTypes" class="bg-gray-light d-flex  border-right border-bottom-0 border-bottom align-items-center col-4 col-form-label text-black col-form-label-sm" style="">Engine Type(s)</label>
        <div class="col-8 adf_bd_engineTypesCon bg-white" style="">
          <input type="text" class="form-control text-black required " id="adf_bd_engineTypes" name="adf_bd_engineTypes" data-inputmask="'regex': '^[0-9a-zA-Z]', 'repeat': 15, 'placeholder': ''">
        </div>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

This issue arises due to the presence of multiple nested row elements inside another row, causing the Bootstrap framework to divide the nested rows into 12 columns each.

The desired outcome is to have just four columns where the content can be placed:

<div class="container mt-3">
  <div class="row border">
    <div class="col-4">
        <label for="adf_bd_nationality" class="bg-gray-light text-black">
          Registration (Tail No.)
        </label>
    </div>
    <div class="col-4 border-left">
      <input class="form-control" />
    </div>
    <div class="col-2  border-left">
      <label for="adf_bd_serialNo" class="bg-gray-light d-flex  align-items-center col-form-label text-black 
          col-form-label-sm">
      Serial No.
      </label>
    </div>
    <div class="col-2  border-left">
      <input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
    </div>  
  </div>
  
  <div class="row border">
    <div class="col-4">
        <label for="adf_bd_nationality" class="bg-gray-light text-black">
          Registration (Tail No.)
        </label>
    </div>
    <div class="col-4 border-left">
      <input class="form-control" />
    </div>
    <div class="col-2  border-left">
      <label for="adf_bd_serialNo" class="bg-gray-light d-flex  align-items-center col-form-label text-black 
          col-form-label-sm">
      Serial No.
      </label>
    </div>
    <div class="col-2  border-left">
      <input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
    </div>  
  </div>
  
  <div class="row border">
    <div class="col-4">
        <label for="adf_bd_nationality" class="bg-gray-light text-black">
          Registration (Tail No.)
        </label>
    </div>
    <div class="col-4 border-left">
      <input class="form-control" />
    </div>
    <div class="col-2  border-left">
      <label for="adf_bd_serialNo" class="bg-gray-light d-flex  align-items-center col-form-label text-black 
          col-form-label-sm">
      Serial No.
      </label>
    </div>
    <div class="col-2  border-left">
      <input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
    </div>  
  </div>
  
  <div class="row border">
    <div class="col-4">
        <label for="adf_bd_nationality" class="bg-gray-light text-black">
          Registration (Tail No.)
        </label>
    </div>
    <div class="col-8 border-left">
      The right border
    </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

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this: https://i.sstatic.net/ss3Ir.png Can this layout be achieved using columns instead of floats? <div class="clearfix"> <div class="float-left"><button class="rounded btn btn-outline ...

htmlcsstwitter-bootstrapbootstrap-4

ArrayObservable causing issue with Knockout's checked binding functionality

I am encountering an issue with my observableArray that is bound to a pair of checkboxes. Despite following the documentation, the array is not changing as expected. Special note: If your parameter resolves to an array, KnockoutJS will check the element i ...

htmlknockout.jsbootstrap-4

Displaying multiple info windows on a Google Map using React

I'm in the process of developing a Google Maps API using react-google-maps and I want to add multiple markers to display information about cities from around the world in info windows. However, when I click on one marker, all the info windows open at ...

htmlreactjsmarkerinfowindowreact-google-maps

Steps for implementing an EsLint Constraint specifically for next/link

How can I set up a linting rule to display an error if the next/link component is used for routing? I want to restrict routing to only be allowed through the default method. To resolve this issue, I included the statement "@next/next/no-html-link-for-pag ...

htmlnext.jseslinteslintrc

Function that activates traffic lights

Currently, I'm encountering errors while working on this project in Notepad. Can you help me figure out what's wrong with my code? I'm attempting to create an onload traffic light using an object array. The requirement is to implement this f ...

javascripthtmlcss

Retrieving HTML array values using jQuery

Presented below is an array of input boxes. <form> 9 <input type="checkbox" name="date[]" value="9"> 10 <input type="checkbox" name="date[]" value="10"> 11 <input type="checkbox" name="date[]" value="11"> </form> The o ...

jqueryarraysajaxhtml

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text w ...

javascripthtmlcssbootstrap-5

It's a mystery unraveling the source of CSS margins and padding

Could someone please help me analyze this webpage? I am trying to make the center of the page white up to the navigation bar, at the bottom of the page, and horizontally up to the shadows on both sides. I'm not sure where this extra padding is coming ...

htmlcsstwitter-bootstrapsass

Is there a way to create a row with 4 columns in a loop using Bootstrap 4?

I'm struggling to display 4 columns in one row within a loop. My goal is to achieve the following layout when clicking on the modal in Bootstrap 4: View Desired Layout This is what I have tried so far: <div class="modal-body"> <div cla ...

jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-4bootstrap-modal

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

htmlcsstypescriptasp.net-coreangular12

Ways to divide the header column of a bootstrap 4 table?

Currently, I am delving into the realm of frontend development and facing a challenge with designing a table. My goal is to merge multiple columns into a single column by dividing them into cells. I am aware of the bootstrap classes colspan and rowspan, ho ...

htmlbootstrap-4tablecell

Chrome's spinner fails to appear when performing a synchronous ajax request in IE9

While implementing an ajax request, I want my users to see a spinner for visual feedback. Surprisingly, the spinner works flawlessly on Firefox 13, but fails to function on Chrome and IE9 even though the ajax request takes approximately 1.2 seconds to comp ...

jquerycssgoogle-chromeinternet-explorer-9

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

Why does jQuery function properly in jsfiddle, but not in an HTML file?

I have been troubleshooting repeatedly, but I am unable to figure out why the jQuery code is not functioning as expected. Strangely enough, it works perfectly in jsfiddle! Here is the HTML code: <!doctype html> <html> <head> <meta ch ...

javascriptjqueryhtml

Unable to scroll when utilizing ng-html-bind functionality

My device specifications: $ ionic info Your system details: Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Ionic Framework Version: 1.2.4 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0-beta.20 OS: Distributor ID: LinuxMint Desc ...

javascripthtmlcssangularjsionic-framework

Arranging elements and buttons inside of components to create a cohesive design

My React application consists of two components: Open and Save. The Save component has a button labeled as saveButton. On the other hand, the Open component contains an openButton, as well as a stopButton and executeButton that are conditionally displayed ...

htmlcssreactjs

Ways to identify if the requested image is error-free (403 Forbidden)

One of my scripts loads an image from a specific source every 300 ms, but sometimes it receives a 403 Forbidden response. When this happens, the image element ends up blank. I want to find a way to verify if the image has received a valid 200 response befo ...

javascripthtml

Adding a new row to an HTML table using JavaScript

In the code snippet below, I am facing an issue with adding a row to an HTML table and inserting it into a database. I have tried using JavaScript to add the row in order to avoid postback, but so far, I have been unsuccessful. Can someone assist me in t ...

javascripthtmlasp.net

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

cssangulartypescriptanimation

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...

javascripthtmljquerycssvue.js