DDD + CSS phone

Asked

Viewed 828 times

-4

I’m setting up a register, and on it I need to put a DDD field and next to the phone, to stay this way:

inserir a descrição da imagem aqui

Bootstrap version: 3.3.7

In the documentation exists the form-inline, but it not as expected. I tried atheist put the class col-xs-2 and 10, but the inputs are on top of each other.

<!-- scripts -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <div class="col-xs-6">
        <div class="form-group">    
            <label> RG </label>
            <input class="form-control" type="text" />
        </div>
        <div class="form-inline">
            <div class="form-group">
                <label><span style="color: red"> * </span> DDD </label>
                <input class="form-control" type="text" />
            </div>
            <div class="form-group">
                <label><span style="color: red"> * </span> Telefone </label>
                <input class="form-control" type="text" />
            </div>
        </div>
    </div>

html css bootstrap-3
  • 1

    Easier to put part of the code so that it is easier to identify what is occurring

  • 1

    Felipe, it might be interesting for you to redo the [tour], read the guide to [Ask] and access [help], as it seems you have misunderstood some parts of the website’s operation. Negative votes do not represent that your question is useless, but are only an indication that your question is bad and should be improved according to the patterns defined in the previous links. You didn’t post the HTML code and when you posted it as an image. This is far from what is recommended as a [mcve]. Before being sarcastic with those who voted on your question it is interesting to learn how to use the site correctly.

  • If you happen to have any specific questions about the behavior of the community or the operation of the site that [help] was not clear enough, you will be welcome at [meta], where the goal is to discuss about it.

1 answer

1


I don’t understand what your difficulty was, but just do as you are at documentation and put the size you want the input into the classes of grid:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="form-group col-xs-12">
  <label for="rg">RG</label>
  <input type="text" class="form-control" id="rg" placeholder="00000000">
</div>
<div class="form-group col-xs-2">
  <label for="ddd">* DDD</label>
  <input type="text" class="form-control" id="ddd" placeholder="00">
</div>
<div class="form-group col-xs-10">
  <label for="tel">* TELEFONE</label>
  <input type="text" class="form-control" id="tel" placeholder="00000-0000">
</div>

  • 1

    Thank you @Leandrade

  • For nothing Felipe, as said in the comments above, when you are going to ask a question here on the site, try to detail the problem to the maximum and if possible insert the codes related to the problem. Success!

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.