CODEWITHSUNDEEP
htmlcssbootstrap-4
Digvijay
Digvijay

Reputation: 3271

Button is not aligning in center in bootstrap form

I have made bootstrap contact from in which I want to align all its element in center. Below is my code: 

    .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

enter image description here

As seen in screenshot button is not aligned in center.Someone please let me know how can I get desired layout. Any help would be appreciated.

THANKS

Upvotes: 0

Views: 113

Answers (4)

Mohammed Salahuddin
Mohammed Salahuddin

Reputation: 26

Add bootstrap class 'text-center'. please refer the below code.

<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>

Upvotes: 1

Berci
Berci

Reputation: 3386

Your button is not aligned because the your button is actually an input. All the elements are centered because they have margin: auto (so the remaining space is split evenly between the two margins). But the input elements (and the elements with class btn from bootstrap) are inline-block, and margin left and right properties are not working on inline and inline-block elements.

One option is the one that metaDesign sugested. Another option is to explicitly set the display property of the button to display: block.

so something like:

input.btn {
  display:block;
}

Upvotes: 0

to240
to240

Reputation: 381

if you could provide a working jsfiddle with all of your code in it, that would help. However, from what I can see, your issue can be solved by putting all of your form inside of a container with the text-center class.

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

Upvotes: 1

metaDesign
metaDesign

Reputation: 628

Add the following CSS

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

Upvotes: 3

Related Questions