1

Im trying to center my form data below. I have tried a few different things online but was unable to find anything that works. I am using bootstrap, and offset is messing us the Title for the form and then the actual form. Thanks!

enter image description here

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form class="form-horizontal" >
  
  <div class="form-group">
      <label class="col-sm-2 control-label">NetID</label>
      <div class="col-sm-3">
        <input class="form-control" name="name" id="name" type="text" placeholder="Enter their netid" onkeyup="showUser(this.value)">
      </div>
    </div>
    
     <center><div id="txtHint"><b>Enter the users netid, and their history is below:</b></div></center><br/>
     
     <div class="form-group">
        <label for="gender" class="col-sm-2 control-label">Cable Length</label>
        <div class="col-sm-3">
          <select id="gender" class="form-control">
            <option value="14ft">14ft</option>
            <option value="25ft">25ft</option>
          </select>
        </div>
      </div>
      
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Submit</button>
        </div>
      </div>
  </form>
</div>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
Colin
  • 23
  • 1
  • 1
  • 8
  • so how about creating a css class with margin: auto; and if you want you can add padding and so on, you can even write media queries on top of it for responsiveness, and on the container of the form assign the class you created. – Sol Stein Aug 08 '16 at 20:59

5 Answers5

1

The reason things are not center aligning is partly due to the bootstrap column classes (which float the item left). If you eliminate these and define the widths in CSS instead, you'll be able to position them easier.

If you can define the width of the element to center it, you can use 

margin: auto;

If you can't, you can try using 

text-align: center;

Here's a codepen. I hope this helps. http://codepen.io/anon/pen/AXmxgm

Skerrvy
  • 902
  • 8
  • 17
1

You can use offsetting columns for all items of the form.

Please check the result. Is it what you want to achieve?

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <form class="form-horizontal">

    <div class="form-group">
      <label class="col-sm-offset-3 col-sm-2 control-label">NetID</label>
      <div class="col-sm-3">
        <input class="form-control" name="name" id="name" type="text" placeholder="Enter their NetID" onkeyup="showUser(this.value)">
      </div>
    </div>

    <div class="form-group">
      <div id="txtHint" class="col-sm-offset-5 col-sm-3">
        <b>Enter the users NetID, and&nbsp;their&nbsp;history&nbsp;is&nbsp;below:</b>
      </div>
    </div>

    <div class="form-group">
      <label for="gender" class="col-sm-offset-3 col-sm-2 control-label">Cable Length</label>
      <div class="col-sm-3">
        <select id="gender" class="form-control">
          <option value="14ft">14ft</option>
          <option value="25ft">25ft</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-5 col-sm-3">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>

  </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
  • I was wanting to keep the input boxes small how they are then center them in the page. Ok well yours is the closest so far, Ill keep poking and see, it messed up parts of the text. – Colin Aug 08 '16 at 21:41
  • @Colin Please check my snippet in the `Full page` mode. – Gleb Kemarsky Aug 08 '16 at 21:42
  • I apologize I didn't view it like that at first. But I implemented the code, and tweaked it a bit for the div id=textHint (Its a return from another php file) works perfect! Thank you for all the help! – Colin Aug 08 '16 at 21:49
  • @Colin Glad to be helpfull. – Gleb Kemarsky Aug 08 '16 at 21:54
0

Look here on my example fiddle below. You just wrap all inside a div and then apply the follwing CSS rule to it: margin: 0 auto;. This will automatically center your div. I applied a padding as well so that it is better to see.

Here the fiddle link: https://jsfiddle.net/Anokrize/DTcHh/23471/

Tom el Safadi
  • 6,164
  • 5
  • 49
  • 102
0

You have a lot of div elements in there, that in my opinion are unnecessary. Bootstrap also doesn't need to be used.

I've removed the divs for sake of simplicity:

[http://codepen.io/MBarnes/pen/VjVyGL][1]

HTML:
<div class=".center">
  <form>
    <label class="control-label">NetID</label>
    <input class="form-control" name="name" id="name" type="text" placeholder="Enter their netid" onkeyup="showUser(this.value)">
    <center><div id="txtHint"><b>Enter the users netid, and their history is below:</b></div></center><br/>
    <label for="gender" class="control-label">Cable Length</label>
    <select id="gender" class="form-control">
      <option value="14ft">14ft</option>
      <option value="25ft">25ft</option>
    </select></br>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>



CSS:
.center {
  margin: 0 auto;
  width: 100%;
}
form {
  margin: 0 auto;
  width: 500px;
  text-align: center;
}

Simply wrap form in container div and give it a margin: 0 auto, do the same for the child form while also adding as text align center to this element

Matthew Barnes
  • 26
  • 3
0

use bootstrap class

text-center

on whole form

and get rid of offset

http://codepen.io/Skaidrius/pen/NROQwo

or offset it like this

http://codepen.io/Skaidrius/pen/XjyAWr

Skaidrius
  • 131
  • 1
  • 11