The alignment of the input boxes is off when using a single label for both

I'm looking to replicate the design shown in this image for a contact form using WordPress, but I've been struggling to pinpoint where I'm going wrong.

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

Here's my current code:

<div class="row" style="margin:0;">
<div class="col-sm-6" style="padding:0;">

  <div class="col-sm-6">
    <div class="form-group">
<label for="name">Name:</label><span style="color:red;" class:col-sm-1>*</span>
      [text* your-name id:Name class:very-special-field-for-checkbox class:form-control placeholder "First Name"]
    </div>
  </div><!-- /.col -->
  <div class="col-sm-6">
    <div class="form-group">
<label ></label>
     [text* your-name id:Name class:form-control placeholder "Last Name"]
    </div>
  </div>
</div>
  </div>
htmlcsswordpresstwitter-bootstrapbootstrap-4

Answer №1

Check out this fiddle, The Bootstrap-4 row utilizes the flexbox with the default "flex-wrap" property set to "wrap". Change it to "nowrap". https://jsfiddle.net/f2tkexrL/21/

.row {
  flex-wrap: nowrap;
}

.form-group {
  margin: 0;
}
<div class="row" style="margin:0;">
  <div class="col-sm-6" style="padding:0;">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="name">Name:</label><span style="color:red;" class:col-sm-1>*</span>
      </div>
    </div>
    <!-- /.col -->
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-3 form-group">
          <input type="text">
          <label>First Name</label>
        </div>
        <div class="col-sm-3 form-group">
          <input type="text">
          <label>Last Name</label>
        </div>
      </div>
    </div>
  </div>
</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

Maximizing the performance of Google fonts in Nuxt: A guide

Currently, I am incorporating the google font font-family: 'Saira Semi Condensed', sans-serif; If you want to check out this font, here is the link: In my ongoing NuxtJS project, I have a requirement to use this font in two different components ...

cssvue.jsvuejs2nuxt.jsgoogle-fonts

Storing various data in separate tables using MySQL and Node.js

Currently, I am working with three tables - user, modules, and an intermediate table called user_module. To perform an inner join between the user and module tables, I need to access the user_module table. "SELECT user.uName, module.moduleName FROM user_m ...

htmlmysqlsqlnode.jsexpress

Hovering over an image will not cause the floating header to appear

My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 e ...

htmlcss

Adjustments to the positioning of masonry columns

Hello everyone, I'm in need of some assistance with editing this code. My goal is to make the effect clickable rather than activated by hovering. You can view the current code snippet here. Here is the existing code: $container.find('.shifty-i ...

jquerycss

Take away the focus from Bootstrap 5 toggle button once it has been clicked

Working with the Bootstrap 5 Toggle Button in Outline Style to enhance visual emphasis hasn't provided the ideal user experience I was hoping for. (Refer to https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles) The toggle functional ...

javascripthtmluser-experiencetogglebuttonbootstrap-5

Is it possible to use display:grid with a parent element set to a height of 100%

Why doesn't the display:grid property stretch my content to the height of this column? The HTML structure row - col-6 is created using Bootstrap. I am aware that I can manually set a specific height for the parent container, but I would prefer not to ...

htmlcssheightcss-griddisplay

Is there a way to prevent my Header links from wrapping during window size testing?

https://i.stack.imgur.com/YTc3F.png The image above showcases my standard header layout, while the one below illustrates what occurs as I resize the window. https://i.stack.imgur.com/re44T.png Is there a specific CSS solution to prevent the Text navLink ...

cssmaterial-ui

Issue with spacing in CSS sticky header on mobile devices

When implementing CSS position sticky for a floating header, I have noticed that on some mobile devices there is a small gap of around 1px between "element_b" and "element_c" while scrolling. #element_a{ width: 100%; position: -webkit-sticky !impo ...

csspositionsticky

An AngularJS directive designed to execute after a text input has been modified

I have integrated a bootstrap calendar datepicker that interacts with and updates an <input type="text"> field. As of now, when I use ng-change="myAngularExpression()", the function gets executed the moment the text box is selected. Is there a way t ...

javascriptangularjshtmlangularjs-directiveangularjs-ng-change

24-hour flatpickr timepicker

Can anyone assist me in setting my hour format to 24 hours instead of AM/PM in Angular? I've been struggling with it for the past 2 days. Below are my TypeScript and HTML code snippets: TypeScript: flatpickrOptions: any = { locale: French, enable ...

htmlangulartypescripthourflatpickr

Display concealed information upon clicking

Is there a way to reveal hidden content only after clicking on the "View" link instead of hovering over it? I have tried implementing it so that the content appears on click, but it doesn't seem to be working as expected. How can I achieve this usin ...

javascriptjqueryhtmlcss

Utilizing JavaScript to display numerous variables within a text box

After creating an HTML form, I encountered an issue where only one selected item was displayed in the text field. Can anyone help me solve this problem so that multiple names can be printed in the textfield? function myFun(extras) { document.get ...

javascripthtmlcssforms

The CSS background image doesn't appear on my personal device

I am having trouble using a local image as the background image for a section of my website. Even after entering the image URL and running the project, nothing is appearing. As a beginner in CSS and HTML, I would greatly appreciate any help or advice on ho ...

htmlcssbackground-image

What is the most effective way to update content following an ajax request?

I have successfully integrated ajax calls into my admin page for a WordPress plugin, thanks to the invaluable assistance of the stackoverflow community. These ajax calls enable the plugin to access all functions related to adding, deleting, and updating qu ...

ajaxjquerywordpress

Is there a way to update page content without having to refresh the entire page?

My goal is to refresh specific content on a page without having to reload the entire page using JavaScript or jQuery. Since my project is built in PHP and JavaScript, I encountered this issue. Note : I want the page content to refresh when a user performs ...

javascriptphpjqueryhtmlajax

How to use PHP for setting up a MySQL database?

Currently, I am immersing myself in the world of PHP and MySQL. I decided to take a shot at creating a basic HTML form along with a PHP script to set up a MySQL database. Unfortunately, when I tried to test it out, things didn't go as planned. Upon su ...

phphtmlmysqlforms

Concealing Background Images in WordPress Customizer with JavaScript

Having an issue with the checkbox control in my WordPress Customizer. I want it to display a banner image when checked and hide it when unchecked, but the javascript code isn't functioning as expected: wp.customize( 'display_banner_image', ...

phpjquerywordpress

Center align content on small screens using Bootstrap 4

Here is a simple Bootstrap 4 row example: <div class="container"> <div class="row"> <div class="col-md-12 p-2"> <img class="" src="../assets/img/Logo-small.png" alt=&q ...

bootstrap-4

How can I ensure that the HTML I retrieve with $http in Angular is displayed as actual HTML and not just plain text?

I've been struggling with this issue for quite some time. Essentially, I am using a $http.post method in Angular to send an email address and message to post.php. The post.php script then outputs text based on the result of the mail() function. Howev ...

javascriptphphtmlangularjs

JavaScript and Angular are used to activate form validation

Update: If I want to fill out the AngularJS Forms using the following code snippet: document.getElementById("username").value = "ZSAdmin" document.getElementById("password").value = "SuperSecure101" How can I trigger the AngularJS Form validation befo ...

javascriptjqueryhtmlangularjs