Bootstrap select options are wider than input - html

Question

I don't know why, but on scrren size 1024 x 768 my choose options from select are sooo big. How can I do this to this options to be width like select?
I would like to do this only on bootstrap 4 and use only classes from bootstrap but I don't know or it is possible and I don't know why this selects are acting like this. On larger screen sizes everything is ok.
How to fix it?
Here is my code:
<div class="row">
<div class="col-sm-6" style="border: 1px solid black">
<span class="font-weight-bold">Data</span>
<form role="form">
<div class="form-group">
<label class="control-label">Choose</label>
<select class="form-control" name="docType">
<option value="paragon">Test1</option>
<option value="complaint">Test2</option>
</select>
</div>
<div class="form-group">
<label for="docNo">Data</label>
<input type="text" class="form-control" id="docNo">
</div>
<div class="form-group">
<label for="docDate">Data</label>
<input type="text" class="form-control" id="docDate">
</div>
</form>
</div>
<div class="col-sm-6">
Test
</div>
</div>

Answer 1

Do you have something in your CSS that is forcing the options to be a static pixel size instead of allowing bootstrap's width to just be auto?

Answer 2

Usually the options tag will not display large options even if you are using bootstrap, but you could try adjusting the width by using the following css code for all form elements in html.
.form-control
{
width:90%;
}