CODEWITHSUNDEEP
twitter-bootstrapcenter-aligntwitter-bootstrap-form
Ajeet
Ajeet

Reputation: 58

I want my Bootstrap form to be centrally aligned, I have used the standard classes of BS Form, but the form always aligned to left

I used various classes for margin:0 auto, and for center-alignment but not worked.

 <div class="container">
    <div class="col-md-12 newsletter">
                <form action="#" method="post">                   
                    <div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
                             <label for="email">Email address:</label>
                             <input type="email" class="form-control" id="email">
                        </div>

              <div class="clearfix"></div>

                        <div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
                            <label for="email">Email address:</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                </form> 
              </div>
       </div>

Upvotes: 1

Views: 80

Answers (2)

Olha Vadiasova
Olha Vadiasova

Reputation: 418

You may add -offset- class to the div with col- classes. For example:

<div class="form-group col-md-offset-4 col-md-6 col-xs-10 col-sm-10 col-lg-4">

col-md-offset-4 will add extra space, so the input with label will be centered. For further information read this documentation

UPD You may also use flexbox. Apply this css style to your code:

.newsletter {
  display: flex;
  justify-content: center;
}

But keep in mind that you will need to remove bootstrap classes (col-md, col-xs etc) from the div with form-group class name. You can view the working example with flexbox here

HTML:

<div class="container">
    <div class="col-md-12 newsletter">
                <form action="#" method="post">                   
                    <div class="form-group">
                             <label for="email">Email address:</label>
                             <input type="email" class="form-control" id="email">
                        </div>

              <div class="clearfix"></div>

                        <div class="form-group">
                            <label for="email">Email address:</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                </form> 
              </div>
       </div>

CSS:

.newsletter {
  display: flex;
  justify-content: center;
}

Upvotes: 1

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Try this:

Check Demo here

HTML:

<div class="container">
  <div class="row">
    <div class="section-form">
      <div class="col-md-12 newsletter">
        <form action="#" method="post">
          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>

          <div class="clearfix"></div>

          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS:

.section-form {
  max-width:550px;
  margin:auto;
}

Upvotes: 1

Related Questions