Utilizing Bootstrap 3's grid system for precise alignment of form elements

<?php echo form_open('secure/register', 'class="form"', 'role="form"'); ?>
<div class="page-header">
    <h2><?php echo lang('reg_title'); ?></h2>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Email Address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
    <div class="text-center">
        <button type="submit" name="submit" class="btn btn-primary"><?php echo lang('register_btn'); ?></button>
    </div>
</div>
<?php echo form_close(); ?>

This is my registration form design that I have created.

It is currently displayed as:

Email
_________________________
Password
_________________________
          [Reg]

It occupies the full width within the container.

Now, I am facing some challenges:

1) How can I adjust the size of the form to be smaller and centered in the container, taking up only 60% of the width with 20% empty space on each side?

2) Additionally, how can I structure the form layout like this?

Email
_________________________
Password
_________________________
Contact
FirstName___ LastName____
          [Reg]

Thank you for your assistance!

Answer №1

enclose your div within another div like this:

<div class="col-md-8 col-md-offset-2">
<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
    <div class="text-center">
        <button type="submit" name="submit" class="btn btn-primary"><?php echo lang('register_btn'); ?></button>
    </div>
</div>
</div>

This will center-align your form with a width of 66.6% and a margin of 16.7% on each side. If you want the form to be smaller, you can also add the class col-sm-8 col-sm-offset-2.

As for your second question, you have the option to use inline form or horizontal form. More information can be found here. You can combine form and form-horizontal classes according to Bootstrap documentation:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

Answer №2

User @VikasRana has provided comprehensive information on the topic, however, I will add some further details.

If you're unfamiliar, Bootstrap includes a grid system to help organize elements in a structured way. The grid consists of 12 columns within each row. You can refer to the grid layout here.

Addressing your specific issue:

1) As mentioned in the previous answer, enclose your content within the

<div class="col-md-8 col-md-offset-2"></div>
class and place that within a
<div class="container"></div>
. The container provides predefined widths for different viewports, ensuring your form appears concise and centered. Check out the demo here. For mobile devices, consider using a 100% width for the form and exclude the col-sm-* classes meant for smaller screens.

2) To address the second point, utilize the form-inline class to display both the <label> and <input> elements on the same line. To ensure equal widths and spacing between them, wrap each in the col-md-6 class. See the demo here.

Answer №3

Employ 2 placeholders to fill in the gaps and distribute Bootstrap's weighting evenly among all the rows of containers. Ensure that the total weight amounts to 12, such as using a ratio like 2-8-2.

http://getbootstrap.com/examples/grid/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the User Agent Stylesheet giving h1 elements a default bold setting?

My h1 is appearing bold due to the user agent stylesheet, but I want it to be normal. How can I override this? h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px; -webkit-margin-end: ...

Move content to the bottom of a div element while the user is scrolling

I have a website that functions smoothly with typical user scrolling. Nevertheless, I am interested in incorporating a feature where the user is automatically moved to either the bottom or center of the div element upon scrolling. The elements in questio ...

The collapsible menu located beneath my navigation bar is unable to reach the correct position on the right side

I'm attempting to create a collapsible navigation bar with its contents shifting to the right side when resized to medium size, but I'm having trouble. Can someone please assist me with this? I have also included the code below. <nav class=&qu ...

OutOfMemoryError caused by Bitmap

I'm experiencing an issue with this error. I created a favicon parser from URLs using the following code: public class FavIconParser { public static String extractUrl(String url) { StringBuffer sb = new StringBuffer(); Pattern p = Pattern.co ...

AngularJS: Optimizing load times by consolidating all partial views/templates for production

My goal is to maintain views in a highly modular way. This entails using numerous small, generalized HTML snippets that come together to form the actual HTML page. While ng-include and custom directives with templateUrl work well for me during development, ...

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

Exporting a wireframe from a Three.js glb file results in a chaotic mess

After exporting my Rhino file to 3ds and then converting it to glb using Blender, I am attempting to reduce the size by removing unnecessary elements. However, when viewing the wireframe, it appears distorted. https://i.sstatic.net/WEpiW.png Interestingl ...

Preventing the display of AngularJS HTML tags while the app is being loaded

I am new to AngularJS (using version 1.5.8) and I am currently following the tutorials provided on docs.angularjs.org/tutorial. Below is the HTML code snippet: <div class="jumbotron"> <h1>{{application_name | uppercase }}</h1> ...

Encountering difficulty in fetching information from MySQL using Flask

I've encountered an issue with my flask website app where I connected a MySQL database but the data isn't displaying in my HTML file as intended. The content, meant to populate a side navigation, is not showing up and remains blank. This system w ...

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Looking for advice on the most effective method to transfer data from a JS file (retrieved from an sqlite db) to an HTML file in order to showcase it in a searchable table. My platform of choice is NodeJS. As a beginner, I am willing to put in extra time a ...

Shorten a data point in JSON code

I'm currently in the process of developing a stock widget that utilizes JSON to retrieve data from the Yahoo API/YQL console. I am specifically working with values extracted from the key ChangePercentRealtime, however, the values are longer than what ...

Set the default radio selection to be checked when it is assigned an object as the ng-value

Within my controller, I have a scoped object that initializes default values for my app as shown below: //set default values for form $scope.appText = { 'size':'normal', 'colour':'green', 'alignme ...

tips for aligning figcaption vertically to image within figure

Is there a way to vertically align the text in the figcaption with the image in this figure? Check out an example here: http://jsfiddle.net/YdATG/1/ Here is the HTML code: <section class="links"> <a href="#"> <figure class="grid-pa ...

Tips for parsing information from a text file and displaying it on a website in table format

Would like to create a 2x4 table where the first column has a dropdown for selection. Upon choosing an option, the associated data will populate the other 3 columns. I'm new to this, so please bear with me. Using x, y, z as placeholders, the data wil ...

Dynamic DIVs for CesiumViewer [CesiumJS]

Currently, I am in the process of customizing a Cesium map that includes an overlay containing various information. The style of this overlay is being implemented using Bootstrap. However, I have encountered an issue where the divs I add to the overlay rem ...

Implement a commenting feature upon the button being clicked

When a button is clicked, I want to insert some HTML code onto my page. Here's the code that I wish to add: <form action="#" id="Reactie_form"> <input id="Form_voornaam" type="text" placehol ...

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

Whenever I try to set the language using the code gettextCatalog.setCurrentLanguage(langString);, it doesn't seem to affect my side-nav menu. My side menu has two possible states: expanded or collapsed, and I use ng-include to control its content base ...

Troubleshooting: Unable to get the Bootstrap active navigation code to function

I've been struggling to make this code work in order to add the active class to my navigation list item, but it just won't cooperate. Home <li id="orange"> <a href="hotels.php"><span class="glyphicon glyphico ...

Show a specific portion of an extremely large .svg image file using Angular.js directive with the help of javascript or css

Currently, I am facing a challenge with a large map image (3000x8000px) in .png format that I have converted to .svg for data visualization purposes. I am struggling to find a way to display a specific small section of this map.svg file on an HTML page u ...

Checkbox paired with a read-only text column

I have a simple HTML input field with JavaScript functionality, which includes a checkbox. I am trying to write text in the input field when the checkbox is checked, and make the input field read-only when it is not checked. Can anyone provide an example ...