Input does not match col-md-8 size

Navigation
2

I'm training in form creation, and I'm making bootstrap use on it, mostly 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 follow the size of the column, thus leaving a blank space between the two fields. How do I make it increase? I tried css only in the id of the field and it did not result in change.

Below the code I'm using in 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'>
    
asked by anonymous 06.08.2018 / 17:52

2 answers

2

You can simply place 100% width on the inputs, so they take up the entire size of the column. (I put the css direct to all inputs, you can create a class more specific for this, here was just an example)

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

Show in "All page" to see how resposivity is 

    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>
    
06.08.2018 / 18:10
3

You do not need to add a custom style like @hugo indicated, just add the class form-control and the Bootstrap itself 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>
    
06.08.2018 / 18:21
Alternative to Miktex Values returned in comparison of strings in C