Bridging the space between columns using bootstrap

I'm struggling to adjust the spacing between table elements in bootstrap. There's an odd 60% gap that I can't seem to get rid of, and it seems to be related to the grid system I'm using. I've attempted using inline styling but haven't had any luck closing the gap. Any suggestions for a quick fix would be greatly appreciated!

Cheers

<div class="container">
   <table class="table table-striped">
      <tbody>
         <tr>
            <td colspan="1" >
               <form class="well form-horizontal">
                  <fieldset>
                     <div class="form-group">
                        <label class="col-md-4 control-label" style="width: 100%;">Which ArtSound Partner are you?</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
                              <select class="selectpicker form-control">
                                 <option>ANU School of Music</option>
                                 <option>Arts Society of Canberra</option>
                                 <option>Australian Festival of Chamber Music</option>
                                 <option>ANU School of Music</option>
                                 <option>ANU School of Music</option>
                                 <option>ANU School of Music</option>
                                 <option>ANU School of Music</option>
                              </select>
                           </div>
                        </div>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-4 control-label">Not an ArtSound partner?</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="eventname" name="eventname" placeholder="Event name
                          " class="form-control" required="true" value="" type="text">

                        </div>

                        <input type="checkbox" name="check" checked> <span class="label-text">Optional: Please send me information about becoming an arts partner</span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-4 control-label">Name of your event</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="eventname1" name="eventname1" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>




                     <div class="form-group">
                        <label class="col-md-4 control-label">Please describe your event</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><textarea id="city" name="city" placeholder="Please describe your event" class="form-control" required="true" value="" type="text" rows="5" onkeyup="countChar(this)"></textarea></div>
                           <span style="font-size: 12px;">Characters left: <span id="charNum">250</span></span>
                        </div>
                     </div>




              <div class="form-group">
                        <label class="col-md-4 control-label">Pick a date or type one in</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>



                            <input id="postcode" name="daterange" placeholder="Pick a date" class="form-control" required="true" value="" type="text">

                            <script>
          $(function() {
            $('input[name="daterange"]').daterangepicker({
             opens: 'left'
           }, function(start, end, label) {
            -console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
             });
                  });
            </script>



                           </div>
                        </div>
                     </div>






                     <div class="form-group">
                        <label class="col-md-4 control-label">Pick a time</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="00:00" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>



                  </fieldset>
               </form>
            </td>
            <td colspan="1">
               <form class="well form-horizontal">
                  <fieldset>

                    <div class="form-group">
                        <label class="col-md-12 control-label">Please enter your event's address</label>
                        <div class="col-md-12 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><textarea id="city" name="city" placeholder="Please describe your event" class="form-control" required="true" value="" type="text" rows="5" onkeyup="countChar(this)"></textarea></div>
                           <span style="font-size: 12px;">Characters left: <span id="charNum">250</span></span>
                        </div>
                     </div>






                     <div class="form-group">
                        <label class="col-md-4 control-label">Web address</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="http://" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-4 control-label">Email</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a505552544957534e527a5d575b535614595557">[email protected]</a>" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>




                     </div>

                  </fieldset>
               </form>
            </td>
         </tr>
      </tbody>
   </table>
</div>
javascripthtmlcssbootstrap-4bootstrap-modal

Answer №1

Not entirely certain about the issue you're facing, but based on your code, you could attempt the following:

  1. Utilize the row class as a parent for every col-*-* element, similar to how you use the form-group class in your current situation.
  2. You may want to consider adding the no-gutters class to the row as well, which will eliminate the padding from each col-*-* class.
  3. Include table-sm to reduce the padding of rows within your table.

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

Is it possible to make the background of the HTML Embed object transparent instead of grey?

I am currently utilizing Firefox along with an open-source plugin for video playback. The video is adjusted to fit the available space as defined by the width and height of the embed object, but occasionally a slight grey border appears on the right or bot ...

htmlcssfirefoxembedbrowser-plugin

How to dynamically update a variable by passing it inside an array in Vue.js

I am exploring ways to update variables dynamically in order to avoid using excessive switch statements. My initial approach was: this.variable1 = 2 this.variable2 = 3 var array1 = [this.variable1, this.variable2] And then later on: array1[0] = 25 arra ...

javascriptvue.jsvuejs2

How can I ensure that the AppBar background color matches the color of the navigation bar?

Having trouble changing the background color of the <AppBar> in my project. Using the Container component to set a maximum screen size, but encountering issues when the screen exceeds this limit. The AppBar background color appears as expected while ...

