Input does not track col-Md-8 size

Asked

Viewed 175 times

2

I’m training in creating Forms, and I’m making use of bootstrap in it, mainly from <div class="row"> and <div class="col-md-4">. However, when I put only two elements on the same line, respectively e` the input field of the first item did not track the column size, thus leaving a blank space between the two fields. How do I make it grow? I tried applying css only to the field id and it didn’t change.

Below the code I’m using on Row:

<div class="row">

<div class="col-md-8">
    <div class="form-group">
        <label>Nome Completo</label><br>
        <input id="fullname" type="text">
    </div>
</div>

<div class="col-md-4">
    <div class="form-group">
        <label>Idade</label><br>
        <input id="age" type="number">
    </div>
</div>
</div>

And links added externally:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

<link href='custom.css' rel='stylesheet' type='text/css'>
css html5 twitter-bootstrap bootstrap-3 bootstrap-4

  • Nathan, maybe you can increase your div’s padding or margin. Anyway you’d better expose a more solid example of your code so the answers are better.

  • Otávio, I added the part of code I’m using in Row, think it would be enough or put the form altogether?

2 answers

3

You don’t need to add a custom style, as @Ugo indicated, just add the class form-control and the very Bootstrap will apply.

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="row">

        <div class="col-md-8">
            <div class="form-group">
                <label>Nome Completo</label><br>
                <input id="fullname" class="form-control" type="text">
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label>Idade</label><br>
                <input id="age" class="form-control" type="number">
            </div>
        </div>
</div>

  • Just remembering that the form-control comes with several other classes that may not be interesting for the form they are building, especially if it is a custom form within the BS... I think maybe it’s best to use the w-100 class in this case as I put in the edit.

  • But given that the AP specified that it is training Forms with BS, I think it is more likely that .form-control be the most sensible response in this case.

2


Vc can simply put 100% width on the inputs, so they occupy the entire column size. (I put css directly to all inputs, vc vc can create a more specific class for this, here was just an example)

Or use the class w-100 which is an original Bootstrap 4 class and leaves the element with width: 100% (I used this class in the second input as an example)

Display under "Whole Page" to see how the resposivity looks

    input:first-of-type {
        width: 100%;
    }
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="row">

        <div class="col-md-8">
            <div class="form-group">
                <label>Nome Completo</label><br>
                <input id="fullname" type="text">
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label>Idade</label><br>
                <input id="age" class="w-100" type="number">
            </div>
        </div>
</div>

Browser other questions tagged css html5 twitter-bootstrap bootstrap-3 bootstrap-4

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