Aligning a Form in HTML/Bootstrap

Is there a way to center this form properly? Despite my attempts to adjust the div classes and styles, I still can't get it to align in the center.

I've explored using flexbox and other tools, but no matter what I do, the input field stubbornly remains on the far left.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row text-center">
  <form>
    <div class="fc">
      <div class="fg cg">
        <h3>
          Name
        </h3>
        <input class="fc"style="width: 35%" type="text"></input>
      </div>
      <div class="fa">
        <input class="btn" type="submit" value="Submit"></input>
      </div>
    </div>
  </form>
</div>

htmlcssbootstrap-4

Answer №1

To align the form in a column and center it, simply use the .text-center class as shown below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row text-center">
  <form class="col-12">

    <h3>
      Name
    </h3>
    <input class="fc" style="width: 35%" type="text"></input>
    <br/>
    <input class="btn" type="submit" value="Submit" />

  </form>
</div>

Answer №2

<div class="row text-center">
  <form>
        <h3>
          Enter Your Name
        </h3>
        <input class="form-control" type="text" placeholder="Your name here">
        <input class="btn" type="submit" value="Submit">
  </form>
</div>

Answer №3

Make sure to include margin: 0 auto; as suggested by @Sysix in the comments

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row text-center">
  <form style="margin: 0 auto">
      <div class="fg cg">
        <h3>
          Name
        </h3>
        <input class="fc"style="width: 35%" type="text"></input>
      <div class="fa">
        <input class="btn" type="submit" value="Submit"></input>
      </div>
    </div>
  </form>
</div>

Answer №4

Employ this code for centering elements:

margin-left:auto;margin-right:auto;

This will centrally align any content going forward.

Another user had previously inquired about a similar issue on Stack Overflow: Centering a form in bootstrap not working

Answer №5

When it comes to centering elements, there are various methods you can use. However, since you are working with Bootstrap, I decided to employ Bootstrap classes for this task.

Firstly, I utilized the grid system to create a row with a single large column that spans the entire row. Within this structure, I enclosed the form in a div element with the utility class d-flex and adjusted it using justify-content-center to achieve centered alignment.

Within the form itself, I incorporated the form-row class followed by the use of form-group to indicate a column inside the form-row. For proper formatting, I added the form-control class to the input field.

Lastly, I placed the button within a separate form-row, effectively resolving your centering issue using only Bootstrap utilities.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row">

  <div class="col-12">

    <div class="d-flex justify-content-center">

      <form>
        <div class="form-row">

          <div class="form-group">

            <label for="name">Name</label>
            <input id="name" class="form-control" type="text">
          
          </div>

        </div>

        <div class="form-row">

          <div>
            <button class="btn" type="submit">Submit</btn>
            </div>
            
          </div>

      </form>

    </div>

  </div>

</div>

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

Constructor for 'dojox.mobile.RoundRectCategory' could not be located

Using Worklight 5.06 and Dojo 1.8, I encountered the following errors on the browser's console after an Eclipse crash: Error: Unable to resolve constructor for 'dojox.mobile.RoundRectCategory' Error: Left list not found Error: this.leftLis ...

htmldojoibm-mobilefirstdojox.mobile

Creating gaps between flexbox divs for a more visually appealing layout

I am curious about the best practices for creating spacing between two divs that use flexbox. For example: https://i.sstatic.net/OZ8cp.png header { background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9); height: 80px ...

htmlcssflexbox

Encountering a glitch when integrating Bootstrap 4 with Rails 6 Webpacker

