Bridging the space between two divs with Bootstrap 4

<div class="row">
  <div class="input-group col-md-6">
    <div class="form-group ">
      <asp:Label runat="server" ID="Label1" ClientIDMode="Static" Style="margin-left:15px" Text="GL Code" Font-Size="20px" Class="text-bold lblcaption"></asp:Label>
      <asp:TextBox runat="server" Style="margin-left:15px" ID="DrpIncomeCode" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" id="btnincode" style="font-size:20px; width:70px; height:36px" runat="server" clientidmode="Static">Search</button>
      </div>
    </div>
  </div>
  <div class=" col-md-6">
    <div class="form-group">
      <asp:Label runat="server" ID="Label2" ClientIDMode="Static" Text="GL Description" Font-Size="20px" Class="text-bold lblcaption"></asp:Label>
      <asp:TextBox runat="server" ID="txtIncomeDesc" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
    </div>
  </div>
</div>

View the attached image

Please ensure that the gap is closed.

htmlcssbootstrap-4

Answer №1

To eliminate the space between the columns, you can apply the .no-gutters class to your .row element: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

If you wish to maintain the items in the grid system, consider using padding-left instead of margin-left on your first column.

.row .form-group:first-child {
  padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
  <div class="form-group col-6">
    <label class="font-weight-bold">GL Code</label>
    <div class="input-group">
      <input class="form-control" />
      <button class="btn btn-outline-secondary">Search</button>
    </div>
  </div>
  <div class="form-group col-6">
    <label class="font-weight-bold">GL Description</label>
    <input class="form-control">
  </div>
</div>

I trust this information is beneficial to you.

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

How can I implement the Wordpress delete() function to remove a row from a table when a link is clicked?

I have a form on my site that collects data and stores it in the WordPress database. The information is then displayed on the same page in a table. Each row in the table has an "Action" column with a "Delete" link. My goal is to allow users to click the " ...

phphtmlsqldatabasewordpress

Is it possible for webkit CSS resize to not function properly when applied to a canvas element that is

Consider this HTML and CSS code snippet: #box { width: 100px; height: 100px; overflow: hidden; resize: both; border: 1px solid black; } #content { width: 100%; height: 100%; } <div id="box"> <canvas id="content"> ...

htmlcsshtml5-canvaswebkit

In AngularJS, create a fresh window

I am struggling with a seemingly simple issue that I just can't figure out... Here's the scenario: I have a link set up to open a non-angular popup using onclick: <a href="page.html" ng-click="popitup('page.html')">Page</a> ...

javascripthtmlangularjs

Bootstrap - A collapsed navigation button that remains fixed without the rest of the navbar

I'm currently working on a responsive drag and drop game that utilizes Bootstrap and jQuery UI. Within the game, I have implemented a collapsible navbar at the top of the page. To optimize space for buttons at the bottom, I am looking to hide the nav ...

jqueryhtmlcsstwitter-bootstrap

Switching the input to LTR changes the overall direction to LTR while maintaining the RTL placeholder

The text input is currently set to be RTL, including both the placeholder and the actual input. The settings for this were done elsewhere. My question is how can I modify it so that only the input changes to LTR, while the placeholder remains RTL. For exa ...

htmlplaceholder

What is the best way to rearrange Bootstrap columns for mobile devices?

I have 4 columns displayed like this on desktop, and I want them to rearrange to look like the following on mobile. Do I need custom CSS for this? (I can't post images yet, so here is the link to the image: https://i.sstatic.net/b0gUZ.jpg I've ...

cssbootstrap-4less

Retrieve CSS content from a file hosted on the local server

Is it feasible to use a locally hosted CSS file for styling a website managed by a server-based CMS? I am interested in utilizing SASS for local CSS development while retrieving the HTML content from a centrally hosted CMS server. ...

htmlcss

Press on the div to reveal its content at the clicked position

Hello, I have a query that I need help with. I currently have a basic table with buttons in columns that act as filters. When you click on one of these buttons, it opens up a form. https://i.sstatic.net/nuEpq.png What I am trying to achieve is to make t ...

javascriptjquerycssbootstrap-4

Error: $ is not defined when the jquery.js script is placed at the bottom of the HTML document

My current project has all JS files referenced in the footer for faster page loading. This includes the Jquery file link. However, I am encountering an "Uncaught ReferenceError" which I believe is due to Jquery not being defined before my script is called: ...

jqueryhtmldom

Switch the header from left to right movement for mobile devices

I am dealing with two headers in my layout <section> <header class="col-lg-9"> <!-- some content --> </header> <header class="col-lg-3"> <!-- some content --> </header> </section ...

javascripthtmlcsstwitter-bootstrap

How can I make the item's image field optional using HTML and CSS?

I am currently working on a project for an e-marketplace. In my database, I have set the ImageField as optional. However, I am facing difficulty in making it optional on the HTML page in the code snippet below: <div class="mt-6 px-6 py-12 bg-gray ...

htmlcss

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

htmlcsscss-position

Are there any alternative approaches to handling frequent database updates in web development aside from using Websockets/AJAX for coding?

Currently, I'm in the process of developing an HTML and Javascript game and looking to implement a feature that displays the player's gold balance on the screen. The goal is to have this balance decrement by 1 every time the player clicks on a sp ...

javascripthtmlsqlajaxwebsocket

Positioning Alignment for a CSS Layout with Two Columns

I am trying to achieve a specific layout using CSS. I want the signature to align with the bottom of the other boxes in the design. The challenge is that either box can have different amounts of content, and the signature should always align with the lowes ...

htmlcss

Adjust Image Crop on Bootstrap Carousel as Browser Width Shrinks

I have a carousel with background images similar to this website I need the images in my carousel to stretch to 100% of the browser width. When the user adjusts the browser size, I want the image to be cropped on the right and left sides without changing ...

htmlcsstwitter-bootstrap

My custom class is being ignored by Tailwind CSS within breakpoints

I'm attempting to incorporate some animation on the height property within the md breakpoint, but for some reason Tailwind CSS isn't applying my class. <div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? ...

cssreactjsnext.jstailwind-css

Enhance Your YouTube Comment Section with CSS Styling

I am brand new to css html and I'm attempting to create a comment display system similar to that of YouTube using only CSS. My goal is to have an image of the commenter displayed, followed by their username and comment text listed beside it. So far, I ...

htmlcss

Sass effortlessly transforms the color black into its hexadecimal counterpart #000000

I am in the process of developing a mixin that simplifies the task of incorporating multiple fonts in a single line. Within the mixin, I specify the desired font weights as follows: $font-weights: ( "hairline": 100, "thin": 200, "light": 300, "regular": 4 ...

csssasscompass

One way to enhance Razor helpers is by integrating parameters into them

Is there a way to create an HTML Helper similar to @Html.TextBoxFor(model => model.signature) that includes a data-id parameter in the generated input, like shown below? <input type="text" name="signature" data-id="No Signature" /> I understand ...

c#htmlasp.net-mvcrazorhtml-helper

Gradually eliminate the background color in one smooth motion

When new messages appear, I want them to be subtly highlighted as users hover over them. The background color will slowly disappear on hover thanks to the CSS code provided below. However, this effect should only happen once, which is why I need to remov ...

javascriptjquerycss