Guide to aligning form data with Bootstrap

Question

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appreciated!

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

html css forms twitter-bootstrap-3 centering

Answer 1

Answer №1

To align the columns properly, you can utilize offsetting columns within the form.

Please review the outcome to ensure it meets your desired result.

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

Answer 2

To align the columns properly, you can utilize offsetting columns within the form.

Please review the outcome to ensure it meets your desired result.

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

Answer 3

Answer №2

The issue with center alignment is attributed to the bootstrap column classes, as they float items left by default. By removing these classes and setting widths using CSS directly, positioning becomes much simpler.

To center an element with a defined width, you can utilize:

margin: auto;

If specifying width is not possible, another option is:

text-align: center;

For further clarification, refer to this codepen: http://codepen.io/anon/pen/AXmxgm. I hope this explanation is helpful.

Answer 4

The issue with center alignment is attributed to the bootstrap column classes, as they float items left by default. By removing these classes and setting widths using CSS directly, positioning becomes much simpler.

To center an element with a defined width, you can utilize:

margin: auto;

If specifying width is not possible, another option is:

text-align: center;

For further clarification, refer to this codepen: http://codepen.io/anon/pen/AXmxgm. I hope this explanation is helpful.

Answer 5

Answer №3

Take a look at the example fiddle provided below. By enclosing everything in a div and adding the CSS rule margin: 0 auto;, you can easily center the content within it. I've also included some padding to enhance visibility.

Check out the fiddle here: https://jsfiddle.net/Anokrize/DTcHh/23471/

Answer 6

Take a look at the example fiddle provided below. By enclosing everything in a div and adding the CSS rule margin: 0 auto;, you can easily center the content within it. I've also included some padding to enhance visibility.

Check out the fiddle here: https://jsfiddle.net/Anokrize/DTcHh/23471/

Answer 7

Answer №4

You seem to have a lot of unnecessary div elements in your code, and Bootstrap may not be required for this particular project.

I have simplified the code by removing some of the divs:

[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

Answer 8

You seem to have a lot of unnecessary div elements in your code, and Bootstrap may not be required for this particular project.

I have simplified the code by removing some of the divs:

[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

Answer 9

Answer №5

utilize the bootstrap class

text-center

for the entire form

and remove the offset

Check out this example on CodePen

or adjust the offset like demonstrated in the following link

View the updated version on CodePen

Answer 10

utilize the bootstrap class

text-center

for the entire form

and remove the offset

Check out this example on CodePen

or adjust the offset like demonstrated in the following link

View the updated version on CodePen

Guide to aligning form data with Bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The appearance of the pop-up mask is displayed at lightning speed

JavaScript code that functions similarly to VLOOKUP, allowing you to map input values from one field to

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Error: Jasmine cannot access a property of undefined value

Tips for rendering the stencil as invisible and disabled while still allowing other features (such as rotating and flipping) to remain enabled within the react-advanced-cropper

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

Unable to trigger JQuery .blur event

Center two distinct elements using Bootstrap's center-block class

Using the .load() function to import an HTML file from the directory above

Utilizing JQuery AJAX to Submit a JSONP Form with File Attachments

The Android webview fails to load the page, but the app successfully loads it when accessed through the

Mobile Iframe in Full View

Eliminating Google Adsense from Blog Posts

Utilizing hyperlinks within NicEdit content and managing events with jQuery

Is the hover rotation feature not functioning properly?

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

Customize the CSS styling of third-party components in different pages using NextJS

What is the best way to utilize Selenium with Python for choosing an item from a dropdown menu when the choices are contained within non-interactable <div> elements?

How to Override Global CSS in a Freshly Created Angular Component