"Bootstrap 4 does not allow labels to be displayed inline with the input field

I'm currently working with Bootstrap 4 and Vue.js to populate an input form, but I'm struggling to get the label to appear inline and before the input type file.

<div v-for="problem in problems">
    <div class="row">
        <div class="col">
            <form method="POST" action="/submission" enctype="multipart/form-data" class="form-group">
                <!-- sending the student information -->
                <input type="text" name="courseNumber" :value="courseIdSelected" style="display: none;">
                <input type="text" name="assignmentNumber" :value="assignmentSelected.id" style="display: none;">
                
                <div class="form-group form-inline">
                    <label :for="problem.name">Code submissions {{ problem.name }}</label>
                    <input type="file" name="document" :id="problem.name" class="form-control-file"/>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary"/>
                </div>
            
            </form>
        </div>
    </div>
</div>

Is there a Bootstrap class that can solve this issue, or do I need to modify the CSS to align the label with the input on the same line?

Check out this screenshot for reference:

https://i.sstatic.net/OgXtK.png

Answer №1

example of inline code from bs4:

  <div class="form-group row"> 
    <label :for="problem.name" class="col-sm-2 col-form-label">Code submissions {{ problem.name }}</label>
    <div class="col-sm-10"> 
<input type="file" name="document" :id="problem.name" class="form-control"/>
    </div>
  </div> 

Answer №2

For a solution to your problem, consider placing the input inside the label.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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>


<div >
    <div class="row">
        <div class="col">
            <form method="POST" action="/submission" enctype="multipart/form-data" class="form-group">
                <!-- sending the student information -->
                <input type="text" name="courseNumber" :value="courseIdSelected" style="display: none;">
                <input type="text" name="assignmentNumber" :value="assignmentSelected.id" style="display: none;">
                
                <div class="form-group form-inline">
                    <label :for="problem.name">
                    <input type="file" name="document" id="problem.name" class="form-control-file"/>
                    Code submissions {{ problem.name }}
                    </label>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary"/>
                </div>
            
            </form>
        </div>
    </div>
</div>

Answer №3

One way to resolve the issue is by enclosing your input tag in a div.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div v-for="problem in problems">
  <div class="row">
    <div class="col">
      <form method="POST" action="/submission" enctype="multipart/form-data" class="form-group">
        <!-- sending the student information -->
        <input type="text" name="courseNumber" :value="courseIdSelected" style="display: none;">
        <input type="text" name="assignmentNumber" :value="assignmentSelected.id" style="display: none;">
        <div class="form-group form-inline">

          <label :for="problem.name">Code submissions {{ problem.name }}</label>

          <!-- wrapping your input tag inside a div -->
          <div>
            <input type="file" name="document" :id="problem.name" class="form-control-file" />
          </div>

        </div>
        <div class="form-group">
          <input type="submit" class="btn btn-primary" />
        </div>
      </form>
    </div>
  </div>
</div>

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

Determine the exact scroll position needed to reveal the element when scrolling in reverse

I'm looking for a way to make my div disappear when I scroll down and reappear immediately when I start scrolling back up. Currently, it only works when I reach a certain position instead of taking effect right away. I need assistance in calculating t ...

The design of the button appears unappealing when viewed in

Hi there! I am currently working on creating a button for Outlook 2010, but I am running into an issue. The button image is not aligning vertically in the center, and the padding and margin are not displaying properly. It works perfectly fine on most ema ...

Submitting the form for validation to parse.com

Is there a way to ensure that my form is only submitted to parse.com when all fields are filled in? Despite using a validation script, the form still submits even if the fields are empty when I click the submit button. I attempted using a button instead o ...

Mapping a complex Vuelidate validation object with computed properties in VueJS: A step-by-step guide

Within my tabs container, I have multiple forms with fields that contain complex logic. To avoid repeating this logic in each form, I decided to create a custom component that is shared among all forms. While implementing Vuelidate for form validation, I e ...

Incorporate the Vue-color Third-Party Component into your personalized Vue.js Component

Recently delving into Vue.js, I've embarked on creating a straightforward TODO application. However, I wanted the functionality to customize task colors within the input form. After researching, I stumbled upon a third-party library called vue-color. ...

Chrome behaving differently with CSS for pop-out menu

My issue lies with a pop-out menu behaving differently in Chrome compared to IE or Firefox. Below is the HTML code: <body> <ul> <li><a href="url">Level One</a> <ul> <li><a href="url">Le ...

Center the HTML elements on the page

After struggling for some time, I can't seem to figure out how to center elements in the middle of a page without having a lengthy navigation bar at the bottom of the screen. Does anyone have any suggestions? https://codepen.io/picklemyrickle/pen/XWj ...

Monitor the traffic on my website by implementing .htaccess restrictions

I am maintaining a website with restricted access to specific IP addresses listed in the .htaccess file. I am looking to implement a logging system that tracks unauthorized attempts to access the site. Is it feasible to record each attempt in a database? ...

The click event fails to trigger while trying to parse external HTML

Currently, I am working on a project that requires me to load HTML from an external file and insert it into an existing div element. Although the process is successful overall, I have encountered an issue where the .click() events do not trigger when click ...

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...

I'm facing some issues with my initial attempt at an Angular application and it's

After diving into Angular and setting everything up, I encountered an issue where instead of seeing a name displayed, I was getting {{ name }}: https://i.sstatic.net/SXYju.png Below is the content of app.component.html: <input type="text" [(ngModel)] ...

The issue of CSS not being applied to HTML content after being inserted via AJAX has been encountered

I've successfully implemented AJAX to retrieve specific page content from a database, but now I'm facing an issue: When it comes to the 'Contact' page, the form retrieved from the database (as HTML) is not applying the CSS styles I hav ...

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick? Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the ...

Loading a page ahead of time in NuxtJS

I created a NuxtJS static site with some fixed text, an image in PNG format (stored in the local assets folder), and I also integrated the vue-particles plugin. Whenever someone accesses this page, the content loads in the following sequence: The HTML st ...

Issue with Vue-router param not updating when using the browser back button

Utilizing a parameter, I am able to successfully push the param using this.$router.push(). routes: { path: ':stepId?', name: 'stepper' } However, I am also monitoring $route within a component to capture any changes in the paramet ...

How to continuously animate images in HTML using Bootstrap

I want to showcase 7-8 client images in a continuous loop using a <marquee> tag. The issue is that there is a gap between the last and first images. Here is the HTML code I have: <marquee> <ul> <li><a href="#&q ...

Attempting to have vue.js display content based on a method within the created() lifecycle hook

In my created method, I am making an asynchronous call using await. I need to determine when the results of that call have been loaded so that I can dynamically show/hide elements in the DOM. It appears that currently, the DOM is rendering before the met ...

Change the CoreUI variable by overriding it

There's a fantastic gem called https://github.com/pelted/coreui-rails that utilizes CoreUI, a Bootstrap Admin Template. This template has replaced the default Bootstrap colors, and I am attempting to customize them back to my preferred colors, specif ...

Sometimes, the page-wide background in Internet Explorer doesn't load properly

Currently, I am working on a website that uses an image as the background for the entire site. Everything seems to be running smoothly in Firefox and Safari, but Internet Explorer is giving me some trouble. Sometimes the image fails to load at all, other t ...

Display a division upon choosing an option

I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...