Is there a way to display both the label and the input field in a single line?

How do I align the label and input on the same line with a spacing of 1.5cm between them?

I tried using this resource, where it mentioned using form-inline but wasn't successful in achieving the desired layout.

https://i.sstatic.net/7MW2H.png

Appreciate any help or suggestions. Here is the code snippet:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6a9b6a9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <h1 id="welcome">HTML CSS JS</h1>
      <div class="col-12 col-md-6 col-lg-3">
         <div class="form-group ">
            <label for="date">Start date</label>
            <div class="input-group">
               <input name="beginDate" id="beginDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
               <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
               ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
               (ngModelChange)="changedBeginDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp1.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
     
     <div class="col-12 col-md-6 col-lg-3">
   <div class="form-group form-inline">
      <label for="date">End date</label>
      <div class="input-group">
         <input name="beginDate" id="beginDate" type="text" class="form-control"
         style="background-color: white;"
         (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
         <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
         ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
         (ngModelChange)="changedBeginDate($event)"
         style="position: absolute; left: 0; visibility: hidden">
         <div class="input-group-append" (click)="dp1.toggle()">
            <span class="input-group-text" id="basic-addon2">
            <i class="icon-regular i-Calendar-4"></i>
            </span>
         </div>
      </div>
   </div>
</div>
     
 
   </body>
</html>
htmlcssbootstrap-4

Answer №1

.form-group {
  display: flex;
  column-gap: 20px;
  margin-bottom: 12px;
}
<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- Include Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d36293629">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <h1 id="welcome">Welcome to HTML CSS JS</h1>
      <div class="col-12 col-md-6 col-lg-3">
         <div class="form-group ">
            <label for="date">Start Date</label>
            <div class="input-group">
               <input name="beginDate" id="beginDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
               <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
               ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
               (ngModelChange)="changedBeginDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp1.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
     
     <div class="col-12 col-md-6 col-lg-3">
   <div class="form-group form-inline">
      <label for="date">End Date</label>
      <div class="input-group">
         <input name="endDate" id="endDate" type="text" class="form-control"
         style="background-color: white;"
         (ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
         <input id="picker2" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
         ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
         (ngModelChange)="changedEndDate($event)"
         style="position: absolute; left: 0; visibility: hidden">
         <div class="input-group-append" (click)="dp2.toggle()">
            <span class="input-group-text" id="basic-addon3">
            <i class="icon-regular i-Calendar-4"></i>
            </span>
         </div>
      </div>
   </div>
</div>
     
 
   </body>
</html>

Answer №2

Here is a suggestion for you to try out:

<div class="form-group date-input">
    <label>Date</label>
    <input type="text" id="date">
</div>

Next, apply the following CSS rules to make the form-group class have display: flex;:

.form-group {
    display: flex;
}
.form-group label {
    margin-right: 20px;
}

Answer №3

Are you looking for this?

https://jsfiddle.net/jkL6crdm/

.form-group {
    display: -webkit-inline-box;
}


.form-group {
    display: -webkit-inline-box;
}
<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fde6f9e6f9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <h1 id="welcome">HTML CSS JS</h1>
      <div class="col-12 col-md-6 col-lg-3">
         <div class="form-group ">
            <label for="date">Start date</label>
            <div class="input-group">
               <input name="beginDate" id="beginDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
               <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
               ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
               (ngModelChange)="changedBeginDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp1.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
     
     <div class="col-12 col-md-6 col-lg-3">
   <div class="form-group form-inline">
      <label for="date">End date</label>
      <div class="input-group">
         <input name="beginDate" id="beginDate" type="text" class="form-control"
         style="background-color: white;"
         (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
         <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
         ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
         (ngModelChange)="changedBeginDate($event)"
         style="position: absolute; left: 0; visibility: hidden">
         <div class="input-group-append" (click)="dp1.toggle()">
            <span class="input-group-text" id="basic-addon2">
            <i class="icon-regular i-Calendar-4"></i>
            </span>
         </div>
      </div>
   </div>
</div>
     
 
   </body>
</html>

Answer №4

To achieve the desired result with bootstrap, simply include the "d-flex" class in the parent element. Here's an example:

<div class="form-group d-flex">

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

I am encountering the error message "The requested resource does not contain the Access-Control-Allow-Origin header."

After going through all the possible answers and attempting to add header("Access-Control-Allow-Origin : *"); to the beginning of my asp page, I still couldn't resolve the issue. jQuery(document).ready(function(){ $.post('htt ...

jqueryhtmlajaxasp-classic

Will images still be loaded within a hidden div in Bootstrap 3?

Creating a responsive website that features a large carousel with multiple images on the homepage. My goal is to optimize image sizes for each device so that only the necessary image is downloaded, conserving bandwidth for mobile users. To achieve this, ...

htmlcsstwitter-bootstrap

Having trouble with the redirection of my Django registration page

I have encountered an issue while creating a registration page for my Django project. The problem arises when I compile the registration form as it is trying to navigate to a path where it repeats 'users/register'. Instead of going to 'local ...

pythonhtmldjangobackend

Putting text on top of an image using Bootstrap

Recently diving into the world of Bootstrap, I have come across a puzzling issue: Take a look at the HTML code from my website: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Showcasing all elements of an xml through jquery while implementing a filter

Trying to implement a filter on XML using jQuery. The filtered results are showing based on the condition, but facing difficulty in displaying all XML items when the flag is set to 0; meaning that when the flag is zero, all XML items should be displayed ...

jquerycsshtml

Maintain the color of a Bootstrap 4 dropdown link even when it is open by incorporating hover

Currently, I am utilizing bootstrap 4 to create a menu that includes dropdown items. The issue I am facing is that when hovering over a dropdown link, the background color changes and the dropdown opens. However, as soon as I move the mouse to select one o ...

jquerycssbootstrap-4

Instructions on creating a simple text-based menu and sub-menu without any images or graphics

I'm currently working on implementing a drop-down menu for my website, which can be found at The menu I am trying to create should appear under the Health & Fitness and Gaming sections as a text-only drop-down. I've been experimenting with s ...

htmltextdrop-down-menu

Help Needed: Adding a Simple Element to jQuery Tabs Script

I recently came across a fantastic jQuery tabs script on a website called Tutorialzine. The link to the article can be found here. As I was implementing this script, I realized I needed to customize it by adding specific classes to certain tabs. Specifica ...

javascriptjquerycss

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...

cssangulartypescript

Execute the executable file on the server and display the output on the client side

Is it feasible to execute an executable file on the web server and display the image on the client side using various technologies like PHP, JS, or HTML? I am interested in achieving this to avoid sharing the exe file directly with the client but still al ...

phphtmlwebserverexe

How can I display a clicked-on div while hiding all other divs using jQuery?

I want to create a website where a button can show and hide a specific div, but my challenge is; How can I ensure that clicking on one button hides all other divs? Here is the JavaScript code: function showHide(divId){ var theDiv = document.getEleme ...

javascriptjqueryhtmlcssonclick

Using JavaScript to toggle the visibility of an HTML div element

I'm looking to enhance the functionality of this show/hide HTML div using JavaScript. HTML <a href="#" class="clickme">Menu 1</a> <div class="box"> <span><span class="labelText"><span></span>Number 1</ ...

javascriptjqueryhtmlcss

Divs with varying heights that have a position relative along with smaller font sizes

This is a query I had regarding the use of the sub tag: Using <sub> tag and preserve line-height To achieve the subscript effect, I tried using position: relative; along with a smaller font size. However, I noticed that this solution is not achievi ...

htmlcssgoogle-chromefirefox

HTML5 provides seamless transitions for videos

Interested in implementing the HTML5 video tag and JavaScript to achieve a seamless video transition, similar to a cut in a movie. I have reviewed the API at http://www.w3.org/TR/html5/video.html#tracklist If anyone has any suggestions, I would greatly ap ...

javascripthtmlhtml5-video

Creating inline form groups within a form

Hey there! I'm looking to align the divs with class="form-group" so that their labels are on top, rather than inline with the fields. Currently, they are stacking on top of each other like this: https://i.sstatic.net/rNoS3.jpg I want them to appear ...

htmlcsstwitter-bootstrap

Issues with Animations in Animate.css

Seeking to achieve fluid transitions using Vue.js and Animate.css, encountering issues with certain animations not functioning as expected! Successfully implementing animations such as: bounceIn, bounceOut, and hinge. Experimenting with this on codepen.i ...

javascriptcssvue.jsanimate.css

Failure to connect HTML and CSS files

My HTML and CSS files are not linking even though they are in the same folder. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl ...

htmlcss

Adding the text-success class to a Bootstrap 5 table row with zebra striping does not produce any noticeable change

I am encountering an issue with a Bootstrap 5 table that has the class table-striped. When a user clicks on a row, I have implemented some jQuery code to toggle the class text-success on the row for highlighting/unhighlighting purposes. The highlighting f ...

javascripthtmljquerycssbootstrap-5

Insert a picture within the text input field

I'm facing a specific scenario where I need to add text followed by an image, then more text followed by another image and so on. Please see the input text with values in the image below. Can someone guide me on how to accomplish this with jQuery and ...

javascriptjqueryhtmlcss

Tips for adjusting the hue of a single color in a JPEG image

Is there a way to transform white color to red using only CSS, while leaving the rest of the colors unaffected? This should be accomplished without changing any other elements. ...

htmlcss