What is the right way to use form-group bootstrap?

Question

Which Correct Way to Use Form Group ?

I use it as follows

    <div class="row">
        <div class="col-md-2" align="center">
            <span class="glyphicon glyphicon-user" style="font-size:60px"></span>
        </div>
        <div class=" col-md-10">
            <form class="form-group" role="form">
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-10">
                                    <label>Nome</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label>Situação</label>
                                    <select class="form-control">
                                        <option>Ativa</option>
                                        <option>Inativa</option>
                                    </select>
                                </div>
                            </div>
        </div>
    </form>
</div>

and apart from form-group it works,

leaving it to input and select it works

leaving form-group to face one of the components, it works...

What the right way?

Answer 1

The idea is that the .form-group "replace" the .row, being as follows:

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
</form>

All content <input>, <textarea> and <select> of these elements with . form-control are configured with width: 100%; by default. Place Labels and controls inside the . form-group to get a spacing best. Bootstrap Documentation