How can I create a fixed class="form-row" and align a label and textbox in a horizontal line?

I encountered an issue with my simple bootstrap form that contains the following fields:

  1. The Labels and text box are not aligned properly in a straight line.
  2. When adjusting the size of the Notes field, it affects the positioning of the other fields causing them to move down (refer to screenshot point 2). How can I ensure all fields remain fixed and align the label and text in a straight line?

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

**below is the runnable code; please assist by editing below (open the snippet full page).

<!DOCTYPE html>
<html>
<head>

... [rest of the HTML content here] ...

  
</body>
</html>

code.**

htmlcssformstwitter-bootstrapbootstrap-4

Answer №1

Feel free to test this code in your CSS and let me know if it meets your requirements:

.form-group{
          display:flex;
          align-items:center;
        } 
 
 
@media (min-width: 992px) {
  
#w3review {
  position: absolute;
}        
}

Here's a demo of how it works:

.form-group{
          display:flex;
          align-items:center;
        } 
 
 
@media (min-width: 992px) {
  
#w3review {
  position: absolute;
}        
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#datetimepicker1').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
      });
    });
  </script>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 12px;
    }
.mydiv
{
   
  border-style: solid;
  border-width: thin;
  width:100%;
  height:700px;
}

</style>
</head>
<body>

<!-- Form structure with various input fields -->

</body>
</html>

Answer №2

Use this code snippet to align labels and textboxes in a horizontal line

 .form-group{
          display:flex;
          align-items:center;
        }

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

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

htmlangularcssflexbox

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

csswebpackvue.jsnode-modulesvue-cli

Employing useEffect within Material-UI tabs to conceal the third tab

At the page's initial load, I want to hide the first two tabs. The third tab should be visible with its content displayed right away. Currently, I can only see the content after clicking on the third tab. To troubleshoot this issue, I attempted to use ...

javascripthtmlreactjsreduxreact-hooks

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

csswordpress

Creating a process to automatically generate an input field upon the selection of checkboxes

Is there a way to automatically generate a text field for each checked box in a dynamically changing checkbox list? Below is my code snippet: <div> <label> Products </label> <li ng-repeat="item in INDproducttypes"> ...

javascripthtmlangularjsangularjs-ng-repeat

(no longer supported) We are unsure about the usage of /deep/, >>>, and ::ng-deep, ::v-deep

Since /deep/ has been deprecated, I have found that using global styles instead is the only viable solution. Does anyone know of an alternative solution where we can still maintain encapsulation or scoped styling? ...

cssangularvue.jsvuejs2deprecated

how to toggle a pre-selected checkbox in a Vue component

https://i.stack.imgur.com/6GQl7.png When dealing with a tree view checkbox in Vue, I encountered an issue where editing data within a selected zone should automatically check the corresponding countries based on previous selections. The ID of the selected ...

htmlsqllaravelvue.js

Increasing the checkout date by one day: A step-by-step guide

I am looking to extend the checkout period by adding 1 more day, ensuring that the end date is always greater than the start date. Below are my custom codes for implementing the bootstrap datepicker: $(function() { $('#datetimepicker1').da ...

javascriptjqueryhtmlbootstrap-datepicker

Passing variables on form submission in Django: A simple guide

I am working with a django 1.6.11 form (views.py): def posneg_nlp(request): sys_project_name = request.GET.get('project', 'graph') # everything works fine here, it can get the correct project value success = False monitoring_words = &a ...

pythondjangoforms

problem with the height of the side navigation bar

Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side. To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel. Although I have implemen ...

htmlcss

How about incorporating AJAX into your HTML code?

I am currently in the process of developing an email system for a company that wishes to use it for sending emails. To achieve this, I have implemented a custom HTML editor for creating email content. My goal is to post the email contents to an external PH ...

phpjquerymysqlhtmlajax

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

Check out this wireframe design I created: https://i.stack.imgur.com/Ro3dl.png I'm working on translating this into HTML and CSS so that I can further develop it. The HTML Code: <!doctype html> <html> <head> <title> Trinit ...

htmlcsslayoutwireframe

Opening the Gmail app from a link using JavaScript

What is the best way to open the Gmail app from a hyperlink? This link opens WhatsApp <a href="https://wa.me/">whatsapp</a> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1f190f ...

javascripthtmlreactjsangular

The inconsistency of Selenium's StaleElementReferenceException error and the variability of pageload completion codes is causing issues with clicking on elements

Big shoutout to the amazing stackoverflow community for always providing assistance. Lately, I've been grappling with the frustrating "StaleElementReferenceException" issue and haven't found a universal solution yet. Some helpful members have rec ...

javascriptjavajqueryhtmlselenium

Combine the jQuery selectors :has() and :contains() for effective element targeting!

I am trying to select a list item element that has a label element inside it. My goal is to use the :has() selector to target the list item and then match text within the label using the :contains() selector. Can I achieve this in a single line of jQuery ...

javascriptjqueryhtmlcss

Addressing responsiveness problems with Bootstrap navigation bar

Seeking assistance with setting up the fundamental bootstrap grid system. Despite my efforts, I am unable to make it work. Could someone guide me in creating the basic structure for the Navbar above? Specifically, focusing on using columns and rows with p ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to convert a repetitive string into a reusable function?

I am currently retrieving data from an API and I want to display it on my website in a more user-friendly manner. The challenge I'm facing is that the number of variables I need is constantly changing, along with their corresponding values. So, I&apos ...

javascripthtmljsonapi

Developing a customizable datepicker with the ability to select specific months or date ranges

I am currently developing a WebApp using flask and constructing templates in HTML/JS for the front end. I am in need of a datepicker that will provide the user with the option to choose a specific date range or select a range of months. Take a look at the ...

javascripthtmldatepicker

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

While working on updating my HTML tables to have fixed headers, I followed online examples that suggest making table-layout fixed, thead and tbody blocks, setting height constraints for tbody, and applying overflow-y to tbody. The result is functional as m ...

htmlcss

The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved? https://i.sstatic.net/UVlKB.png Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" ...

htmlcss