[Fixed]-Bootstrap fileupload button stacked beneath default html form button

by

1👍

✅

Posible duplicate question

Use Bootstrap FileStyle:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Changes the button text. Type: String, Default: “Choose file”

Via JavaScript:

$(":file").filestyle({buttonText: "Find file"});

Via data attributes:

<input type="file" class="filestyle" data-buttonText="Find file">
👤alfredo138923

0👍

You have to use another button element to wrap your btn-file and add your button text inside it.

I think this is what you want to achieve

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       
       </head>
       <body>
       
  <label class="btn btn-primary ">
  <button class="btn btn-file">my own text</button>
    your label
</label>
</body>
</html>

Hope this helps!

👤neophyte

Leave a comment