Boostrap center inline inputs with no space between them

Question

I removed the spacing between multiple input fields and the submit button using float:left.

But I dont know how to keep this hole block centered on the page.

Here is a Fiddle:https://jsfiddle.net/bb61c412/43/

And the code:

  .form-control {

    float: left;

    border-radius: 0px;

  }

  .btn {

    float: left;

    border-radius: 0px;

  }

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">

  <div style="background-color:white;width:100%;height:100%;">

    <div style="margin-left:30px;margin-right:50px;padding-top:30px;">

      <form>
        <div class=form-inline style='text-align:center;'>
          <select name="Form1" class="form-control">
            <option value="0">Form1</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form2" class="form-control">
            <option value="0">Form2</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form3" class="form-control">
            <option value="0">Form3</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <button type="submit" class="btn btn-default">Submit</button>

        </div>


      </form>


    </div>

  </div>

</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:45

Remove the floats and use flexbox instead.

JSfiddle Demo

.form-control {
  border-radius: 0px;
}
.btn {
  border-radius: 0px;
}
.form-inline {
  display: flex;
  justify-content: center;
}

.form-control {
  border-radius: 0px;
}
.btn {
  border-radius: 0px;
}
.form-inline {
  display: flex;
  justify-content: center;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">

  <div style="background-color:white;width:100%;height:100%;">

    <div style="margin-left:30px;margin-right:50px;padding-top:30px;">

      <form>
        <div class=form-inline style='text-align:center;'>
          <select name="Form1" class="form-control">
            <option value="0">Form1</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form2" class="form-control">
            <option value="0">Form2</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form3" class="form-control">
            <option value="0">Form3</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <button type="submit" class="btn btn-default">Submit</button>

        </div>


      </form>


    </div>

  </div>

</div>

Otherwise you will have to review How to remove the space between inline-block elements?

the problem is that it is the only way I found te remove the space between the input fields. — michltm, Mar 21 '16 at 17:01

score 0 · Answer 2 · answered Mar 21 '16 at 17:05

0

Please try this:

Change:

<div style="margin-left:30px;margin-right:50px;padding-top:30px;">

to

<div style="margin: 0px auto; padding-top: 30px; width: 427px;">

answered Mar 21 '16 at 17:05

satya

1,145
8
12

score 0 · Answer 3 · answered Mar 21 '16 at 17:07

0

It is best practice to have all your .js files or CDN(s) at the bottom of your HTML before the closing body tag.

You want to render your .js scripts last to help with your asset pipeline.

answered Mar 21 '16 at 17:07

jdave

845
2
11
27

Boostrap center inline inputs with no space between them

3 Answers3