Aligning HTML form elements side by side

I am having trouble displaying multiple Bootstrap elements and buttons in a single line. Here is an example of what I have:

<span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline"></span>
<span><input type="button" id="get_file" class="btn btn-primary" value="Browse" style="display: inline"></span>
<span><input type="button" id="get_file" class="btn btn-success" value="Upload" style="display: inline"></span>
<input type="file" id="my_file" accept=".zip" style="display: none">

This code should display a text field with two buttons, but my output looks like this:

https://i.stack.imgur.com/OiccI.png

I want the two buttons to appear on the same row as well.

jqueryhtmlcsstwitter-bootstrap

Answer №2

Check out this snippet:

<form class="form-horizontal form-inline">
        <span><input class="form-control" id="filename" value="Choose a ZIP file to upload..." disabled ></span>
        <span><input type="button" id="get_file" class="btn btn-primary" value="Browse"></span>
        <span><input type="button" id="get_file" class="btn btn-success" value="Upload"></span>
        <input type="file" id="my_file" accept=".zip" style="display: none" >
    </form>

Answer №3

<form class="form-inline">
<span><input class="form-control" id="filename" value="Click here to select a ZIP file for upload..." disabled></span>
<span><input type="button" id="get_file" class="btn btn-primary" value="Select File"></span>
<span><input type="button" id="get_file2" class="btn btn-success" value="Upload Now"></span>
<input type="file" id="my_file" accept=".zip" style="display: none">

Give it a try.

Take a look at this resource.

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

Bringing HTML into Excel with VSTO

I have encountered an issue while trying to import data from HTML files into Excel using VSTO (VB.NET). I am facing errors as I attempt to parse the HTML, and since I am new to this process, I need assistance in figuring out where my code is incorrect. I ...

htmlexcelvb.netvsto

Adjust the font size to fit the size of the button when resizing a md-button

Currently utilizing md-button with text inside An issue arises in low resolution where the text gets cut off, struggling to find a suitable solution If anyone has any suggestions on how to resolve this problem, please share. I have included screenshots ...

htmlcssangularjsangular-material

What is the process for creating a two-column table in Angular?

Currently, I have an Angular template code that displays the header on the left and data on the right in a top to bottom layout. <div class="panel-body"> <table class="table table-striped"> <tr ng-repeat="f in fields"&g ...

htmlcssangularjstwitter-bootstrap

Ensuring that the bootstrap5 column extends all the way to the footer

Looking to display a specific email address mailbox for a project. The goal is to have the 'Mail Card List' scrollable instead of extending beyond the page. Tried using 'max-height:;' CSS, but it sets a fixed height. Seeking a variable ...

htmlcssbootstrap-5

Alert: Windows Gadget AJAX Security Advisory

I have developed a Windows Gadget that utilizes JQuery to access the oAuth-Service provided by Yammer: (API Documentation) $.ajax({ url: "https://www.yammer.com/oauth/request_token", type: "GET", beforeSend: function (xhr) { xhr.setRe ...

jqueryajaxsecuritywindows-desktop-gadgets

Hiding the author, category, and date information from displaying on WordPress posts

After creating a Wordpress blog site and adding the category widget to the right sidebar as a drop down, I realized that I needed to customize its layout in terms of colors and design. However, I am struggling to find out how it can be done, which .php fil ...

phpcsswordpress

Exception thrown by the 'upload' method of the Krajee file-input widget

I have been using the fileinput widget from Krajee at this link: However, I seem to be encountering an issue with the 'upload' method. Everything works perfectly fine when I upload files by clicking the upload button. But when I try to use the u ...

javascriptjqueryasp.net-mvc

Accessing and manipulating a intricate JSON structure within an Ionic 3 framework to seamlessly connect it to the user

I'm currently developing an app using Ionic 3. Within my project, I have a JSON object structured like this: { "player": { "username": "thelegend", "platform": "xbox", "stats": { "normal": { "shots ...

androidhtmljsontypescriptionic-framework

Thumbnails gracefully hovering alongside titles

I am puzzled by the fact that some of the thumbnails are displaying differently even though they have the same CSS... h4 { line-height:100%; color: #be2d30; letter-spacing: 1px; text-transform: uppercase; font-family: 'Gnuolane'; font-size:26px ...

csshtmlimageviewtitle

Tips for effectively overriding default CSS in JavaFX 8 for TableView

I've been trying to customize the appearance of specific columns in a tableview using JavaFX. My goal is to make editable values display with a light yellow background to indicate that they can be edited. However, when I apply the following CSS to th ...

csstableviewjavafx-8

Enhance the appearance of your forms with the "Bootstrap

I'm having trouble with the input-group-addon class. My HTML code is dynamically generated using JavaScript and follows the same structure across different pages. However, it works on one page but not on another. I can't seem to figure out why! ...

htmlcsstwitter-bootstrap

Make the div come to life by animating it as its

I'm currently working on a project involving three boxes that change position when clicked. I want to be able to switch the selected box with another box, but I am struggling to add an animation to show the transition between them. I would greatly ap ...

jquery

Having trouble retrieving input field values with Angular.js

I am struggling to access the input field values in my Angular.js application. Below is the code snippet I am using: <div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon ndrftextwidth text-right" style="width:180px"& ...

javascriptjqueryangularjs

Identify the externally-sourced element of interest

I'm attempting to apply a ScrollReveal effect to an element loaded from a separate html file called "header.html". Unfortunately, the ScrollReveal animation is not working on this particular element, while other elements within my index.html are funct ...

javascriptjqueryhtmlscrollreveal.js

Is there a way to remove specific elements from an array without using jQuery?

I've recently started diving into Javascript, experimenting with Tampermonkey scripts for the past week. The webpage I'm currently working on features dynamic elements that appear randomly with each page load. Sometimes only one element like "he ...

javascriptjqueryhtmlarrays

Currently seeking assistance in replacing an existing Wordpress object with a new one

I'm looking to swap out the current slider image with a new slider. Whenever I try to replace it with the TOP 5 Games, they disappear or don't show up at all. <?php if( function_exists('cyclone_slider') ) cyclone_slider('24&ap ...

phpjqueryhtmlcsswordpress

Sliding elements horizontally with jQuery from right to left

I recently purchased a WordPress theme and I'm looking to customize the JavaScript behavior when the page loads. Currently, my titles animate from top to bottom but I want to change this behavior dynamically. You can view it in action here: I have ...

javascriptjquery

a single button with dual functionalities

I am new to the development field and have a question about jQuery. I want a single button to perform two different actions. For example, let's say we have a button labeled Pause/Resume. When I click on the button, it should first display "Pause", and ...

javascriptphpjqueryhtml

What could be the reason for the top alignment of only a portion of the cell

Here is the code snippet I am working with: <html> <head> <style> table.t_group { border: 2px solid black; margin: 0 auto 0 auto; } table.t_group > tbo ...

htmlcss

Refresh content that was previously removed using ajax

Currently, I'm a bit unsure about the best approach to solving this particular challenge. When searching for information on loading and unloading Ajax, most results focus on unloading content before loading new content, rather than reloading previousl ...

jqueryajaxloadreload