I seem to have encountered a design issue with a form I am working on. Something seems amiss as the lower edges are not aligning properly

I am facing an issue with the design of a form. The lower edges are not aligned properly. What could be the cause of this problem?

<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label col-form-label-lg">CIDR-Suffix:</label>
<div class="input-group col">
<div class="input-group-prepend">
<span class="input-group-text" id="CIDRSu123">/</span>
</div>
<input type="number" min="0" max="32" class="form-control" id="CIDRSu" aria-    describedby="CIDRSu123" required>
</div>

Here is how it currently appears: https://i.sstatic.net/h9R0N.jpg

htmlcssbootstrap-4

Answer №1

.col is incompatible with input groups in Bootstrap 4. To resolve this, you should utilize a grid layout and position the label and input groups separately.

Here's a functional example:

/* Center large form label vertically */
.form-group.row label.col-form-label-lg
{
  padding-top: calc(.5rem - 4px);
  padding-bottom: calc(.5rem - 4px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="form-group row">

  <!-- First row: adjust as needed to your preference -->
  <div class="col-lg-2 col-md-3 col-sm-4 col-6">
  
    <!-- Your label -->
    <label for="inputPassword" class="col-form-label col-form-label-lg">CIDR-Suffix:</label>
    
  </div>
  
  <!-- Second row automatically adjusted with col -->
  <div class="col">
  
    <!-- Your input-group -->
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="CIDRSu123">/</span>
      </div>
      <input type="number" min="0" max="32" class="form-control" id="CIDRSu" aria-describedby="CIDRSu123" name="inputPassword" required>
    </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

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

Submission of the form was cancelled, causing a loop to occur

I'm encountering an issue with submitting a file through a standard HTML form. After uploading the file, the process seems to get trapped in a continuous loop where the file keeps uploading repeatedly. The submission of the form is done using jQuery, ...

javascriptjqueryhtmlgoogle-chromesetinterval

ways to modify hash URLs using JavaScript

I am looking to add separate hash links for my Facebook and Instagram social media pages. I also want to change the text color to blue for Facebook and yellow for Instagram. How can I achieve this using JavaScript? let socialMediaData = [{ s_media: &apo ...

javascripthtmljqueryreactjs

Achieving Full Screen Height in Angular Component

Trying to nest an angular component within another one that occupies the entire screen using height:100%; in the component's css file. I want to stack them and ensure each component takes up the full screen height, but setting height:100% doesn't ...

javascriptcssangularuser-interfacefrontend

Discover the best way to reference a JavaScript variable within an HTML form textfield

I'm having trouble with a script that is supposed to display the selected value from a drop down list in a text field on an HTML form. When I select an option, the value is not appearing in the text field. Can someone please assist me with this issue? ...

javascripthtml

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...

cssreactjsnext.jscss-modulesframer-motion

Create a JavaScript alert script devoid of any instances of double quotation marks

This snippet belongs to my webpage: <span onclick=alert('Name:$commenter_name <br>Email:$commenter_email <br> Rate:$commenter_rate <br>Comment time:$currentdate <br>Comment:$commenter_comment')>$commenter_name:$comm ...

javascriptphphtmldom-eventsalert

The CSS form appears to be too large for the page

On every single one of my pages, the content fits perfectly within the body: However, when I have forms on the page, they extend beyond the footer and the body doesn't resize accordingly: Where could the issue be coming from? ...

asp.net-mvc-3htmlcss

"Experiencing trouble with Bootstrap popover manual show feature using HTML content - functions on jsfiddle but not functioning properly on my

Displayed below is the HTML code generated by my ASP.NET page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ...

bootstrap-4

I aim to display a well-optimized mobile view by utilizing Bootstrap CSS

I need my website to be mobile responsive and I want the mobile view to have specific changes. Simply adding cd-xs-12 or even cd-sm-12 is not achieving the desired outcome. https://i.sstatic.net/0GU2h.jpg This is the current code I have: ...

javascriptjqueryhtmlcsstwitter-bootstrap

The new FormData(form) method unexpectedly returns an empty object

In this scenario, I am aiming to retrieve key-value pairs. The form on my page looks like this: <form id="myForm" name="myForm"> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> ...

javascripthtmlform-data

JavaScript: How can I remove it when I click anywhere on the webpage with onClick?

A challenge I'm facing involves creating a form with an input field that changes its border color when clicked. My goal is for the border to return to its original color when clicking anywhere else on the page. -HTML <form action=""> ...

javascripthtmlcss

"Short-term" variation not appearing within the Material-ui Drawer component

I am attempting to create a responsive drawer component using material-ui, where it is toggleable on smaller screens and remains open on desktop. Following the mui documentation, I added the temporary variant to the drawer, but it does not display in desk ...

htmlcssreactjsmaterial-ui

CSS mandates the inclusion of the required tag on input fields, however it may not always be necessary

Currently, I am using Google Chrome which is vital for my work. Utilizing CSS and jQuery, I have developed adorable 'placeholders' that transition into labels. You can view the codepen here. //HTML <div class="form-group col-lg-6 field"> ...

jqueryhtmlcssbootstrap-4

Identify and track colored dots within an image using tracking.js

I'm working on creating a program that can tally the number of dots on dominoes in an image, such as the one shown here: https://i.sstatic.net/NKHXl.jpg My goal is to develop this functionality using JavaScript. I've attempted to learn how to u ...

javascripthtml

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...

javascriptphphtmlcssemail

Is there a way to align the input and button side by side using Bootstrap v5?

Is there a way to make my input textbox and button appear side by side without using the d-flex class in the div? I want to center align the content but removing the class messes up the alignment. Any suggestions on how to accomplish this? <!DOCTYPE htm ...

htmlcssbootstrap-5

``There seems to be an issue with Firefox's background position percentage

After combining multiple images into one to reduce HTTP requests, I utilized background-position in percentage values to control which image was displayed. Since the width of the images is dictated by the parent element, using percentages rather than pixel ...

htmlcssfirefox

Tips on aligning two divs vertically within an HTML <li> element, even with content that varies in size, by utilizing nested flexboxes

Every div contains unique content of varying heights. Our approach involves using flexboxes to ensure equal height for each li element. Now, we are facing a challenge with positioning the div class="2" so that their tops align perfectly. We've expe ...

htmlcssflexbox

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height. Here is my code: <html lang="en"> <head&g ...

htmlcss