Form created with Bootstrap is not properly aligned in the middle of the div

I have a Bootstrap form with two fields that I've styled using the .d-inline-block class to align them side by side. However, I have another field that is not styled and should appear below the first two, but I'm struggling to center it within the div.

The first two fields are centered properly, but the last div is not. Can anyone help me identify what I'm doing wrong?

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

.d-inline-block {
  
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
<form class="formClass ">
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="nameInput">
      <div class="form-control-placeholder"> Name </div>
  </div>
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="phoneInput">
      <div class="form-control-placeholder"> Phone </div>
  </div>

  <div class="form-group message">
    <input type="text" class="form-control" id="phoneInput">
            <div class="form-control-placeholder"> Phone </div>
  </div>
</form>

https://jsfiddle.net/97avbgsq/

htmlcsstwitter-bootstrap

Answer №1

Make sure to assign a class to the third DIV element and set its style to display: inline-block;:

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

.d-inline-block {
  
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
.x {
  display: inline-block;
}
<form class="formClass ">
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="nameInput">
    <div class="form-control-placeholder"> Name </div>
  </div>
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>

  <div class="form-group message x">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>
</form>

https://jsfiddle.net/tyuxpzk9/1/

Answer №2

Instead of creating custom CSS classes to control form field sizes and position, consider utilizing Bootstrap's built-in grid system column classes for better control.

Explore Bootstrap 4 Grid System

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<form>

  <div class="row">
    <div class="form-group col-sm-4 offset-sm-2">
      <input type="text" class="form-control" id="nameInput">
      <label class="d-block text-center" for="nameInput">Name</label>
    </div>
    <div class="form-group col-sm-4">
      <input type="text" class="form-control" id="phoneInput">
      <label class="d-block text-center" for="phoneInput">Phone</label>
    </div>
  </div>
  
  <div class="row">
    <div class="form-group col-sm-8 offset-sm-2">
      <input type="text" class="form-control" id="emailInput">
      <label class="d-block text-center" for="emailInput">Email</label>
    </div>
  </div>
  
</form>

Answer №3

Utilizing the power of bootstrap 4, you have the option to employ the helper classes 

.d-flex .flex-wrap .justify-content-center
on the parent element.

.d-inline-block {
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass d-flex flex-wrap justify-content-center">
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="nameInput">
    <div class="form-control-placeholder"> Name </div>
  </div>
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>

  <div class="form-group message">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>
</form>

If you prefer sticking with your original code, when you want to horizontally center a block element with a width, just make use of 

margin-left: auto; margin-right: auto
or simply margin: auto for short if that suits your needs. You can also accomplish this by utilizing the .mx-auto bootstrap helper class.

.d-inline-block {
  width: 40%;
}

.message {
  width: 80%;
}

.formClass {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass ">
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="nameInput">
    <div class="form-control-placeholder"> Name </div>
  </div>
  <div class="form-group d-inline-block">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>

  <div class="form-group message mx-auto">
    <input type="text" class="form-control" id="phoneInput">
    <div class="form-control-placeholder"> Phone </div>
  </div>
</form>

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

<div><!-- including: unknown --></div>

Need some assistance with this issue. The ng-include path I am using is "http://localhost:8080/coffeeprojects/calc.html". I tested the path and it seems to be working. However, despite organizing the files and improving the path as suggested in some resp ...

javascriptjqueryhtmlangularjscoffeescript

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

javascriptjqueryhtmlcssjson

"Troubleshooting Issue: jQuery dataTables Filter Functionality Inoperative When Conjoined with

Incorporating the dataTables plugin and recycling code from another page to create a select for filtering a specific column, I encountered issues with the filtering functionality not working as expected. This was perplexing since it was code that had previ ...

jqueryhtmldatatables

Artistic Canvas: Selected Image

I am trying to determine if the user has clicked on an image drawn in a canvas element. Despite clicking on the image, nothing seems to be happening. The alert function is not being triggered and the last condition in the code never evaluates to true. An ...

javascriptcsscanvasposition

Splitting HTML code into separate sections based on tables is the main feature of Simple HTML DOM

My task involves scraping data from a webpage, but the challenge lies in the fact that the content is not enclosed within divs or any specific tags. The only distinguishing feature I have found is a particular table that separates the chunks of data I requ ...

htmlweb-scrapingsimple-html-dom

Bootswatch's Bootstrap 4 dropdown and margin error issue

Recently, I decided to experiment with the new version of Bootswatch that is based on Bootstrap 4. However, I encountered a couple of issues - the "Cards" seem to have no margin and the dropdown in the menu doesn't function as expected. Can anyone she ...

htmlbootstrap-4bootswatch

Outlook's limited width is causing images to exceed the boundaries of the HTML email

I have a collection of images that display perfectly in Gmail, but when viewed in Outlook, all five images appear within a single <tr> and cause the table width to expand. My desired layout is to have the first four images centered on the first line ...

htmlcsshtml-table

Choose an option from the dropdown list using ellipses

I am looking to truncate the dropdown list options with ellipsis, and when clicked on the ellipsis, users should be able to view the full option values. For instance, the dropdown list currently looks like this: <select id ="id"> <option ...

javascriptjqueryhtmlcss

Verifying the angular form without the need for a submit button

I'm currently utilizing angular.js form validation and I'm looking to implement validation without the use of a form submit button. Below is my HTML code: <form name="userForm"> <input type="hidden" ng-model="StandardID" /> < ...

htmlangularjs

Interactive menu backdrop determined by div element

I am working on a website with a menu structured like the following: Home -- Work -- Pricing -- Contact Us -- About This website uses a one-page layout and has enabled Scrollspy on Bootstrap. I need to make the active menu background dynamic depending o ...

csstwitter-bootstrap

What is the best method for eliminating the empty space below the footer?

I noticed a gap at the bottom of my website Header and CSS# There seems to be some white space at the bottom of my website's header even though I'm using bootstrap The white space issue in the header of my website persists despite using boot ...

htmlcssbootstrap-4footerspace

Compatibility issues with jQuery observed in Firefox and Internet Explorer 11

Check out the code here: jsfiddle demo HTML CODE: <div class="first"> <!-- Part one --> <div class="acord_col"> <div class="img_class" id="exist_site"></div> <div class="intro_text"> </div> </div&g ...

javascriptjqueryhtmlcssfirefox

How to Handle Date Formatting in Angular with Ionic

Utilizing the ionic framework to create a hybrid app with Angular, I have encountered an issue with a form that includes two input boxes: one for date and one for time. The date input's value is being saved in the database in this format: Tue Mar 24 ...

angularjshtmldatetimeionic-framework

What is the reason for the enhanced sharpness of fonts in Chrome compared to other browsers?

I couldn't find an answer to this question through my searches on Google, so I apologize if it's already been asked. I've been working on a web project recently and one thing I noticed is that the fonts appear much bolder in Firefox or Safar ...

htmlgoogle-chromefirefoxsafaritypography

Avoid duplicate borders on columns that adjust their size based on the screen width

Picture yourself utilizing Bootstrap 4 and displaying various cells, each with unpredictable numbers. .cell { border: 1px solid black; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> < ...

csstwitter-bootstrapbootstrap-4border

Adjust the height of a div containing variable elements

I'm having trouble adjusting the height of a div so that it can be scrolled all the way through. This div is positioned next to another one, so I set the overflow-y to scroll. Initially, I thought setting the height to auto would solve the issue, but ...

javascripthtmlcssscroll

"Implementing a dynamic loading effect in Highcharts triggered by a button

Take a look at this sample highchart fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ $('#button').click(function () { var chart = $('#containe ...

javascriptjquerycsshighcharts

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

Encountering an issue with Angular routing: Cross-origin requests are restricted to specific protocol schemes, such as HTTP

I encountered an error while working on angular routing. Below is my HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src= ...

javascripthtmlangularjs

Align text vertically within labels and links styled with bootstrap

When using bootstrap button styled labels and links with a larger height than default, the text tends to be vertically aligned at the upper side of the button. However, when using an actual button element, the text is centered vertically. Is there a way t ...

htmlcsstwitter-bootstrap