bootstrap hides my field or it reduce its width - css

Question

I have a webpage utilizing the current bootstrap. It displays a label and text input box part of a form.
If I include the class="custom-control-input" to the input text field, Bootstrap hides it. Why?
If I don't include, it shows up, but it won't fulfill the full width according to its parent div tag.
The code is:
<div class="container">
<form class="needs-validation" novalidate action="submit_transgene_entry.php" method="post">
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID1">field below is shown, but won't extend full width</label>
</div>
<div class="col-md-10 mb-3">
<input type="text" id="comments_fieldID1" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID2">the following field is hidden by custom-control-input</label>
</div>
<div class="col-md-4 mb-3">
<input type="text" id="comments_fieldID2" class="custom-control-input" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<input type="submit" name='accept_transgene_entry' class="btn btn-primary btn-lg btn-block" value="Accept Transgene Entry" alt="Accept Transgene Entry"/>
</div>
</div>
</form>
</div>
You can see the code in action at this page

Answer 1

You must use the form-control class instead of custom-control-input.
I've edited your fiddle:
https://jsfiddle.net/2orbj50v/

Answer 2

Just add this in your CSS
#comments_fieldID1 {
width:100%;
}

Answer 3

Reason Behind Hiding this the class "custom-control-input" have some default css value from bootstrap like this, if you change the opacity 1 instead of 0 it will show the original field.
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
to make the input field full width just add this css
#comments_fieldID1 {
width:100%;
}

Answer 4

That may be because bootstrap 4 provide customized form elements for
Checkbox
Radio button
Range
Select
Upload
Toggle
And for these to work you have to wrap it around a <div> with class="custom-control custom-checkbox". The following is the example if you want to use custom-checkbox. But it won't work if you replace checkbox with text
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Custom checkbox</label>
</div>
And for your first input box, you can simply make it's with to be 100%. Like shown below:
#comments_fieldID1{
width:100%;
}

Answer 5

Best Answer : Use form-control for your #comments_fieldID1 element
Or you can add css in your css file :
#comments_fieldID1 {
width: 100%;
}