CODEWITHSUNDEEP
htmlbootstrap-4
marceltje
marceltje

Reputation: 127

Form file doesn't align with rest of form

So im having some issues trying to add in a file selection into my bootstrap(4.1.3) form. It looks off from the rest of the form

I tried using the example file forms from getbootstrap.com though they look even further streched out, this is the closest i could get it myself


<!-- this one works just fine -->
<div class="form-group row">
    <label for="titel" class="col-4 col-form-label">Titel van Email</label>
    <div class="col-8">
        <input id="titel" name="titel" type="text" required="required" class="form-control">
    </div>
</div>
<!-- this one looks off -->
 <div class="form-group row">
     <label class="filel" class="col-4 col-form-label">Choose image file...</label>
    <div class="col-8">
        <input type="file" class="form-control" id="customFile" name="myImage">
    </div>
 </div>

enter image description here

here's a screenshot of the result

Upvotes: 0

Views: 46

Answers (2)

Kiran Mistry
Kiran Mistry

Reputation: 2725

This is your solution

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <div class="form-group row">
     <label for="titel" class="col-4 col-form-label">Titel van Email</label>
     <div class="col-8">
         <input id="titel" name="titel" type="text" required="required" class="form-control">
     </div>
 </div>

 <!-- This is your fixed code -->
 <div class="form-group row">
      <label class="file1 col-4 col-form-label">Choose image file...</label>
      <div class="col-8">
          <input type="file" class="form-control" id="customFile" name="myImage">
      </div>
 </div>

Upvotes: 1

Correia7
Correia7

Reputation: 396

The error is caused by adding the class attribute twice in the label with the class file1.

 <div class="form-group row">
     <label for="titel" class="col-4 col-form-label">Titel van Email</label>
     <div class="col-8">
         <input id="titel" name="titel" type="text" required="required" class="form-control">
     </div>
 </div>
 <!-- fixed -->
 <div class="form-group row">
      <label class="file1 col-4 col-form-label">Choose image file...</label>
      <div class="col-8">
          <input type="file" class="form-control" id="customFile" name="myImage">
      </div>
 </div>

Upvotes: 0

Related Questions