Tips on adjusting the spacing between two text input fields in bootstrap

Require horizontal space between the text input fields in bootstrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-12">
    <div class="col-sm-6 col-lg-4">
      <div class="form-group">
        <input class="col-xs-3-offset-4" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px">
      </div>
    </div>

    <div class="col-sm-6 col-lg-4"> 
      <div class="form-group">
        <input class="col-xs-4-offset-6" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px;">
      </div>
    </div>
   </div>
</div>

What is the best way to achieve this? HTML spaces are not effective.

htmlcsstwitter-bootstrap

Answer №1

If you're looking for something like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .form-control {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .form-group { margin-right:20px;}
</style>

<form class="form-inline" role="form">
    <div class="form-group">
      <label for="email2">Email:</label>
      <input type="email" class="form-control" id="email2" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd2">Password:</label>
      <input type="password" class="form-control" id="pwd2" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="button" class="btn btn-default">Submit</button>
  </form>

Answer №2

It appears that this code snippet should do the trick:

.container{
  margin-left: 100px;
}
<div class="container">
  <div class="col-md-12">
    <div class="col-sm-6 col-lg-4">
      <div class="form-group">
        <!-- <div class="col-md-8"> -->
        <input class="col-xs-3-offset-4" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px">
        <!-- </div> -->
      </div>
    </div>
    <br>
    <br>
    <div class="col-sm-6 col-lg-4"> 
      <div class="form-group">
      <!-- <div class="col-md-8"> -->
        <input class="col-xs-4-offset-6" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px;">
      <!-- </div> -->
      </div>
    </div>
   </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

Spotting repeated terms within an HTML document

I have a table with results generated using v-html (meaning the text inside the table does not appear until the page is rendered). I want to compare two rows and highlight any duplicate words they may contain. While looking for examples, I came across a p ...

javascriptjqueryhtmlcssvue.js

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

cssnext.js

What is the best way to customize the appearance of a table using CSS?

I'm attempting to create a table through RAILS that is automatically generated in the default layout. However, I want to customize its appearance using CSS to achieve the desired look. Specifically speaking, from the attached image, I would like the ...

htmlcssxhtmlcss-tables

How come the translateX function doesn't function properly for fixed elements in IE9, IE10, and IE11?

Presently, I am endeavoring to obtain the desired outcome in Internet Explorer versions 9, 10, and 11 (functions flawlessly on Chrome and Firefox): When in mobile mode, there is a principal #container envelop that encompasses the entire website content al ...

htmlcssinternet-explorercss-position

Is there a way to extract the numerical value from a string within an ID of a div and transform the rest of the string into a variable?

Looking to extract the final id of a div and convert it to a variable. <div class="margin_bot" id="itemRows2"> <p id="rowNum1">...</p> <p id="rowNum2">...</p> <p id="rowNum3">...</p> <p id="rowNum4"> ...

javascriptjqueryhtml

Revolutionize iPad user experience with seamless HTML5 video integration

What is the most effective method for dynamically embedding HTML5 video to ensure compatibility with the iPad? (using pure Javascript) I'm having difficulty getting this approach to work: <div id="placeholder"><script type="text/javascript" ...

javascripthtmlipadvideoembed

Images are appearing misaligned in certain sections

I have been utilizing the freewall jQuery plugin for organizing images in my website. While the layout of my first section, located at , is functioning properly, I am encountering some issues with its height. The code snippet that I am currently using is a ...

jquerycss

Adjust the carousel width on slide in Bootstrap 4

Having an issue with my Bootstrap Carousel where the width changes as it slides. The carousel starts off fine, But when it slides, I want the carousel to stay centered and maintain a fixed width. Setting a fixed width for carousel-inner works, but it n ...

cssbootstrap-4

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

What is the best way to align the navigation bar to the left using bootstrap?

I'm having trouble creating a navigation bar for my website using bootstrap 5. I tried to move the bar to the left by adding the class margin left auto (ml-auto), but it didn't work as expected. Can someone help me figure out why? Thank you in ad ...

htmlcssbootstrap-5navigationbar

Does anyone have insight on which JavaScript library is being utilized in this context?

While perusing an interesting article, I came across an image that caught my attention. Clicking on it revealed a unique way to view the full size. I am curious if anyone knows which JavaScript library was used for this effect. You can find the article her ...

javascripthtmlimage

Firefox failing to display fonts from Google Font API

The landing page our company outsourced does not display the Lato font in Firefox, resorting to a different option instead. We have received a stylesheet from fonts.googleapis.com that includes the following: @font-face { font-family: 'Lato'; ...

cssfirefoxfont-facenoscriptgoogle-font-api

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

Can you explain the purpose of the "for" attribute in the <output> tag of HTML?

I'm puzzled by the purpose of the for attribute in the new HTML5 output tag, as the result doesn't seem to change based on its presence. This query was raised back in 2012 during the era of HTML4. However, with the introduction of HTML5 in 2014, ...

html

Obtain the length of a sound file in .wav format

Can anyone suggest a way to incorporate a waveform or horizontal bar on a website that displays the duration of a WAV file in seconds using HTML text? For instance, for a 60-second WAV file: I'm open to any ideas. ...

jqueryhtmlweb-applicationsjquery-pluginshtml5-audio

Looking to execute a PHP file from HTML/JavaScript?

Greetings! I have a unique jQuery/javascript plugin that functions as a vertical ticker for news updates directly on my HTML website. Here is the code snippet: <script src="jquery.vticker-min.js"></script> <script type="text/ja ...

javascriptjqueryhtmltagsticker

necessitated in specified input with assigned value

Here is some code I have: <!DOCTYPE html> <html> <body> <form action="/action_page.php"> <select required> <option value=1>Volvo</option> <option value=2>Saab</option> <option value=3>Merc ...

phphtml

Place an image at the center with a height set to 100% within a div that has a fixed height and

Apologies for asking about this topic again, but I have been unable to find a solution where the image fills 100% of the height. If you'd like to see the issue in action, here's a link to the jsfiddle: http://jsfiddle.net/BBQvd/3/ I'm just ...

javascripthtmlcss

CSS - I add space between the components of the layout, but the color of the space does not match the body color

I am aiming for my website layout to have distinct margins between the left and right side of the content, as well as between the header and navbar. However, I do not want these spaces' colors to change to match the body's background color. http ...

htmlcss

Issue with Bootstrap datepicker functionality within a modal

I've searched extensively on Google and Stack Overflow for a similar question, but so far haven't been successful. The issue I'm facing is when I create and open a modal from jQuery and try to access a date picker, the datepicker's Java ...

javascriptjqueryhtmldatepicker