Bootstrap col-md-4 inside a col-md-12

Question

I'm trying to have a col-md-4 inside a col-md-12, but it is not working.

HTML:

<form role="form" action="" method="post">
    <div class="row">
        <div class="col-xs-6 col-md-offset-3">
            <div class="col-md-12">
                <h3>Information</h3>
                <!-- This is fine because I want the name to be full size of the line -->
                <div class="form-group">
                    <label class="control-label">Name</label>
                    <input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
                </div>

                <!-- Here I want to break 3 input side by side -->
                <!-- Not working. Each rules is in one line -->
                <div class="form-group">
                    <label class="control-label">Rules</label>
                    <div class="row">
                      <div class="col-md-12">
                          <input type="number" required="required" class="col-md-4" placeholder="Rule1" />
                          <input type="number" required="required" class="col-md-4" placeholder="Rule2" />
                          <input type="number" required="required" class="col-md-4" placeholder="Rule3" />
                      </div>
                    </div>
                </div>
                <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
            </div>
        </div>
    </div>
</form>

Does anyone know how can I put the Rules side by side in the row?

Thanks

Possible duplicate of [Display two fields side by side in a Bootstrap Form](https://stackoverflow.com/questions/27451693/display-two-fields-side-by-side-in-a-bootstrap-form) — ChiefTwoPencils, Jun 21 '18 at 20:46

score 1 · Accepted Answer · answered Jun 21 '18 at 20:47

use

<div class="col-xs-4"></div>

or "col-md-4" xs just to show in this tiny preview

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <form role="form" action="" method="post">
      <div class="row">
          <div class="col-xs-12 col-md-offset-3">
              <div class="col-md-12">
                  <h3>Information</h3>
                  <!-- This is fine because I want the name to be full size of the line -->
                  <div class="form-group">
                      <label class="control-label">Name</label>
                      <input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
                  </div>

                  <!-- Here I want to break 3 input side by side -->
                  <!-- Not working. Each rules is in one line -->
                  <div class="form-group">
                      <label class="control-label">Rules</label>
                      <div class="row">
                        <div class="col-xs-4">
                            <input type="number" class="form-control" required="required" placeholder="Rule1" />
                        </div>
                        <div class="col-xs-4">
                            <input type="number" class="form-control" required="required" placeholder="Rule2" />                    </div>
                        <div class="col-xs-4">
                            <input type="number" class="form-control" required="required" placeholder="Rule3" />                    </div>
                        </div>
                      </div>
                  </div>
                  <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
              </div>
          </div>
      </div>
  </form>
</div>

Bootstrap col-md-4 inside a col-md-12

1 Answers1