javascriptcssreactjsmaterial-ui

Tips for adjusting the width of Material UI TextField within a Table

I am utilizing a Material UI Table. This is how I construct it: tableValues.map((curRow, row) => { tableRows.push( <TableRow key={this.state.key + "_row_" + row}> {curRow.map((cellContent, col) => { let adHocProps ...

cssreactjsmaterial-ui

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Currently, I am facing an issue while trying to set up jest and nodemon for my nodejs project. My development environment includes vscode, npm version 6.13.7, and node version 13.8.0. Whenever I try to install nodemon via the command line, the console disp ...

javascriptnode.jsnpmjestjsweb-development-server

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

jquerycss

Opacity transition in CSS does not function properly on a sibling selector when hovering over an element

I have created a responsive menu where the list items after the 4th element are set to display:none; opacity:0 on mobile devices. The 4th element is an icon and when you hover over it, the hidden menu items appear as a block list below using li:nth-child( ...

csscss-selectorscss-transitionsopacitysiblings

Tips for adjusting the color of a link in the Navbar after being clicked

Upon clicking a link in the Navbar, I want to change its color (Link A) and have it return to default if I navigate to another link (Link B). links.forEach( a=>{ //I want all other links to revert back to default color a.onclick = () => { ...

javascripthtmlcss

How can I show the post JSON response that was retrieved in ReactJS on the same form component that was used to submit the value?

Thank you for your assistance in advance. I am currently developing a web crawler that will operate in the following steps: The user inputs the seed URL (front-end) The user clicks the submit button (front-end) The seed URL is processed by the backend usi ...

javascriptnode.jsreactjsexpress

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

htmlcssbutton

Adjust the position of divs in a row when there is overflow

I have a website with dynamic div boxes, and I want to organize them into rows with 4 boxes each using Bootstrap. It's working fine, but the issue arises when the text in a box is too long and creates a new line. Instead of moving down to accommodate ...

htmlcsstwitter-bootstrap

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

javascripthtmljquery

Speed of scrolling on a biquadratic Bezier curve

I recently came across a fascinating website called that showcases a unique scrolling behavior. It gives the illusion of moving between slides (screens) with snappy scrolling, when in reality, the website actually scrolls continuously. The transitions bet ...

javascriptmathscrollmagic

Are there any discussions underway about updating JSON standards to officially permit unquoted property names?

Technically speaking, the following JSON is considered invalid: { color: "blue", size: 14 } This is because according to the specification, property names like "color" and "size" should be enclosed in quotes, like this: { "color": "blue", "size" ...

javascriptjsonstandards

Transferring an image to an internet-based storage system/database through XMLHttpRequest (XHR)

After reading several posts on similar topics, I have yet to find the specific information I need. Currently, I am working on a web application (utilizing HTML5 and Javascript) that includes a photo-taking feature. I am looking to then save these photos t ...

javascriptjsonhtmlimage-uploading

Steps for uploading a file in PHP without a form using the move_uploaded_file function

After successfully developing a one-to-one chat feature using ajax and php, I am facing an issue with uploading files. Specifically, I am trying to use the move_uploaded_file function in php but encountering problems. I have the file variable as doc = docu ...

javascriptphpajax

Tips for optimizing the rendering speed of Vuetify's v-for loop

Hi, I'm new to Vue.js and Vuetify. I am trying to display 400 columns and 6 rows with column IDs (cid) and row IDs (rid), but the rendering speed is slow. Can anyone help me improve the performance of this loop? Thank you in advance! https://i.sstatic ...

htmlvue.jsfor-loopvuetify.jsv-for

Designing a web application with Angular2

As a newcomer to Angular2, I have recently started working on creating a simple hello world application. I have come across the concept of Modules and Components in Angular2. My main source of confusion lies in how to properly design an Angular2 applicat ...

javascriptangulartypescript

Error: Property 'barcodeScanner' is not readable

Currently, I am utilizing barcodescanner.js for scanning QR codes. I have successfully downloaded and linked the CaptureActivity android library to my project. However, when attempting to execute the following code: window.plugins.barcodeScanner.scan(sca ...

javascriptandroidjquery-mobilecordova

Why does Cloudinary fail to delete the tmp folder it creates after finishing the upload process?

Recently, I've been working on implementing an upload Post feature for my app. The process involves submitting a file from the frontend, sending it to the backend, and then uploading it to Cloudinary's cloud servers. However, before the upload to ...

javascriptnode.jsreactjsexpresscloudinary