CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Marius
Marius

Reputation: 1281

How can align the center bootstrap this formulation?

I have this sample:

link

CODE HTML:

<div class="container-fluid">
    <div class="row">
      <div class="col-md-6 box1">
            <div class="row">
                    <div class="col-md-6">
                          <label for="firstname">First Name<span id="star">*</span></label>
                          <input type="text" name="firstname" id="firstname" placeholder="John">
                    </div>
            </div>

            <div class="row">
                    <div class="col-md-6">
                          <label for="firstname">First Name<span id="star">*</span></label>
                          <input type="text" name="firstname" id="firstname" placeholder="John">
                    </div>
            </div>


            <div class="row">
                    <div class="col-md-6">
                          <label for="firstname">First Name<span id="star">*</span></label>
                          <input type="text" name="firstname" id="firstname" placeholder="John">
                    </div>
            </div>



      </div>
      <div class="col-md-6 box2">sss</div>

    </div>
</div>

CODE CSS:

.box1{
    background:red;
  }
.box2{

    background:aqua;
    }

On the left there are three forms and I want these forms to be aligned to the center ... What more should be done this by using bootstrap?

Thanks in advance!

Upvotes: 0

Views: 43

Answers (2)

Nere
Nere

Reputation: 4097

Try this:

<div class="container-fluid">
<div class="row">
  <div class="col-md-6 box1 col-md-offset-3">
        <div class="row">
                <div class="col-md-6">
                      <label for="firstname">First Name<span id="star">*</span></label>
                      <input type="text" name="firstname" id="firstname" placeholder="John">
                </div>
        </div>

        <div class="row">
                <div class="col-md-6">
                      <label for="firstname">First Name<span id="star">*</span></label>
                      <input type="text" name="firstname" id="firstname" placeholder="John">
                </div>
        </div>


        <div class="row">
                <div class="col-md-6">
                      <label for="firstname">First Name<span id="star">*</span></label>
                      <input type="text" name="firstname" id="firstname" placeholder="John">
                </div>
        </div>



  </div>
  <div class="col-md-6 box2 col-md-offset-3">sss</div>

</div>

Upvotes: 1

m4n0
m4n0

Reputation: 32355

Remove the nested col-md-6 since it adjusts the width to 50% and will not help centering the content. Add text-center class to the parent container.

.box1 {
  background: red;
}
.box2 {
  background: aqua;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 box1 text-center">
      <div class="row">

        <label for="firstname">First Name<span id="star">*</span>
        </label>
        <input name="firstname" id="firstname" placeholder="John" type="text">

      </div>

      <div class="row">

        <label for="firstname">First Name<span id="star">*</span>
        </label>
        <input name="firstname" id="firstname" placeholder="John" type="text">

      </div>


      <div class="row">

        <label for="firstname">First Name<span id="star">*</span>
        </label>
        <input name="firstname" id="firstname" placeholder="John" type="text">

      </div>



    </div>
    <div class="col-md-6 box2">sss</div>

  </div>
</div>

Upvotes: 1

Related Questions