My Rails 6 application is set up with jQuery in the following configuration: config/webpack/environment.js : const { environment } = require('@rails/webpacker'); const webpack = require('webpack'); environment.plugins.append('P ...

ruby-on-railswebpackbootstrap-4webpacker

Cannot get the "middle" div in CSS to properly wrap around its content

Click here to view the issue with the "middle" div not wrapping its content. I have been attempting to make it automatically wrap the entire content of the table, resulting in a neat white 10 pixel padded border surrounding it. Despite trying various metho ...

csshtml

What steps can I take to troubleshoot the cause of my browser freezing when I try to navigate to a different webpage

Within this div, users can click on the following code: <div id="generate2_pos" onclick="damperdesign_payload();" class="button">Generate P-Spectra</div> Upon clicking, the damperdesign_payload() function is triggered, leading to a link to an ...

javascripthtml

html The "download" attribute causing a new tab to open rather than initiating a

I have a website built with Angular 4, where users can download images from an Amazon S3 bucket. However, I encountered an issue wherein instead of downloading the image, it opens in a new tab. I've tested this problem on different browsers such as Fi ...

htmlangularimagedownload

Owl carousel issue: Fixed position not functioning properly

To view the page with the issue, click here I am attempting to make the column (div) day/date headers sticky when they scroll out of view so that users can always see what day they are looking at. Instead of directly manipulating the header itself, I have ...

jquerycsspositionfixedowl-carousel

Component built in ReactJS for file uploads to a server running on Spring MVC/Data-REST

For quite some time, I have been on the lookout for a ReactJS component that enables file uploading from a browser, with the ability to save it to the server where the ReactJS application is deployed. I've come across several components that facilita ...

javascriptajaxhtmlbrowserreactjs

Is there a way to display these panels in a scrollable table layout?

My aim is to replicate this specific styling: https://i.stack.imgur.com/jz5lm.png This type of table shown above is being dynamically imported via Redux: class LocationList extends React.Component { componentDidMount() { this.props.fetchLocations( ...

javascripthtmlcssreactjsflexbox

Include a border around the entire tooltip

I'm having trouble adding a border to my tooltip that follows the outer lines of the entire tooltip. Currently, I've only been able to add a border to the upper part of the tooltip, which overlaps with the arrow section and isn't the desired ...

htmlcss

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

javascripthtmlcsssvg

Adjustable slider height in WordPress

Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...

jqueryhtmlcsswordpress

What could be the reason that angularjs html template requests aren't appearing in the top websites when viewed in a

After referring to the link , I discovered a way to determine which programming tools different sites use for application development. However, when I debug HTTP requests using Firebug, I noticed that HTML requests are not explicitly shown in the log. Alt ...

javascripthtmlangularjsmean-stack

Generate an angled border for a div

Is there a way to create a slanted div using CSS without relying on borders, especially when the div will be placed over an image? Here is what I have so far: <div class="thumbnail"> <a href="#"> <img class="img-responsive" src= ...

htmlcsscss-shapes

Mapping data using DataTables and improving table format

I am having some issues with integrating DataTables into Django 2.1. The table appears to be broken, and I am struggling to correctly map the data being sent by the server to JavaScript. https://i.sstatic.net/qv8kl.jpg Here is the JavaScript configuratio ...

ajaxdjangodatatablesbootstrap-4

When rendering, HTML characters are not translated

My JavaScript code generates the following HTML structure: <div contenteditable="false" tabindex="0" class="ProseMirror"> <p> didn't project a significant increase</p> </div> When rendered in the browser, it shows the cha ...

htmlcssvue.jsprose-mirror

Styling a div element in CSS with absolute positioning and the ability to

I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...

htmlcssscrollpositionabsolute

the combination of class and type functions as a jquery selector

<button class="actionButton default" type="submit"> Save</button> Can you select this button by both its class and type using a jQuery selector? I attempted the following, but it did not work: var saveBttn = $('.actionButton.default [ty ...

jquerycss

How to make your divs stand out using Bootstrap

Can anyone assist me in aligning my divs based on the example below? https://i.sstatic.net/OAyCj.jpg Here is what I have achieved so far: https://i.sstatic.net/KkOWg.jpg I am struggling to apply spacing between the two divs, and they are not of equal h ...

htmlcsstwitter-bootstrapgrid

Facing issues with integrating json data into html through svelte components

Just starting out with svelte and taking on a project for my internship. I have my local json file and I'm struggling to integrate it into my HTML. I've been scouring the internet but haven't found a solution yet. This is what I've tr ...

htmljsonsvelte