Tips for creating space between words within a <p> element and lining them up with text boxes in the following <div>

Here is the code I wrote for the form:

<div class="container-fluid" id="unlabelled">
            <p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
            <form>
                <div class="form-group col-lg-5">
                    <input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
                </div>
                <div class="form-group">
                    <input type="checkbox"  id="in-kit">
                    <button class="btn-primary" id="add-btn">Add</button>
                </div>
            </form>
            </div>

This form uses bootstrap, with a heading in a "bg-primary" background. There are two text input fields, a checkbox, and a button. The goal is to align the paragraph headings with these form elements.

You can view an image of the form here: https://i.sstatic.net/3pETm.jpg

The aim is to center-align the Items text with the first text field, Quantity with the second text field, and In kit with the checkbox.

In an attempt to achieve this, span tags were added around the text. However, adjusting margins didn't provide desired results. Using multiple non-breaking spaces also fell short of solving the alignment issue.

If you have any alternative solutions or suggestions for improving the alignment, please let me know.

Thank you.

Answer №1

This is a great starting point, focusing on arranging elements horizontally using rows, columns, and some CSS styling. However, keep in mind that if you want to maintain this layout on mobile devices, you may encounter some issues with the horizontal display.

.well-md.well-head {
  background: #3973a6;
  border: none;
  color: #fff;
  font-size: 18px;
  height: 60px;
  text-align: center;
}
.checkbox {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="row well well-md well-head">
      <div class="col-xs-4">
        <p>Items</p>
      </div>
      <div class="col-xs-3">
        <p>Quantity</p>
      </div>
      <div class="col-xs-3">
        <p>In Kit</p>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-4">
        <input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
      </div>
      <div class="form-group col-xs-3">
        <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
      </div>
      <div class="form-group">
        <div class="form-group col-xs-3">
          <div class="form-group">
            <div class="checkbox">
              <input type="checkbox" id="in-kit" name="in-kit">
            </div>
          </div>
        </div>
        <div class="form-group col-xs-2">
          <button class="btn btn-primary" id="add-btn">Add</button>
        </div>
      </div>
    </div>
  </form>
</div>

Answer №2

To organize your text descriptors effectively, align them with the corresponding columns in your inputs. Here is an example:

<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
            <div class="row">
           <div class="form-group col-md-5"> Items</div>
            <div class="form-group col-md-2">Quantity</div>
            <div class="form-group col-md-2">In Kit</div>
</div>
</p>
        <form>
            <div class="form-group col-md-5">
                <input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
            </div>
            <div class="form-group col-md-2">
                <input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
            </div>
            <div class="form-group">
                <div class="form-group col-md-2">
                <input type="checkbox"  id="in-kit">
                    </div>
                     <div class="form-group col-md-2">
                <button class="btn-primary" id="add-btn">Add</button>
                    </div>
            </div>
        </form>
        </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

What are some methods for saving HTML form data locally?

Creating an HTML form and seeking a solution for retaining user data even after closing and reopening the window/tab. Utilizing JavaScript cookies or HTML 5 local storage would require writing code for every input tag, which could be time-consuming especi ...

Tips for transferring simple CSS formatting to an independent stylesheet

As part of a university project, I am working on a basic website. Initially, I used in-line styling for the website design. However, the subject coordinator has now changed the requirements and we are only allowed to use an external CSS stylesheet. Most of ...

HTML - PHP, navigating the history of the page with the browser's back button in real-time

My current project involves the development of a website using HTML and PHP. On one of my HTML pages, I have a form with certain fields marked as "REQUIRED". To ensure that all required fields are filled before submission, I have implemented a feature wher ...

What is the best way to customize arrow designs in a React Slick Slider?

I am struggling to customize the arrows in react-slick with my own PNG images. Despite my efforts, the images appear distorted on the screen as they are automatically set to a width and height of 20px instead of their actual size of 17x27px. I have experim ...

find div elements containing a specific classname

I'm seeking assistance in filtering a large number of populated divs with dynamically generated class names. Here is a form that, when an option is selected, should hide all divs that do not contain the selected class name. <p>To refine your s ...

Using jQuery to remove the td element from an HTML table

Hello everyone, I have a query. I am trying to remove a specific td from a table using JavaScript, but the remove() function is not working. Here is my code: $('.btnEliminarLicencia').off('click'); $('.btnEliminarLicencia&apo ...

Loading all the content and scripts from one page into another

Are you looking for a seamless way to view and book our scuba diving programmes without having to navigate away from the main page? If so, we understand your desire for convenience. Instead of redirecting you to separate pages when you click on buttons li ...

Infinite layers of options in the dropdown navigation bar

I am facing an issue with a dynamically generated unordered list that I want to turn into a dropdown menu. The challenge is that I do not know how many levels there will be, and I only want to display one level at a time. Here is what I have tried so far ...

Guide on showcasing jQuery variable values in PHP on a single page

I have some JavaScript and PHP code that I need help with. I want to assign a jQuery variable value to a PHP variable called $nicks, and then echo the value of $nicks on the same page. <script type="text/javascript"> var axel = 131.5678466; < ...

Tips on positioning the down arrow of an accordion-button to the left

I need to adjust the placement of the down arrow on an accordion button for my Arabic language website. Here is the current code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

HTML form variable for running operations

I have created an HTML form that accepts any Linux command as user input. The goal is to execute the command on the server and display the output back to the user. However, I am encountering an issue where I cannot pass the entered command from the textbox ...

Tips for Updating HTML Table Content Dynamically Using JavaScript without jQuery

I am in the process of developing a web application that requires me to dynamically change the content of an HTML table based on user input, all without relying on jQuery or any other external libraries. Adding rows to the table is not an issue for me, but ...

Revamp the layout of the lower HTML video menu

Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: auto; } </style> </head> <body> <video width="400" controls> ...

What can be done to repair the gallery on this webpage?

Currently, I am experimenting with the Aria template, a free Bootstrap-based template. My goal is to utilize the gallery feature without any accompanying text. However, even after removing the text from the lightbox, the white background persists. What I s ...

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

Learn how to retrieve URL parameters using HTML code

I would like to update the URL without refreshing the page as I am using an AJAX function to refresh a specific div. The issue I am encountering is that when the div is reloaded via AJAX, it does not recognize the URL parameter. Below is my code (I have a ...

I will receive a 404 error if I try to access a URL without including the hashtag symbol

Is it feasible to display a record by directly inputting the user ID in the URL without using the # symbol? I am currently working on a website where I have a single view page named Login.html. I want to be able to access this page by entering the user&ap ...

Positioning divs in CSS can be achieved similarly to how table cells are structured in HTML

Once again today, I came across a familiar issue with CSS layouts. I want to have 5 divs in a horizontal row, each with different widths: 1: 60px, 2: 30%, 3: 40px, 4: *, 5: 100px Back in the day, tables were the way to go for layouts, but now they are c ...

The rotation transformation on the Z-axis occurs once the animation has finished

Currently, the rotation on the Z-axis is occurring after the animation, even though I am still in the early stages of creating an animated hand opening. The intention is for the fingers to only rotate on the X-axis to simulate a realistic hand opening moti ...

What is the best way to vertically center an item at the end of a card in Bootstrap 4?

In the process of creating a long bootstrap card containing two rows of information including a title and description, I encountered an alignment issue with the button. The button is intended to be aligned to the right of the card while remaining centered. ...