Having trouble aligning text beside Bootstrap input field

I have a form using the Bootstrap framework where I want text on the left of every input to show its purpose. However, the text ends up above the input field like this:

Current appearance of the form: https://i.sstatic.net/GUHcO.png

<div class="container">
        <br>
        <center> <h3> Add Youth </h3> </center>
        <br>
                <?php  echo form_open('index.php/Addjongere/Add_jongere'); ?>
            <form>
                <div class="form-group row">
                 <label>First Name:</label>
                    <input class="form-control" name="firstname" id="firstname" placeholder="First Name" type="text">
                </div>

                    <div class="form-group row">
                         <label>Middle Initial(s):</label>
                    <input class="form-control" name="middlename" id="middlename" placeholder="Middle Name" type="text">
                </div>

                <div class="form-group row">
                  <label>Last Name:</label>
                    <input class="form-control" name="lastname" id="lastname" placeholder="Last Name" type="text">
                </div>

                <div>
                    <button class="btn btn-primary" name="Add_youth" >Add</button>
                </div>
            </form>       
        </div>

If you have any suggestions or solutions, please let me know. Thank you!

Answer №1

Are you looking to achieve this? Remove the class="form-inline" from your form and add the class row to your form-group divs.

I have also enclosed the form in a container to maintain its size properly.

edit
I neglected to include class="col-sm-4" for the labels and class="form-control col-sm-8" for the inputs, causing them not to be aligned correctly.

label{
  text-align: center;
}

