Increase the Bootstrap rowspan and eliminate any excess spacing between rows in order to improve

I need help adding a container to my form that is approximately 4 bootstrap rows high. The issue I am facing is when I place the container in the second column of the first row, there is unwanted white space appearing under the first column of the same row. Is there any way to remove this white space without dividing into two col-6 columns (as that solution won't work on mobile view)? Check out this JSFiddle example.

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input class="form-control" placeholder="Name" name="Name" required>
    </div>
    <div class="col-md-2"></div>
    <div class="col-sm-4">
        <div style="width: 100% ; height: 250px; background-color: black;">
        </div>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>

<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>

I'm looking to get rid of the marked spaces as shown in this https://i.sstatic.net/2vJ57.jpg image.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Include the following CSS style block for medium-sized screens and larger...

@media screen and (min-width:768px){
  .toggleDiv{ position:absolute; right:0; }
}

See the code snippet below:

@media screen and (min-width:768px) {
  .toggleDiv {
    position: absolute;
    right: 0;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input class="form-control" placeholder="Name" name="Name" required>
  </div>
  <div class="col-md-2"></div>
  <div class="col-sm-4 toggleDiv">
    <div style="width: 100% ; height: 250px; background-color: black;">
    </div>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
</div>

<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
  </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 is causing the modal to fail to open when the button is clicked?

My HTML includes a modal that isn't functioning correctly. <!doctype html> <html lang="en"> <head> <title>Rooms</title> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlbootstrap-5

Fuzzy division following a CSS transformation/animation

I have been working on a content slider, using the guidelines from this demonstration However, I have encountered an issue where my content, which consists of a few divs, appears slightly blurry after the CSS transition completes. This problem only seems ...

csscss-transitionscss-transforms

Guide on converting AS3 to HTML5 while incorporating external AS filesAlternatively: Steps for transforming AS

I've been given the challenging task of transforming a large and complex Flash project into html5 and javaScript. The main stumbling block I'm facing is its heavy reliance on external .as files, leaving me uncertain about the best approach. Most ...

javascripthtmlactionscript-3flash

Centering an image and text both vertically and horizontally within a container div

I am currently working on creating a series of thumbnail-style divs with fixed dimensions. These divs will contain an image and a title text, both of which need to be centered vertically and horizontally within the container div. While I have successfully ...

htmlcss

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Can the value of the title attribute for <i> be toggled? For example, if the title is set to <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> within <div class="postoption"> I would like to toggle both the title te ...

javascriptjquerycssfont-awesome

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for. Is there a way for me to set up a to-do list and input data before actually ...

javascripthtmlcsslocal-storage

What is a more dynamic way to assign attributes to elements without directly embedding them in the HTML code?

For my unique scenario, my goal is to assign the attribute target = "_blank" to all <a> elements within a specific div in order to open them in new tabs. This concept could potentially be applied to any element and any attribute. I am curious if the ...

javascriptjqueryhtmldom

AngularJS: Error - Undefined value instead of a function argument

Recently, I decided to dive into learning AngularJs and took my first steps by setting up a view, service file, and controller file separately. Below is an outline of how I went about it: <html ng-app="myApp"> <head> <script src="https://aj ...

javascriptangularjshtmlangularjs-serviceangularjs-controller

Is it possible to define a multiplication margin using css?

I am trying to place a box in the center of a container, but I am unable to set a static height for the parent element as it may change. This is causing issues with aligning the box perfectly in the middle of the page. Any assistance would be greatly app ...

htmlcssangularsasscalc

How to showcase a div outside of its container with a responsive layout

I am currently facing an issue where I need some floated elements to be displayed outside of a container on a Drupal page using an Omega-based theme. My current page structure is as follows: <h2>Some header text</h2> <div class="grid-12 reg ...

cssresponsive-designoverflow

Is it possible to duplicate content from one div to another?

With over 90 divs, each containing an image or icon, I am looking for a way to display the clicked image in another div. I am not very familiar with JS yet, so I would appreciate a simple example using HTML5, Ajax, and js. EDIT: Just to clarify, the desti ...

javascriptjqueryhtml

Align the elements of the contact form to the opposite sides

I am experiencing an issue with my contact form where all elements are flowing horizontally instead of vertically. I would like everything to be floated to the left and aligned vertically, except for the "message" box and submit button which should be on t ...

csscss-floatcontact-form

JSFiddle showcasing the Bootstrap grid system

I'm having trouble implementing bootstrap's grid system on jsfiddle. Check it out on jsfiddle I've tried using the example from the bootstrap documentation: <div class="row"> <div class="col-md-1">.col-md-1</div> ...

csstwitter-bootstrapgrid-layout

Capture microphone and audio in a SIP call with sip.js

Greetings Stack Overflow community! I am in need of assistance with a project involving sip.js and VoIP for making real phone calls. The Objective I aim to enable users to record audio from both parties during a call and save the data on a server (either ...

javascriptjqueryhtmlaudiosip

Automatically insert a page break after every set of n items to make printing easier

When printing a web page with a list of items, sometimes the items end up appearing garbled across multiple pages. Is there a method to add a CSS class definition after a certain number of items have been added on a page? The CSS in question would be asso ...

.nethtmlcssprintingrepeater

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

jqueryhtmlcss

Determine the body's height by adding the heights of the header and footer

In my design, there is a header with a height of 8rem; .header { top: 0; left: 0; height: 8rem; } Following that, there is a footer with a height of 5rem; footer { width:100%; height: 5rem; } I am attempting to calculate the heig ...

css

"Customizable rectangular container with jagged edges created with Scalable Vector Graphics

Currently, I am undertaking a small project that involves creating a box with rough edges around some text. To achieve this effect, I am utilizing an SVG with unique edges similar to the design found at this link: (except mine is in SVG format). My goal ...

javascripthtmlcsssvg

Parsing CSV files using AngularJS

I am currently developing a CSV file parser using node and Angular. When a user uploads a CSV file, it is processed on the server side with node and the csv-parse library. This results in an array of objects based on the input CSV file. On the Angular si ...

htmlangularjsnode.jsdata-manipulation

Exploring the possibilities of NodeJs by analyzing an HTML form

I'm facing an issue while evaluating an HTML Form using NodeJs and Express. Here's my JavaScript Code My aim is to manage HTML Forms in NodeJs using Express. const express = require('express'); const http = require('http'); ...

htmlnode.jsexpress