Member Avatar for ramsiva

I am getting Mobile view 320x480 and also td by td.

But in my desktop i am not getting space between label and textbox. I am applied col-xs-2 to label and textbox but in mobile view i am not getting.

Please any body help me to get space between td horizontally on desktop view as well as mobile view.

    <div class="container">
    <form class="form-inline">
 <div class="row"><div class="form-group">
    <label>Name</label>
    <input type="text" name="name" id="name" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" name="email" id="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div></div>
</form>
    </div>
  • 3 Contributors
  • 2 Replies
  • 313 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by alisajjad160

Dani AI

Generated

A few focused points based on the snippet you posted, :

Your HTML has a couple of issues that break predictable spacing: each input in the snippet contains duplicate id attributes (invalid HTML) and labels aren’t tied to inputs with a for= attribute. Also, mixing form-inline with ad-hoc column classes often causes unexpected results on small screens. form-inline is for very compact one-line forms; for reliable horizontal spacing across breakpoints use the grid (labels in one column, inputs in another) or Bootstrap’s “horizontal form” pattern.

Brief responses to earlier advice: ’s &nbsp; / table approach will “work” visually but harms semantics, accessibility and responsiveness. ’s margin rule is a quick fix but is a global hack that can affect other inputs. Prefer a grid-based layout or a small, local utility class.

Example (Bootstrap 3: grid / horizontal form pattern)

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-4">
      <input id="name" class="form-control" type="text" placeholder="Jane Doe">
    </div>
  </div>

  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-4">
      <input id="email" class="form-control" type="email" placeholder="jane.doe@example.com">
    </div>
  </div>
</form>

Quick troubleshooting checklist:

  • Remove duplicate id attributes and add for="..." on labels.
  • Wrap inputs in a .col-*-N div (don’t just add column classes to random elements).
  • Make sure columns add up (≤ 12) and test with browser devtools at different widths.
  • If you only need a small visual gap, add a local class to the label (e.g. .label-gap { margin-right: .5rem }) rather than a global rule.

This keeps the layout semantic, responsive and accessible while giving consistent spacing on desktop and mobile.

Recommended Answers

All 2 Replies

Member Avatar for Makara

Sorry for the problem. You can create a space between a lable and an input box using &nbsp; code or you can decide to create a table direct of different columns and ignore the lable and then insert the input box in a table opposite. ie. <td>name</td><td><input type="text" name="name" id="name" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></td> oposite the text

Member Avatar for alisajjad160

Try this:

.form-inline input[type="text"], 
 .form-inline input[type="email"]{
    margin-left:.8em;
    margin-top:.4em;
    }

its working fine with this code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.