Tips for Aligning Form Elements in the Middle using Bootstrap

What could be the issue?
I can clearly see the container border, indicating the space available for my work. However, when I insert the row (div) and offset (div), the content gets left-justified.

<div id="page" class="container" style="border:solid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input type="text" id="firstName" class="form-control" />
            </div>
            <div class="form-group">
                <label for="lastName">Last Name:</label>
                <input type="text" id="lastName" class="form-control" />
            </div>
        </div>
    </div>
</div> 

Answer №1

It seems like I understand what you're asking, but I'm a bit unsure. Are you referring to something like this?

https://i.sstatic.net/ZttRb.png

If that's the case, the class you're looking for is:

class="text-center"

You can update your code as follows:

<div id="page" class="container" style="border:solid">
<div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
        <div class="form-group">
            <label for="firstName">First Name:</label>
            <input id="firstName" class="form-control text-center" type="text">
        </div>
        <div class="form-group">
            <label for="lastName">Last Name:</label>
            <input id="lastName" class="form-control text-center" type="text">
        </div>
    </div>
</div>

You also have the option to apply it only to specific controls, such as the input form controls.

I hope this information proves helpful!

Answer №2

While Bootstrap is known for its mobile-friendly design, it can also enhance the user experience on desktops with its scaffolding capabilities. When creating forms, my focus is on optimizing space usage. Building upon Demonic Penguin's code and adding my own touch, here is an improved version:

<div id="page" class="container" style="border:solid">
  <div class="row" style="padding-top: 12px;"></div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
      <div class="form-group">
        <input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
      </div>
      <div class="form-group">
        <input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
      </div>
    </div>
  </div>
</div>

Answer №3

To enhance the appearance of your form, consider incorporating icons into the fields. Here is an example:

<div id="page" class="container" style="border:solid">
  <div class="row" style="padding-top: 12px;"></div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span>
          <input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span>
          <input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

If you choose to implement this feature, remember to include a reference link to FontAwesome CSS on your page(s). You can obtain the link from here:

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

Floating elements and Internet Explorer compatibility

In my code, I have two divs that are floating correctly in Chrome, Firefox, and Safari but not in Internet Explorer. In IE, the right div appears below the left div even though it should be floated to the right. Both of these divs are wrapped by an outer ...

Achieving priority for style.php over style.css

Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...

Dragging a div element within a table

I am working on an HTML code where I need to make the colored divs draggable and fit them into specific table cells. The green div should occupy 2 cell spaces, light blue 3 cell spaces, yellow 4 cell spaces, and dark blue 5 cell spaces. While I have the d ...

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

Having four videos displayed on one webpage can cause the browser to function at a slower

I have videos that are around 30 seconds long and 15mbs. I'm wondering if it's feasible to include them on a page or if I should opt for cover images instead. I would like to use the video as a separator similar to the design showcased at Does a ...

I need help setting up a link in HTML that redirects to the correct webpage when clicked. How can I make this happen smoothly?

<!DOCTYPE html> <html> <head> <title>______</title> <button class="btn about">About</button> <button class="btn socialmedia">Social Media</button></button> <button class ...

Troubleshooting Bootstrap: Issues persist even after including CDN links and reference style link // Python

Currently, I'm in the process of constructing my Django app. After successfully implementing the login page and homepage, I decided to give my page a much-needed facelift since it looked extremely basic. A big fan of Bootstrap, I've used it exten ...

Text that is curving around a D3.js pie chart

I am currently working on creating a 3D-Js chart and I would like the pie text to wrap around the pie itself. This is the exact effect that I am trying to achieve: I am facing two main issues: I am currently printing two separate charts (with labels prin ...

Issues with Bootstrap column rendering in IE11's Flex layout

I need assistance with the code below: .hero{ background:lightgrey; padding: 50px 0px; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E26 ...

Utilizing a Bootstrap Frontend to Connect with a Rails JSON-API

Forgive me if this sounds naive, but I'm unsure how to access the 'endpoints' from my current Rails JSON-API Server in my Bootstrap page. Do I need to place the Bootstrap page within the view folder of the API server? If so, how do I invoke ...

Expand row size in grid for certain row and item

For my project, I am utilizing a Grid layout to display 5 items per row. Upon clicking on an item, my goal is to have the item detail enlarge by increasing the size of the HTML element. Is there a CSS trick that allows me to instruct the Grid to expand a ...

Ways to avoid single-sided border from overlapping with border radius

When adding a 2px bottom border to a text field with a 4px corner radius on the container, the border tends to curl around the edge due to the larger radius. I am looking for a solution to keep the bottom edge flat. [What I DON'T want: border wrappin ...

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

Web browser displaying vertical scroll bars centered on the page

I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them? @import ...

Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

I encountered a situation where I needed to dynamically create a grid with square grids of dimensions MxN. Below is the code snippet for achieving this: rerender = (event) => { const height = document.getElementById("y-input").value; const width ...

Sorting table data by Table SubHeadings using Jquery

Utilizing jQuery tablesorter in my UI, I encountered a challenge with a table that has 2 rows of headers - one main header and one subheader. My goal is to enable sorting on the subheader. How can I achieve this? Below is an example of my code structure: ...

What is the process for adding a download link to my canvas once I have updated the image?

Is it possible to create a download link for an image that rotates when clicked, and then allows the user to download the updated image? Any help would be appreciated.////////////////////////////////////////////////////////////////////// <!DOCTYPE ht ...

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

`A dynamically captivating banner featuring animated visuals created with JQuery`

I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve. 1) The ...

When the back button is pressed on android, the navbar does not immediately refresh the active class

When using a webapp on Chrome for Android, pressing the back button results in double active items in the navbar. Clicking outside of the navbar removes the old active item. I attempted to resolve the issue by adding [routerLinkActiveOptions]="{ exact: tr ...