Creating distance between two text boxes in bootstrap is easy with the use of margins. By

I am looking to create a small white space between two text boxes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row col-lg-12 col-sm-12">
  <div class="input-group col-md-8">
    <span class="control-label">Product Name*</span>
    <input type="text" class="form-control" placeholder="Product Name" id="productname" required>
  </div>
  <div class="input-group col-md-4" style=>
    <span class="control-label">Short Name*</span>
    <input type="text" class="form-control" placeholder="ShortName" id="shortname" required>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Do you need space between the textboxes? In small devices, are they displayed in two rows? If so, add mt-3 (margin-top) for additional margin to each input-group.

Is this a problem? https://i.sstatic.net/Z83s5.png

Add mt-3(margin-top) to each input-group and also include a width to span for proper alignment like this span{width:130px;}

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

span{
  width:130px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
      <div class="input-group col-12 mt-3">
          <span class="control-label d-flex h-100 align-items-center">Product Name* &nbsp;</span>
          <input type="text" class="form-control"  placeholder="Product Name" id="productname" required>
      </div>
      <div class="input-group col-12 mt-3" style=>
           <span class="control-label d-flex h-100 align-items-center">Short Name* &nbsp;</span>
          <input type="text" class="form-control"placeholder="ShortName" id="shortname" required>
      </div>
  </div>
</div>

Answer №2

You have the option to apply margin or padding classes to your span element :

For instance

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row col-lg-12 col-sm-12">
  <div class="input-group col-md-8">
    <span class="control-label px-1">Product Name*</span>
    <input type="text" class="form-control" placeholder="Product Name" id="productname" required>
  </div>
  <div class="input-group col-md-4" style=>
    <span class="control-label px-1">Short Name*</span>
    <input type="text" class="form-control" placeholder="ShortName" id="shortname" required>
  </div>
</div>

https://getbootstrap.com/docs/4.5/utilities/spacing/

Spacing

Bootstrap provides a variety of responsive margin and padding utility classes for altering an element’s appearance.

How it operates

Use shorthand classes to assign responsive-friendly margin or padding values to an element or specific sides. These classes support individual properties, all properties, as well as vertical and horizontal properties. The classes are created using a default Sass map ranging from .25rem to 3rem.

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

Submit the form using the GET method and update the URL

<form method=\"GET\" action=\"http://www.$domain/search/\"> <input type=\"search\" id=\"search\" name=\"search\" value=\"terms\"> </form> This form will be directed to the follo ...

html

When two elements overlap, adjust their CSS positions to ensure responsiveness

Is there a way to adjust the position of an element when it comes into contact with another? Check out this example http://jsfiddle.net/mZYR8/1/ In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide unde ...

cssresponsive-design

What are the steps for capturing video using openCV in a python program?

I am facing a challenge in figuring out how to capture a video using openCV. While I have managed to display the video on an html template with the existing codes, I am uncertain about which codes are needed to actually record the video. -camera.py- i ...

pythonhtmlopencvflask

How to Include HttpClient in an Angular Service

Looking for a service that utilizes http requests? import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root&a ...

htmlangularangularjstypescript

Having trouble targeting a div with jQuery

Is it possible to target a specific div within an unordered list and list items? I'm having trouble with it. Here is the HTML code: <ul class="grid"> <div id='categoria' cat='web'></div> <li id=' ...

javascriptjqueryhtml

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...

htmlcssflexbox

A guide on implementing input tags through instant search in HTML using AngularJS

As someone new to Angular JS, I am working on adding input tags by clicking from instant search using Angular JS. I came across a helpful example of instant search in action through this demo that Google provided. Now, I want to implement the ability to a ...

htmlangularjsselection

Break the line using HTML select option and set it as the value

I am working on a select box where I want to include a value for a line break. <select> <option value=";">Semicolon</option> <option value=",">Comma</option> <option value=".">Dot</option> <opti ...

html

How do you center controls within a repeater control's item template?

I have a repeating control on my page that displays an image and a hyperlink one below the other. When I add more than one line of text, it causes the image to move up. I want the top of the images to be aligned horizontally and the text to flow downward i ...

c#asp.netcss

A guide on transforming JSON data into HTML using Rails

I'm struggling with parsing JSON on a webpage. My webpage is designed with circles, where clicking on a circle triggers a call to the controller to retrieve specific information from a database and display it as graphs and text. The issue I'm fa ...

javascripthtmlruby-on-railsjson

What are some ways to customize the player for Youtube videos?

I'm looking to recreate the design of Youtube videos on my website when I embed them. The image below is just an example, but it reflects the simplicity I am aiming for. Any guidance or examples would be greatly appreciated, as I am unsure where to be ...

phphtmlcssyoutube

Animate CSS backward when hovered

I am having trouble with getting an animation to play in reverse when hovering over an element. No matter what I try, it just snaps back to the beginning without any smooth transition. Interestingly, this issue only occurs in Chrome and Safari browsers. ...

csscss-animations

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Is there a way to update text on an HTML document without reloading the entire page? I'm looking to create a simple "cart" functionality with 5 links on a page. When a link is clicked, I want it to increment the "items in cart" counter displayed on th ...

javascriptjavahtmljsp

Encountering an unforeseen issue with my code

I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...

jqueryhtmlcsstwitter-bootstrap-3summernote

Place the video element within the Canvas element

I'm trying to incorporate a video player on Canvas. My video has an alpha channel, and I want to play it over a jpg image. This is the code snippet I've put together: <video id="mainVideo" src="item0.mp4"> </video> <canvas id="m ...

htmlcanvashtml5-canvashtml5-video

Output the result of a PHP script inside a JavaScript code

I'm having trouble getting the code below to display the success word. Can anyone spot what's wrong with it? Appreciate any help in advance. <script type="text/javascript"> function verification(){ var s = document.test_form.textfiel ...

javascriptphphtml

Designing a Bootstrap layout with twin divs adjacent to each other

I am trying to design a webpage with two Divs positioned side by side using bootstrap styles. However, the code I have been using is not yielding the desired outcome. Is there anyone who can offer me some guidance on how to achieve this? Thank you. < ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to ensure that any words exceeding the line length automatically move to the next line?

My webpage width is currently set to 100vw and adjusts responsively as the viewport size changes. However, there seems to be a slight issue where certain words overflow without being pushed to the next line, causing a small horizontal scroll: https://i.s ...

htmlcssoverflowword-wrap

Browser refusing to acknowledge jQuery/JavaScript (bootstrap)

Here is where I include the necessary jQuery libraries and my custom jQuery code: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src= ...

javascriptjqueryhtmltwitter-bootstrap

Issues with getting full HTML content using selenium for web scraping

My task is to extract the discounted price of a product from a specific website. Upon inspecting the website, I found the following HTML structure: https://i.sstatic.net/LerWE.png This is what my code currently looks like: browser = webdriver.Chrome(exe ...

htmlselenium-webdriverxpathcss-selectorswebdriverwait