h3, .container button{
  display: block;
  margin: 0 auto;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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 class="container">
      <h3>Add Youth</h3>
    <br>
    <form>
      <div class="form-group row">
        <label class="col-sm-4">First Name:</label>
        <input class="form-control col-sm-8" name="firstName" id="firstName" placeholder="First Name" type="text">
      </div>

      <div class="form-group row">
        <label class="col-sm-4">Middle Name:</label>
        <input class="form-control col-sm-8" name="middleName" id="middleName" placeholder="Middle Name" type="text">
      </div>

      <div class="form-group row">
        <label class="col-sm-4">Last Name:</label>
        <input class="form-control col-sm-8" name="lastName" id="lastName" placeholder="Last Name" type="text">
      </div>

      <div>
        <button class="btn btn-primary" name="Add_Youth">Add</button>
      </div>
    </form>
</div>

Answer №2

One way to make the form responsive is by placing it inside a column and adjusting the label/input widths accordingly...

https://www.example.com/responsive-form

<div class="container">
    <div class="row">
        <form class="col-12 col-md-8 mx-auto">
            <div class="form-group row">
                <label class="col-5 col-sm-3 text-truncate">First Name:</label>
                <input class="form-control col" name="firstName" id="firstName" placeholder="First Name" type="text">
            </div>
            <div class="form-group row">
                <label class="col-5 col-sm-3 text-truncate">Middle Name:</label>
                <input class="form-control col" name="middleName" id="middleName" placeholder="Middle Name" type="text">
            </div>
            <div class="form-group row">
                <label class="col-5 col-sm-3 text-truncate">Last Name:</label>
                <input class="form-control col" name="lastName" id="lastName" placeholder="Last Name" type="text">
            </div>
            <div class="form-group row">
                <div class="col-12 text-center">
                    <button class="btn btn-primary" name="addPerson">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer №3

Give this a shot:

.inputstyle {width: 50%; float:right;}

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

Ways to incorporate ejs partials using JavaScript

I am currently developing code to determine if a user is logged in. Depending on the user's login status, the content of the "my user" section should vary. When a logged-in user navigates to the "my user" page, an if statement is executed to confirm ...

Organize your information starting from the left and moving to the right

Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...

How do I dynamically adjust class names for menu items as I scroll using jQuery?

I have a website with different sections identified by unique IDs, such as: <section id="home"> First Section </section> <section id="about_us"> Second Section </section> <section id="what_we_do&q ...

Upon refreshing the page, Vuex encounters an issue where it is unable to read

My website has a Navbar component that utilizes values from the Vuex store. Prior to entering each route, I trigger a dispatch from Vuex as shown below: router.beforeEach((to, from, next) => { //... store.dispatch("updateUserData"); ...

Exclusively utilize optgroup multiple functionality within bootstrap-select

I'm currently utilizing https://github.com/snapappointments/bootstrap-select/ version 1.13.18 and I am in need of a solution where only optgroup options can have multiple selections. This means that if a non-optgroup option is selected, all other opti ...

Remove the initial DIV element from the HTML code

I have created a unique chat interface by combining JScript, php, and jquery. The chat messages are saved in an HTML document that gets displayed in the text area. Each user input message is contained within its individual div tag: <div>Message</ ...

Attempting to convert a Raw image file and upload it onto the server

I am currently attempting to upload an image to my server using PHP. I have two files for this task - index.php and myscript.php. Index.php <div id="results">Your captured image will appear here...</div> <h1>Mugshot Test Page& ...

"Creating a stylish divider between words or sentences: A guide to using HTML and CSS for solid

I am curious about how to insert lines between words or sentences without using the common methods like border-bottom-line or js. Is it possible to achieve this effect using a simple span or div? I have attempted to do so myself, but I am open to learning ...

Transition within Bootstrap navbar is not as smooth as desired

My bootstrap navbar HTML code is as follows: <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(50, 50, 50)"> <button class="navbar-toggler" type="button" data-toggle="col ...

Is it possible to invoke Bootstrap modal functions without using jQuery?

I'm in the process of removing jQuery dependencies from my app, but I still rely on Bootstrap. Is there a way to trigger modal functions like $('#myModal').modal('show') without using jQuery now? ...

Generating output into several spans of identical class using JavaScript with compatibility for IE8

Trying to make sense of GetElementsbyClassName function here. My goal is to output the value of an input field, identified by ID, to multiple spans that share a common class on click. I had it working fine with ElementId, but now I need to repeat the user ...

Adjust the paragraph font size within the bootstrap stylesheet

We currently utilize the bootstrap v2 CSS and are interested in globally increasing the font size by a point or two. I am wondering if this adjustment is a straightforward modification within the CSS file or if it requires a more complex approach. After a ...

Are there any other CSS methods available to address the limited support for flex-grow in Safari?

I'm currently developing an interactive "accordion" component that can accommodate multiple child elements. Each child item closes to the height of its header, but expands evenly with other open siblings when activated. If this explanation is unclear, ...

Disable the click functionality while preserving the hover feature

Due to my previous question being incorrectly marked as a duplicate, even though it wasn't, and no one is rectifying the mistake, I am re-posting my inquiry. I am dealing with an <a> element that has a default onClick function. This <a> a ...

How to Keep PHP Include Visible within the div using Bootstrap 4

I utilized PHP include to add the information inside the modals for the albums, but it is not hidden as specified in the div class where it is included. You can check out the music page on . However, here is the code snippet for the music page where I in ...

ETags for webpages generated on the server-side and equipped with a CSP nonce

I have successfully implemented ETags in my server-side-rendered React app using Node/Express, allowing for client-side caching. The HTML is generated with inlined fragments of render-blocking CSS and JS for faster first renders according to Google's ...

extracting an empty value from this variable

When I click on an anchor tag using this operator, the value appears blank. I have multiple divs with the same class, so I used the .each() function, but I can't figure out where I'm going wrong. The desired output is that when I click on one of ...

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

Bootstrap sticky footer solution

Having an issue with the sticky footer in Chrome while everything looks fine in FF and IE. When resizing the screen, the content wraps properly, but the footer does not adjust and overlaps the content. Any tips or suggestions would be greatly appreciated. ...

A stylish and versatile Bootstrap Modal is the perfect

Just dipping my toes into Bootstrap 4.5, but struggling with the Modal component. I've gone through the documentation multiple times and simply copied and pasted from the website. The code is so basic, yet I can't seem to figure out what's ...