CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Lion
Lion

Reputation: 313

How to customized space between two text input in bootstrap

Need horizontal space between following text input in bootstarp.

<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">
        <!-- <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>

    <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>

How can do this well. Html spaces are not working.

Upvotes: 0

Views: 4562

Answers (2)

Rohit Verma
Rohit Verma

Reputation: 3785

I think you want 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>

Upvotes: 2

Saravanan I
Saravanan I

Reputation: 1229

If I'm not wrong this will work,

.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>

Upvotes: 0

Related Questions