Place the label next to the input field in a bootstrap form

I have been attempting to code this layout, but I am not achieving the desired outcome. I even tried using inline coding, but that didn't work either.

If anyone could help me display the expected output, I would greatly appreciate it. Thank you.

<form action="" method="POST">
                        <!-- Row -->
                        <div class="row gx-4 mb-1">
                        
                        <!-- -->
                         <div class="col-md-6">
                         <label class="small mb-1" for="">Student name</label>
                         <input class="form-control form-control-sm" name="" id="" type="text" value=""/>
                        </div>
                        
                        <!--  -->
                        <div class="col-md-6">
                         <label class="small mb-1" for="">Address</label>
                         <input class="form-control form-control-sm" name="" id="" type="text" value=""/>
                        </div>
                        
                        </div>
                        
                        <!-- Row -->
                        <div class="row gx-4 mb-1">
                        
                        <!-- -->
                         <div class="col-md-6">
                         <label class="small mb-1" for="">ID Number</label>
                         <input class="form-control form-control-sm" name="" id="" type="text" value=""/>
                        </div>
                        
                        <!--  -->
                        <div class="col-md-6">
                         <label class="small mb-1" for="">Email</label>
                         <input class="form-control form-control-sm" name="" id="" type="text" value=""/>
                        </div>
                        
                        </div>
                        
                        
                        </form>

Check out the sample result here!

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

htmlcssbootstrap-5bootstrap-form-helper

Answer №1

To achieve the desired layout, wrap the label and input elements in a row with a range of 2 to 10 columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dd$@!crdcacdefcad$@">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="row px-4 mt-4">
        <div class="col-md-6 row mb-3">
            <div class="col-2 col-form-label">
                Label
            </div>
            <div class="col-10">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-md-6 row mb-3">
            <div class="col-2 col-form-label">
                Label
            </div>
            <div class="col-10">
                <input type="text" class="form-control">
            </div>
        </div>        
    </div>
    <div class="row px-4 mt-4">
        <div class="col-md-6 row mb-3">
            <div class="col-2 col-form-label">
                Label
            </div>
            <div class="col-10">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-md-6 row mb-3">
            <div class="col-2 col-form-label">
                Label
            </div>
            <div class="col-10">
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</body>
</html>

Feel free to adjust the padding or margin as necessary for your specific requirements.

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

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

phpjavascriptcssfileinclude

What is the reason behind an inline element being able to have an explicit width when floating?

When trying to set the width for an inline element <span> within a table-row containing multiple span elements, I encountered difficulty. However, after adding float: left, I was finally able to adjust the width. What is the reason behind the initia ...

css

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

javascriptjqueryhtmlsharethis

Partial height side navigation bar

Check out this JS Fiddle: https://jsfiddle.net/wqbn6pe6/2/ This is a simple side navigation, but the grid layout is causing the sidebar not to stretch to the bottom even though it's set at 100% height. Any suggestions or solutions? Here's the ...

htmlcsstwitter-bootstrap-3

Is there a way to create a Swipe slideshow without relying on plugins or external tools?

How can I create a responsive swipe image slideshow using CSS and JQuery that changes the image when swiping from right to left? I want it to work seamlessly on both computer and mobile screens. ...

jqueryhtmlcss

"Utilizing a background image within a component to completely cover the entirety

Hey everyone, I need some help with a confusing issue. I'm currently working on an AngularJs project and I am struggling to set a background image for a specific component without affecting the entire application. My goal is to have the image cover t ...

htmlcssangular

Modify the div's width from 100% to 1000 pixels when it is less than 1000 pixels, using Javascript

I need help with writing Javascript code that will change the width of a div element called "red" from 100% to 1000px when the browser width is less than 1000px. The code should revert the width back to 100% when the browser width is greater than 1000px. ...

javascriptcssresizegetelementbyid

Selecting the parent span element using jQuery

Is there a better way to display text in the parent <div>'s <span>? I'm having trouble with using spans and .parent(), any advice would be appreciated. HTML: <div> <span></span> <!--the span where I need to show ...

javascriptjqueryhtml

Start up a server-side JavaScript instance utilizing Express

My journey into web programming has led me to learning JavaScript, Node.js, and Express.js. My ultimate goal is to execute a server-side JavaScript function (specifically a function that searches for something in a MySQL database) when a button is pressed ...

javascripthtmlcssnode.jsexpress

Implementing a jQuery method in a PHP page that is loaded through AJAX

I am facing an issue on my page where I am using jquery/ajax to load a series of buttons into a div. This script loads buttons every time the user scrolls the page and each button should run a jquery function when clicked. The problem arises when I switche ...

javascriptphpjqueryhtmlajax

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...

javascriptangularhtmltypescriptangular-material

Numerous text boxes sharing identical IDs

Here is the code snippet that I am working with: <%for (int index = 1; index < 7; ++index) {%> <tr> <td> <div class="indicacao_gdp"> ...

c#htmlasp.netc#-4.0for-loop

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

This question may seem simple, but I have been searching for an answer and haven't found one yet. Imagine we have an HTML element with dimensions specified in pixels: <div style="width:750px; height: 250px"></div> We can easily resize i ...

javascripthtmlcss

Bootstrap causing issues with multinavibar functionality

Hi everyone, I have been using multinavbar but when I view it on mobile, the toggle and menu are not working properly. Below is the code snippet for reference: <div class="navbar navbar-default navbar-static-top" role="navigation" style="height: 114px ...

csstwitter-bootstrap

The function FormatCurrency is non-existent

I need assistance with converting a textbox value into a currency using the jquery.formatCurrency-1.4.0.js plugin. My JavaScript function is set up like this: $(document).ready(function() { $('.currency').blur(function() { $(&apo ...

javascriptjqueryhtmlajaxformat-currency

The live search feature using AJAX is exceptionally sluggish

Update: I am utilizing XAMPP with the built-in Apache server and vscode. I have created a live search input functionality (HTML -> JavaScript -> PHP -> JavaScript -> HTML) that runs smoothly upon initial input. However, I have noticed that it ...

javascriptphphtmljqueryajax

Ways to change columns into rows with CSS

Hey there! I'm looking for a way to convert columns into rows and vice versa. In my table, I have both column headers and row headers on the left side. The row headers are simply bold text placed next to each row to describe its content. I want to op ...

javascripthtmlcss

Struggling with organizing the layout of your HTML page? Let us lend

I am having difficulty with the layout of a page I'm working on. The lower page navigation is not positioning properly - it wraps below the left column instead of staying below the data columns. Additionally, the border for the navigation appears at t ...

csshtml

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

I'm facing an issue where a button I rendered is not executing the alertWindow function when clicked. Can anyone help?: app.component.ts: import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core'; import ...

htmlangulartypescript

Flask not serving Favicon and images to a React application

I am currently working with a Flask server and have it set up in the following manner: app = Flask(__name__, static_folder="dist/assets", static_url_path='/assets', template_folder="dist") ...

javascriptpythonhtmlreactjsflask