Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Hey there, I have a specific requirement that I need help with. Check out the image here.

I want to enable the LCM information box when the LCM checkbox is checked. Below is my code:

<div class="panel-body ">
          
          <div class="col-md-4 col-sm-4 col-xs-12 "></div>
           <div class="col-md-4 col-sm-4 col-xs-12 ">
              <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Functional"/>
<label>Functional</label>
            </div>

           ....(more code here)....

          </div>
        </div>

Unfortunately, the alignment of the code is not correct. The rows in the columns are not being properly combined or merged, resulting in a messy layout.

I would appreciate any assistance in achieving the desired output.

javascriptcssbootstrap-4

Answer №1

Here is a simple structure that can be customized using padding and margin to achieve your desired appearance:

$(document).ready(function() {
  $("#validationTypeLCM").click(function() {
    if (this.checked) {
      $("#box3").addClass("boxShow");
      $("#box3").removeClass("boxHide");
    } else {
      $("#box3").addClass("boxHide");
      $("#box3").removeClass("boxShow");
    }
  });
});
.myBorder {
  border: 1px solid #000
}

.box1Spacing {
  margin-top: 20px;
}

.boxHide {
  display: none;
}

.boxShow {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row">

  <!-- Box 1 -->
  <div class="col-md-5 col-sm-4 col-xs-12 ">
    <div class='box1Spacing'>
      <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Certification" />
      <label style="font-weight:bold">Certification</label>
    </div>
    <div class='box1Spacing'>
      <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="System verification" />
      <label style="font-weight:bold">System verification</label>
    </div>
    <div class='box1Spacing'>
      <select class="form-control" id="lcmDeployment">
        <option value="">Please Select an option</option>
        <option value="With Orchestration"> With Orchestration</option>
        <option value="Without Orchestration">Without Orchestration</option>
      </select>
    </div>
  </div>

  <!-- Box 2 -->
  <div class="col-md-2 col-sm-3 col-xs-12 ">
    <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Functional" />
    <label>Functional</label> <br/>
    <input type="checkbox" id="validationTypeLCM" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="LCM" />
    <label>LCM</label> <br/>
    <input type="checkbox" id="validationTypePerformance" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Performance" />
    <label>Performance</label> <br/>
    <input type="checkbox" id="validationTypeResilience" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Resilience" />
    <label>Resilience</label> <br/>
    <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Security" />
    <label>Security</label> <br/>
  </div>

  <!-- Box 3 -->
  <div id='box3' class="col-md-5 col-sm-5 col-xs-12 boxHide ">
    <b>LCM Information</b>
    <div class='row'>
      <div class="col-md-6 col-sm-6 col-xs-12 myBorder">
        <label class="control-label">LCM Deployment</label>
        <select class="form-control" id="lcmDeployment">
          <option value="">Please Select an option</option>
          <option value="With Orchestration"> With Orchestration</option>
          <option value="Without Orchestration">Without Orchestration</option>
        </select>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 myBorder">
        <label class="control-label">Workflow Type</label>
        <select class="form-control" id="workflowType">
          <option value="">Please Select an option</option>
          <option value="Legacy">Legacy(Hot)</option>
          <option value="Tosca">Tosca</option>
        </select>
      </div>
    </div>
    <div class='row'>
      <div class="col-sm-6 col-xs-12 ">
        <label class="control-label">Verified Workflows</label>
        <input type="text" class="form-control" id="verifiedWorkflow" />
      </div>
      <div class="col-sm-6 col-xs-12 ">
        <label class="control-label">Workflow RPM-Package</label>
        <input type="text" class="form-control" id="workflowRPMPackage" />
      </div>
    </div>
  </div>

</div>

Update: considering the feedback provided by the questioner below

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

Top method to create a timer in React/Redux for automatically refreshing authentication tokens

I am implementing an access refresh jwt authentication flow and need the client to automatically send a refresh token after 10 minutes of receiving the access token. I also want to ensure that if the user's device is idle for an hour, a new access tok ...

javascriptreactjsexpressreduxjwt

Dividing ReactJS into different assemblies

I have a flexible .NET application that utilizes plugins to load controllers, views, and components from different assemblies. I am interested in learning React (completely new to me) and I have a question. Can React split its components into separate as ...

javascriptc#asp.netreactjsasp.net-core

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

Styling of global checkbox focus in Material UI (applied globally, not locally)

Currently experimenting with customizing the styling of a checkbox when it is in focus globally using Material-UI (react). At present, only default and hover styles are taking effect: MuiCheckbox: { colorSecondary: { color: 'green', & ...

javascriptreactjsmaterial-ui

Utilizing absolute path in Typescript: A comprehensive guide

I am currently working on a project written in Typescript running on NodeJS. Within the project, I have been using relative paths to import modules, but as the project grows, this approach is becoming messy. Therefore, I am looking to convert these relativ ...

javascriptnode.jstypescriptimporttsconfig

Issues with APIs surfaced following the transition from DataGridPro to DataGridPremium

In my current project, we initially implemented the MUI X DataGrid but later switched to DataGridPro due to business requirements. Recently, we upgraded our plan from Pro to Premium which has caused some unexpected issues in our existing code. I am using " ...

javascriptreactjsnext.jsmaterial-uimui-x-data-grid

Click the submit button to display a div element without having to refresh the page

Is it possible to display a spinner for a couple of seconds before the page reloads upon submitting a form? <form class="ready" action="https://link.com" method="post"> <input name="test" type="submit" class="click" value="order"/> </form&g ...

javascriptjqueryformssubmitspinner

conceal elements using the <option> class隐藏

Although it seems like a simple task, I'm struggling to make it work. I created a form where the user can select a month from a list using the tags: <select> <option> When the selection is changed, the class .gone from the day SELECT is ...

javascripthtmlcssformshtml-select

An error has occurred with the Firefox Addon: the module `path` cannot be located within the resource://gre/modules/commonjs/http.js

Currently developing a Firefox add-on on Windows10 with node v5.8.0 and npm v3.5.3, using Firefox v.45.0 The issue arises from the following line of code: var path = require("path"); The error message reads: Message: Module `http` is not found at resou ...

javascriptnode.jsnpmfirefox-addon

Spacing between navigation items

After working on my navigation menu locally, I noticed that when I uploaded it online, some changes didn't take effect on Chrome and the design on Firefox was different from what I intended. I'm not sure what I might be doing wrong here. Here is ...

htmlcssnavigation

Create a drag-and-drop interface and link elements together using a custom JavaScript library

Seeking a solution or Javascript library to create a scientific modeling application, similar to flowchart software such as Visio. The ability to add elements and connect them by clicking and dragging is essential. https://i.stack.imgur.com/vSZpB.png The ...

javascriptvue.jsfabricjspaperjs

The process of incorporating a function into a website's source code using a web driver

In the source code, there is a button with an onclick event to change the paragraph content. However, the code provided does not seem to be functioning properly. ((JavascriptExecutor) this) .executeScript("function test123() { y=docume ...

javascriptseleniumselenium-webdriver

What could be causing some Fontawesome icons to not display properly?

My index.html is set up correctly with my kit, but I'm having some issues. <script src="https://kit.fontawesome.com/a*******5.js" crossorigin="anonymous"></script> While some icons are showing up just fine, others are ...

htmlcssicons

How to add an OnClick listener to a cell element in a table built with the Tan

I am currently working on a project using React and trying to implement a table. I want to show an alert when a header cell in the table is clicked, displaying some information. However, I have been struggling to find assistance on adding a click listener ...

javascriptreactjsnext.jstanstackreact-query

Is it possible to send an AJAX request to a Django view that might result in a redirect?

Query I encountered an issue while attempting to access a specific Django view through AJAX. This particular view redirects users if they haven't authorized the site with Google. I suspect the problem arises from redirecting "within" a view requested ...

javascriptpythonajaxdjangoredirect

What is the process for configuring the injector in my application?

https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js I am facing an issue with the above link as it defines an external js file that I am not familiar with the injector to angular-1.0.0rc9.js. Due to this, my app is not running in the browser. Here is ...

javascriptangularjs

Issue with Angular 10: Modal window fails to open upon second click

Encountering an issue with a Modal window overlapping the navigation bar and overlay due to a third-party bundle.js adding dynamic classes and divs under the parent-container. The problem arises from a fixed positioning of one of the classes which causes t ...

jqueryangularbootstrap-4

AngularJs Controller with explicit inline annotation

I usually inject dependencies using inline annotations like this angular.module('app') .controller('SampleController',['$scope','ngDependacy',sampleController]); function sampleController($scope,ngDependacy) { ...

javascriptangularjsdependency-injection

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

javascripthtmlcsstwitter-bootstrap

Using prevState in setState is not allowed by TypeScript

Currently, I am tackling the complexities of learning TypeScipt and have hit a roadblock where TS is preventing me from progressing further. To give some context, I have defined my interfaces as follows: export interface Test { id: number; date: Date; ...

javascriptreactjstypescript