The alignment of the button within a Bootstrap form is off-center

Hello, I have created a Bootstrap contact form and I am trying to center all its elements. Here is the code snippet: 

    .third-section > form > input{

         width: 35%;
         margin: auto;
         margin-top: 25px; 
    }

    .third-section > form > textarea{
     
        width: 35%;
        margin:auto;
        margin-top: 20px; 
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <section class="third-section">
      
      <form>

          <input type="text" class="form-control" placeholder="Name" required/>

          <input type="email" class="form-control" placeholder="Email" required/>

          <textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>

          <input type="submit" class="btn btn-primary" value="SUBMIT"/>

      </form>

    </section>

SCREENSHOT

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

The button in the screenshot is not aligned in the center. Can anyone suggest how I can achieve the desired layout? Any assistance would be greatly appreciated.

THANKS

htmlcssbootstrap-4

Answer №1

Include the CSS below:

.third-section > form {
  align-items: center;
}

Answer №2

It would be greatly appreciated if you could share a functional jsfiddle containing your complete code. Based on my observation, resolving your problem can be achieved by wrapping your entire form within a container that has the text-center class.

<div class="container text-center">
...
</div>

Answer №3

Please include the bootstrap class 'text-center' in the following code snippet for center alignment:

<section class="third-section text-center">
  <form>
      <input type="text" class="form-control" placeholder="Name" required/>

      <input type="email" class="form-control" placeholder="Email" required/>

      <textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>

      <input type="submit" class="btn btn-primary" value="SUBMIT"/>
  </form></section>

Answer №4

The reason your button appears misaligned is because it is actually an input element. The centering of all elements is achieved by using margin: auto, which evenly distributes the remaining space between the margins. However, inline-block elements like input elements and elements with the btn class from Bootstrap do not respond to margin left and right properties.

One solution, as suggested by metaDesign, is to explicitly set the display property of the button to display: block.

This can be done by adding the following CSS:

input.btn {
  display:block;
}

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

Modify the css styles of an HTML element using TypeScript or JavaScript

I've implemented a star rating widget in an HTML form within my React JS application. The widget I am using can be found here. When a user clicks on one of the five stars, the user's information is saved to the server. Currently, the selected st ...

javascripthtmlcsstypescript

Guide to making a toggle button with a Light/Dark mode functionality

I have implemented a light/dark toggle button and now I want to integrate the functionality for switching between light and dark themes on my webpage. The switch should toggle the theme between dark and light modes when clicked. Some basic styling has been ...

javascripthtmlcsstogglebutton

Having trouble switching tabs on Bootstrap 4.3 beyond the first tab?

I have integrated bootstrap tabs into my web app by following the documentation provided on the bootstrap website. While I have successfully achieved the fade animation for the first tab, I am facing issues with getting the other two tabs to function prop ...

htmlasp.netbootstrap-4

Extracting data from DIV class tags, encountering VBA glitches

Trying to compile data into an Excel table from a website led me to discover this useful example, however, I encountered a VBA error. My current code is: Sub WebData() Dim http As New XMLHTTP60 Dim html As New HTMLdocument Dim currentRow As Long ...

htmlexcelvbaweb-scraping

Is there a way to change the color of the icon when the input fields are filled?

I am trying to change the color of the related icon for inputs when they are focused on or not empty, but my code doesn't seem to be working correctly for non-empty inputs. <div class="form-group"> &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Using Jquery to fadeIn specific child elements based on their

Recently, I've been facing an issue with incorporating JavaScript and HTML. My goal is to display an error message if the value of a text input is incorrect. $('input[name="login"]').blur(function() { $('.error:nth-child(2)&apo ...

javascriptjqueryhtmlcss-selectors

How to position a <div> in the center of a popup <div>

I've encountered a problem trying to center a <div> within another <div> that pops up when a button is clicked. It's not my code, but it's similar. Here is the HTML: <div class="popup"> <div class="options"> ...

htmlcss

Is it possible to submit form elements within a table using an ajax request?

My scenario involves a table that is generated dynamically and contains an edit and delete button in each row. When a user modifies the content of inputs, checkboxes, or textareas within a specific row and clicks on the edit button, I need to send this d ...

javascriptphpjqueryhtmlajax

How can we save individual words from a sentence in PHP without using the explode function?

I have created a PHP tag script for my website, but I feel like the code is too long. Is there a way to simplify and shorten it? <?php include("admin/apps/site-settings.php"); // establish database connection $albumq = mysql_query("select * fro ...

phphtmlarraysstringexplode

It appears that the flex-grow property is not functioning as expected

I am working with a parent div and two children divs underneath it. I noticed that when I set the flex-grow property of the first child to zero, its width remains constant. However, if I add text to the second child, the width of the first child decreases. ...

javascriptcssflexbox

Limit selection choices in select element

Similar Question: Prevent select dropdown from opening in FireFox and Opera In my HTML file, I have a select tag that I want to use to open my own table when clicked. However, the window of the Select tag also opens, which is not desirable. Is there a ...

javascripthtmlselect

The issue of an HTML button positioned on top of an image not remaining fixed when the browser window is resized

After mastering the art of placing an html form element on top of an image, I am now facing the challenge of making sure that the button remains intact even when I resize the window. For a reference, please visit: Note: Despite its simplicity, I acknowle ...

htmlcss

Fine-tuning components in HTML and CSS

Is there a way to align the asterisk symbol with the text and adjust the positioning of the Yes and No elements as depicted in the image? https://i.sstatic.net/mCsUG.png Check out this fiddle: https://jsfiddle.net/07bd0hda/ and snippet below: <div ...

htmlcsscss-position

Animation not properly synced with Bootstrap 4 Dropdown hide event

Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to script the action of unchecking checkbox 1 when checkbox 2 is checked, and unchecking checkbox 2 when checkbox 1 is checked?

Is it possible to create a custom radio button behavior with two checkboxes? For example, if checkbox 1 is checked, can we automatically uncheck checkbox 2 and vice versa? ( Transforming checkboxes into radio buttons. ) <input type="checkbox" id="chec ...

javascripthtmlcheckbox

Eliminate Video Time Indicator

Can the video progress bar be removed from this specific video player? I would like it to be integrated into the embed code that I share with others. <iframe id="hapyak-player-157199-8825" marginwidth="0" marginheight="0" frameborder="no" scrolling=" ...

javascripthtmliframe

How can I verify the content within a span element?

Here is the HTML code snippet I am working with: <span id="gruszka1">1</span> I have already figured out how to check if the specific span exists: if($('span#gruszka1').length){ //do something }); Now I want to determine if the te ...

jqueryhtml

Creating nested squares using flexbox

I've been working on replicating this layout using flexbox: https://i.sstatic.net/Fmuk2.jpg While I've made progress with the layout, I'm encountering some strange flex-wrap behavior like this: https://i.sstatic.net/qH8Jq.png Here's ...

cssflexbox

Limiting the width of the child UL within an LI element in a dropdown navigation menu

I am trying to find a way to limit the width of a <ul> tag within a dropdown menu in CSS to match the width of its parent <li> element without setting a fixed width. Despite my efforts, I have not been successful in achieving this and I am seek ...

cssdrop-down-menu

Need help creating perfect round buttons with bootstrap 4?

After incorporating this fiddle into my code, the goal was to design a circular button. View Fiddle Here The code provided is for bootstrap 3. However, when using it with bootstrap 4, the button ends up being square instead of circular. See example here: ...

cssbootstrap-4