Aligning form fields using CSS and Bootstrap 4

I am struggling to center a form on my page. The labels are centered, but the input with the form-control class is not cooperating.

Currently, it appears like this...

[EDIT: I have identified that the display: block; within form-control is causing the issue. I am unsure why. How can I disable it?]

https://i.sstatic.net/J28NA.jpg

#centered {
  text-align: center;
}
<div id='centered'>
          <span class="form-group">
            <h5 class="label">Email</h5>
            <input class="form-control" id="ex2" type="text">
          </span>
        <span class="form-group">
          <h5 class="label">Name</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Create A Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Confirm Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
  </div>

htmlcssbootstrap-4

Answer №1

To alter the display attribute of each form-control element within the specified div, you may attempt:

 #centered .form-control {
  display: inline;
}

Answer №2

Make sure to include the mx-auto class in your HTML code

/* Additional CSS for centering elements using mx-auto */
#centered {
  text-align: center;
  width:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id='centered' class="mx-auto">
          <span class="form-group">
            <h5 class="label">Email</h5>
            <input class="form-control" id="ex2" type="text">
          </span>
        <span class="form-group">
          <h5 class="label">Name</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Create A Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Confirm Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
  </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

Utilizing R to Extract Data from HTML Webpages

I am currently extracting flight schedules from JFK's website. You can find the link to access the flight schedules right here; My initial approach involves inspecting a specific field of each flight and recording its xpath. The purpose is to first e ...

htmlweb-scrapinghtml-tablenodesrvest

Utilizing Google Maps API version 3 to display various groups of markers

I am encountering an issue while trying to plot fixed markers and a user position marker on a Google Map. I want to use different images for these markers, but something strange is happening. When the page loads, all fixed markers show up correctly initial ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Spacing between table cells is only applied to the first row and footer

In an attempt to add spacing between the first row, second row, and footer of a table, I have experimented with cell spacing combined with border-collapse. However, the spacing is being applied all over the table instead of in specific areas. I am utilizin ...

cssreactjshtml-tablematerial-ui

"Concealing a div based on the toggling of another one - here's

Currently, I have a scenario where clicking on an image inside a div triggers the display of another div while simultaneously wanting to hide the original div containing the image. So far, utilizing only the abreInfo() function achieves the desired toggle ...

javascripthtmlcsstogglehide

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

htmlcssreactjsslider

Accessing data from a CD-ROM or DVD through a web browser

I am currently working on developing a web application for a friend that will enable users to simply click a button to upload all the content from the CD-ROM or DVD they have inserted directly to a server. It's not feasible to rely on the standard br ...

javascripthtmlappletcdcd-rom

Press the "Print All" button to instantly print out all of the images in one go

I have successfully implemented a feature where multiple images are displayed as thumbnails from a specified folder. Now, I am looking to add a "Print All" button that will allow users to print all the images in one go. Is it possible to print all images ...

phphtml

Designing a spacious and visually appealing interface with the Material UI Grid system, while

I created a personalized library using Material UI. The JSX code I am using is displayed below; <MyLayout container spacing={2}> <MyLayout item xs={9}> <MyComp1 /> </MyLayout> <MyLayout ite ...

cssreactjsmaterial-ui

how to toggle a pre-selected checkbox in a Vue component

https://i.stack.imgur.com/6GQl7.png When dealing with a tree view checkbox in Vue, I encountered an issue where editing data within a selected zone should automatically check the corresponding countries based on previous selections. The ID of the selected ...

htmlsqllaravelvue.js

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

I am facing an issue with my WordPress page that has Buddyboss installed along with Elementor pro as the Pagebuilder. The Buddyboss plugin provides Facebook-like functions on the website. While it is easy to comment on posts within the Buddy Boss system, I ...

javascripthtmlcsswordpressblogs

"Navigation Side Menu: w3-sidebar with hamburger toggle feature

If you are looking to implement the w3-sidebar, you can find it here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over The existing code uses a "hanburger" icon to open the side menu and a "Close X" menu item to close it. To simpl ...

jqueryhtmlcss

Break the line after every space in words within an element

I have a table/grid view with two words in the <td> like "C2 Sunday". I need a line break after C2 so that it appears as: C2 Sunday Is there a way to achieve this? Please assist me with this issue. Currently, it is showing as "C2 Sunday" and I wou ...

htmlcssasp.netgridviewhtml-table

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

htmlcssanimation

Retrieving a single number from Jquery's offset function during scroll events

Seeking the Current Top Position of Web Page Elements In my web page, I have divs with a height of 100%, each containing different content. I am attempting to determine the top position of these divs to manipulate them accordingly. However, when I try to ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

PHP-generated HTML often contains unnecessary and excessive indentation

I'm trying to adjust the indentation of my HTML generated by PHP, but I'm facing issues removing some unwanted indentations. Take a look at this snippet from the HTML source: <table id="structure"> <tr> <td id="navigation"> ...

phphtmlindentation

Adapt your Bootstrap sidebar for icon menu on small screens below 800px

My Background My experience lies primarily in PHP rather than modern CSS, particularly Media Queries. This has left me feeling uncertain about how to effectively troubleshoot CSS layout issues. Currently, I am working on developing a user dashboard templ ...

jquerycsstwitter-bootstrapresponsive-designmedia-queries

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting

Troubleshooting problem with image overlay alignment in Bootstrap 4 Card

I am currently utilizing Bootstrap 4 and am attempting to create a card-based layout for showcasing my stores. Within this design, I have a location marker that should appear over the store image with a 5-star rating positioned on the same line, floating t ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Error alert: Blinking display, do not dismiss

I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...

javascripthtmlcssblock

What is the best method for inserting every item from a textarea into my database?

I have encountered an issue with the code I am currently using. I have a modified version of this code implemented on another page, where a textbox is used instead of a textarea. Interestingly, the textbox version works perfectly fine. However, on my cur ...

phpmysqlhtmltextarea