Bootstrap 4 File Input Label Oveflows Column

Question

I am trying to create a form using Bootstrap 4. But the label for the file input overflows the column. I couldn't find a way to make it fit in the column. Is there a bootstrap way or custom css that can achieve this?

Edit: I'm sorry that my question was not well explained. What I meant by the label is that the label in file input. That isi "Choose file...". As can be seen the file input in the image overflows on the right side. It is not aligned with the rest of input fields.

<div class="form-group row">
     <label for="image-upload" class="col-sm-3 col-form-label">Resim Yükle (5:3 Oranlı)</label>

     <div class="custom-file col-sm-9">
           <input type="file" class="custom-file-input" id="image-upload" required>
           <label class="custom-file-label" for="image-upload">Choose file...</label>
           <div class="invalid-feedback">Example invalid custom file feedback</div>
     </div>
              <!--<div id="uploaded-images"></div> id=cover-image-input-->
</div>

Answer 1

You need to separate your col-sm-9 and custom-file divs.

<div class="col-sm-9">
    <div class="custom-file">
        <input type="file" class="custom-file-input form-control" id="image-upload" required>
        <label class="custom-file-label" for="image-upload">Choose file...</label>
        <div class="invalid-feedback">Example invalid custom file feedback</div>
    </div>
</div>

https://jsfiddle.net/qdfy91r5/1/

In addition, if you use the m-0 solution, it destroys your margins around every row. That answer only shows it in a one-row scenario, but you have multiple rows, which will squish them all together, as seen in the following fiddle that compares my answer to his:

https://jsfiddle.net/qdfy91r5/2/

Answer 2

Simply give m-0 ( margin: 0; ) to the row always because it gives horizontal scroll bar in your code sometimes.

You have .row classes that are not a child of .container or .container-fluid. Bootstrap requires .row be a direct child of .container or .container-fluid because .row has a negative left/right margin that works within left/right padding in .container and .container-fluid. So the negative margins on .row are creating the horizontal scrollbar and for that you need to give m-0 to the element.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="form-group row m-0">
     <label for="image-upload" class="col-sm-3 col-form-label">Resim Yükle (5:3 Oranlı)</label>

     <div class="custom-file col-sm-9">
           <input type="file" class="custom-file-input" id="image-upload" required>
           <label class="custom-file-label" for="image-upload">Choose file...</label>
           <div class="invalid-feedback">Example invalid custom file feedback</div>
     </div>
              <!--<div id="uploaded-images"></div> id=cover-image-input-->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>