Leave label side by side, bootstrap

Galera has difficulty putting the Name and Subject labels side by side, they simply will not

To put label next to input you have to use the form tag in this way <form class="form-horizontal"> this is the official documentation template.

% of .form-horizontal Documentation: link

See the example with your code using the official standard BS3

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<footer>
        <div class="container col-md-12 col-sm-12 col-xs-12" id="contatos" style="margin-top: 60px">
            <div class="text-center">
                <h2>ENTRE EM CONTATO</h2>
            </div>
        
            <div class="row" id="infos">
                <div class="col-xs-12" id="formulario">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Nome: </label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" name="nome" placeholder="Digite seu Nome">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Assunto: </label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" name="assunto" placeholder="Digite o assunto">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </footer>

Hello, Bruno!

Well, I'll try to explain how the Bootstrap GRID works:

You declared it right, but each col has its proportion, the sequence is like this;

• col-xs (For super-small cellphones or extrasmall)
• col-sm (For small or small tablets)
• col-md (For medium or medium-sized desktops)
• col-lg (For large or large desktops)

I tried to summarize for a better understanding, what you can do to make the same column responsive on the mobile or tablet, is to mix sizes, for example:

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<footer>
        <div class="container col-md-12 col-sm-12 col-xs-12" id="contatos" style="margin-top: 60px">
            <div class="text-center">
                <h2>ENTRE EM CONTATO</h2>
            </div>
        
            <div class="row" id="infos">
                <div class="col-xs-12" id="formulario">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Nome: </label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" name="nome" placeholder="Digite seu Nome">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Assunto: </label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" name="assunto" placeholder="Digite o assunto">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </footer>

Of course, this, as you need, the only problem is that you are joining col, row, and container all in the same statement, and this is one per line, now the structure would look like this: / p> %pre%

Now you can also test container-fluid , below the structure link, I think it's nice to read:

link

I hope I have helped you!

To leave the label on the input side, you need to put in your tag %code% the following %code% :

But this explanation has already been provided by hugocsl . But if your goal is to leave %code% side by side, you need to do some class games between your %code% :

  

Select View in "All Page" to view the result.

     

I would advise you to read more about the bootstrap documentation to learn more about the classes.

Bootstrap Documentation

I think this will help.

Hello, Bruno!

Well, I'll try to explain how the Bootstrap GRID works:

You declared it right, but each col has its proportion, the sequence is like this;

• col-xs (For super-small cellphones or extrasmall)
• col-sm (For small or small tablets)
• col-md (For medium or medium-sized desktops)
• col-lg (For large or large desktops)

I tried to summarize for a better understanding, what you can do to make the same column responsive on the mobile or tablet, is to mix sizes, for example:

<div class="col-sm-4 col-md-4"> 
   conteúdo
</div>

Of course, this, as you need, the only problem is that you are joining col, row, and container all in the same statement, and this is one per line, now the structure would look like this: / p>

<div class="container">
     <div class="row">
        <div class="col-md-12 col-sm-12">
            <h2>Entre em contato</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="col-md-6">
                Nome
            </div>
            <div class="col-md-6">
                Assunto
            </div>
        </div>
    </div>
</div><!-- fim container-->

Now you can also test container-fluid , below the structure link, I think it's nice to read:

link

I hope I have helped you!

To leave the label on the input side, you need to put in your tag <form> the following class :

<form class="form-horizontal">

But this explanation has already been provided by hugocsl . But if your goal is to leave input side by side, you need to do some class games between your <div> :

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<footer>
<div class="container-fluid" id="contatos" style="margin-top: 60px">
    <div class="text-center">
        <h2>ENTRE EM CONTATO</h2>
    </div>

    <div class="container" id="infos">
            <form>
                <div class="row justify-content-center">

                    <div class="col-md-6">
                    <label>Nome: </label>
                    <input type="text" class="form-control" name="nome" placeholder="Digite seu Nome">
                    </div>

                    <div class="col-md-6">
                        <label>Assunto: </label>
                        <input type="text" class="form-control" name="assunto" placeholder="Digite o assunto">
                   </div>
              </div>
          </form>
    </div>
</div>

  

Select View in "All Page" to view the result.

     

I would advise you to read more about the bootstrap documentation to learn more about the classes.

Bootstrap Documentation

I think this will help.