to have inline of the upload of the file

Question

I need to upload passport and photo but i want it to be inline

<div id="upload">
   <div>
      <label for="Passportcopy">Passport Copy</label>
      <input type="file" id="Passportcopy">
   </div>
   <div >
      <label for="Photo">Photo</label>
      <input type="file" id="Photo">
   </div>
</div>

css

#passport{
    float:left;
    display:inline;
    width:250px;
}

#photo{
    float:right;
    display:inline;
    width:250px;        
}

I have used container with following css . is it bcz of div the block form of file upload will appear ?

label, input, div {
     display: block;         
}

input{
    margin-bottom:10px;
    width: 40px;    
}

Or container having width or clear

.container {
     width:500px;
     clear:both;
}
.container input {
    width: 100%;
    clear: both;
}

score 0 · Answer 1 · answered Mar 02 '17 at 07:43

Are you looking for something like this?

 #passport{
    float:left;
    display:inline;
    width:250px;
 }

 #photo{
    float:right;
    display:inline;
    width:250px;
 }

#upload div{ /* new code */
  display:inline;
}

<div id="upload">
  <div>
    <label for="Passportcopy">Passport Copy</label>
    <input type="file" id="Passportcopy">
  </div>
  <div>
    <label for="Photo">Photo</label>
    <input type="file" id="Photo">
  </div>
</div>

neophyte · Accepted Answer · 2017-03-02T10:39:10.453

0

There is a native way to inline form elements in bootstrap using form-inline and form-control classes. You don't need to use any css if you use it in this way. I have provided a snippet demonstrating it.

Example

<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>
       <div class="container">
      
  <div id="upload row">
  <form class="form-inline">
  <div class="row">
    <div class="form-group col-xs-6 col-md-3 ">
      <label for="Passportcopy">Passport Copy</label>
    <input type="file" class="form-control" id="Passportcopy">
    </div>
    <div class="form-group col-xs-6 col-md-3 col-md-offset-1">
      <label for="Photo">Photo</label>
    <input type="file" class="form-control" id="Photo">
    </div>
    </div>
  </form>

</div>
</div>
</body>
</html>

Hope this helps!

edited Mar 02 '17 at 10:39

answered Mar 02 '17 at 08:15

neophyte

6,540
2
28
43

can I reduce the size of the of the photo and passport button . – Eiman Sadath Assadi Mar 02 '17 at 10:28
Yes just manipulate `
` add `col-xs-*` and if you want to achieve responsivness add all the responsive classes `
` .....here `*` can be any value from 1 to 12
– neophyte Mar 02 '17 at 10:34
Check the updated snippet..it will clear your confusion about how to use bootstrap grid system as well...expand the screen size to see the effect..hope this helps! – neophyte Mar 02 '17 at 10:40
styling file input is very difficult..although it's a very good source...[http://stackoverflow.com/questions/572768/styling-an-input-type-file-button] – neophyte Mar 02 '17 at 10:49
I have a container of 500px which is at the centre.the above code snippet overlaps one label over the other .i tried changing to col-xs-* the labels are not inline . – Eiman Sadath Assadi Mar 04 '17 at 11:25
do you mean `width:500px;`? – neophyte Mar 04 '17 at 11:30
if the width is 500px..it will automatically destroy the responsiveness of bootstrap..you need to use grid system..using width of px should never be used..bootstrap is developed to avoid such circumstances. – neophyte Mar 04 '17 at 11:39
glad that it helped! – neophyte Mar 04 '17 at 12:50
If an answer helps you consider upvoting it..if it solves your problem please click the green check mark to accept it..that's how SO works..otherwise people will think that the question is still open and it will attract spam answers.. at the same time if it didn't help you leave a comment to let people know that the answer is not correct. – neophyte Mar 05 '17 at 11:48

to have inline of the upload of the file

2 Answers2