The alignment of buttons and input fields is not horizontal

How can I create a file upload option like this?

| Choose File |Browse_btn| |Upload_btn| |Cancel|

I've tried writing the code in HTML but I'm not getting the desired output.

Here is my HTML code:

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="row">
    <div class="col-md-5" style="margin-right :20px; border: 1px solid #e5e5e5; height: 32px; margin-right: 40px;">
      <div style="height: 32px;">
        <input type="file" name="fileupload" value="fileupload" id="fileupload" style=" margin-right: 80px;" class="mt-3" />
        <input type="submit" value="Upload" onclick="fnUpload()" class="btn blue">
        <input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue">
      </div>
    </div>
  </div>
</body>

</html>

htmlcssbootstrap-4

Answer №1

One suggestion is to include the display: flex; property in the line below.

<div style="height: 32px;display: flex;">
....
</div>

Answer №2

Here is the exact solution you need.

<html>
 <head>
   <link rel="stylesheet" 
     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
   </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
   </script>
</head>

<body>
  <div class="row">
    <div class="col-md-5" style="margin-right :20px; border: 1px solid #e5e5e5; height: 32px; margin-right: 40px;">
      <div style="height: 32px;">
        <span> Select File : </span>
        <input type="button" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" />
        <input type="file" style="display:none;" id="file" name="file"/>
       <input type="submit" value="Upload" onclick="fnUpload()" class="btn blue" style="display:inline-block">
       <input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue" style="display:inline-block">
     </div>
   </div>
  </div>
</body>

</html>

Demonstration : https://codepen.io/pgurav/pen/mddKPmY

Answer №3

Include the following CSS:

display: flex;

within the nested div that has a height of 32px

Answer №4

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="row">
    <div class="col-md-5" style="margin-right: 40px; display:flex">

        <input type="file" name="fileupload" value="fileupload" id="fileupload" class="mt-3" />
        <input type="submit" value="Upload" onclick="fnUpload()" class="btn blue">
        <input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue">

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

</html>

Answer №5

It appears that your question is tagged as bootstrap-4, but you are actually importing version 3:

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

To achieve the desired button layout, you can utilize the input-group feature in Bootstrap 4. For further customization options, please refer to the official documentation.

Your code should resemble something similar to this:

<html>        
<head>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
          <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
    
<body>
      <div class="container">
          <div class="row">
                <div class="input-group" style="margin-right :20px; border: 1px solid #e5e5e5; height: 32px; margin-right: 40px;">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Choose file</span>
                    </div>
                    <div class="custom-file">
                        <input type="file" name="fileupload" value="fileupload" id="fileupload" style=" margin-right: 80px;" class="mt-3" />
                    </div>
                    <div class="input-group-append">
                        <input type="submit" value="Upload" onclick="fnUpload()" class="btn blue">
                        <input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue">
                    </div>
                </div>
           </div>
        </div>
</body>
</html>

Answer №6

If you want to align #fileupload to the left, simply add the following CSS:

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

 <style>
     #fileupload { float:left; }
 </style>
<body>
  <div class="row">
    <div class="col-md-5" style="margin-right :20px; border: 1px solid #e5e5e5; height: 32px; margin-right: 40px;">
      <div style="height: 32px;">
        <input type="file" name="fileupload" value="fileupload" id="fileupload" style=" margin-right: 80px;" class="mt-3" />
        <input type="submit" value="Upload" onclick="fnUpload()" class="btn blue">
        <input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue">
      </div>
    </div>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating JSON data visually into an HTML document

How can I include a json file, which is a gif, as an image in an HTML file so that it displays on the page? I attempted to do so with the following code: <img src="myFile.json"/> However, it doesn't seem to be working. I searched onl ...

javascripthtmljsongifanimated-gif

I am having trouble getting the pagination to function properly on my custom materialize projects

I am experiencing issues with the list of sub-pages on the official demo sites: Materialized Materialize(css) The navigation bar does not update the active page number or content when clicked. Both websites are using materialize css. If you click ...

jqueryhtmlmaterializematerialized

How can we prevent the restoration of size effects in jQuery UI versions 1.9 and above?

After implementing jQuery UI 1.9 or newer, I noticed that the size effect returns to its original state. Below is a snippet of my code: http://jsfiddle.net/mQCxY/ $(function () { $('.circle').click(function () { $(this).effect("size ...

jquerycssjquery-ui

What is the best way to reduce the spacing between text?

I am trying to figure out how to reduce the spacing between my text so that it aligns like the example below. Take a look at the text "Welcome to my portfolio". Currently, when I run my code, there is a large gap between "Welcome to my" and "Portfolio". ...

htmlcss

What could be causing my JavaScript to malfunction after clicking on anchor links?

My website's JavaScript has a bug where clicking the links in the static header causes scrolling to become buggy and unbearable. What can I do to fix this issue? Thank you in advance. Here is my code: $(window).load(function(){ $(windo ...

javascriptjqueryhtmlcssjscript

What is the reason behind the inability of vertical margins to collapse?

Review the code snippet below: <!doctype html> <html> <style> div.compact-inverse { border: 1px solid black; } div.compact-inverse > input { display: inline-block; width: 16px; height: 16px; margin: 12px ...

htmlcssmargin

Adjust the color of the hyperlink within the Lightbox feature

I am currently using Lightbox Plus. I made some changes to the link colors in the Lightbox.min.css file: .lightbox a{ color: #E74C3C; } .lightbox a:hover{ color:white; } .lightboxOverlay a:{ color: #E74C3C; } .lightboxOverlay a:hover{ color:white; ...

csshyperlinklightbox

What is the best way to implement CSS chat messages with rounded borders?

I am currently compiling a list of messages sent and received on our chat platform. Here is the current layout: Check out the preview However, I would like to revamp this structure to something like the following: Take a look at the new preview here I ...

htmlcsschat

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

The proximity between two columns of HTML elements is not closely aligned

Currently, my web app has two columns when the screen size is big enough. https://i.sstatic.net/aQPlF.png The spacing between the elements in the left column and the one below it is causing an issue that I want to address. .thumnnail { display: inl ...

htmlcss

Creating a script in LoadRunner for recording

I am facing a challenge trying to record a script using LoadRunner. Despite my efforts, nothing seems to be happening. Let me provide more details: I have created a new web-based script using Web - HTTP/HTML as I aim to record actions performed in IE. Afte ...

htmlctestingwebloadrunner

Steps for arranging columns in code using Bootstrap

Required display layout for desktop version: 1 | 2 Required display layout for mobile version: 2 1 How can I achieve this using order classes? This is the code I'm currently using: <div class="row"> <div class="col ...

twitter-bootstrapbootstrap-4

Update the placement of footnotes in Jekyll

Can anyone provide guidance on whether this task is achievable and how to go about it? I've been struggling all day and feeling lost. The objective is to add a piece of text at the end of an article, which is stored in a variable like site.data.setti ...

htmlmarkdownjekyll

What is causing my AJAX Contact Form to navigate away from the original page?

I configured a contact form on my website more than 5 years ago, and I vividly remember that it used to show error/success messages directly on the page within the #form-messages div. However, recently, instead of staying on the contact form page and displ ...

javascriptphphtmljqueryajax

What is the method for modifying the text color of P tags within a div element?

I'm having trouble changing the text color of the P tags in the card-header section for some reason dashboard.html <div class="container"> <div class="card"> <div class="card-header"> <p& ...

htmlcss

Implementing tab selection functionality in jquery-ui version 1.10.4

Seeking to capture a tab selection event, similar to the example provided in this jsfiddle from a question on Stack Overflow that dates back almost 3 years. The code below successfully functions with jquery-ui-1.8.9 as demonstrated in the linked jsfiddle: ...

javascriptjqueryhtmljquery-ui

Icon click does not pass the button's value attribute

In my website, I have implemented an HTML button using Bootstrap to serve as an icon that can toggle the state of an item. Here is the code for the button: <button class='btn' value='${noteid}' onclick='toggleAck(event)'> ...

javascripthtmljquerybootstrap-4jinja2

What is the best way to create shaded areas upon clicking them?

How can I implement shading on areas when they are clicked? Contractor Form (Package One) <area id="39" name ="39" alt="" title="39" href="#" shape="poly" coords="12,204,12,120,138,117,144,72,248,72,252,124,526,125,632,81,668,157,698,149,722,2 ...

javascriptjqueryhtmlcssajax

Guidelines on creating actionable functions using JavaScript

Having trouble connecting the form to the database and looking for a solution. This is the HTML form that I've been working on, attempting both POST and GET methods. <form id="register" action="script/register.js" method="post"> <label for= ...

javascriptjqueryhtml

Intersecting div elements in IE 11 are hindering the functionality of

Encountering an issue in IE 11 where overlapping divs are affecting the functionality of radio buttons. Specifically, the first div containing a radio button is being blocked from receiving mouse events by the second overlapping div, making it impossible t ...

cssinternet-explorerinternet-explorer-11