Validation message causing Bootstrap form inline to lose center alignment

Could someone please assist me with form inline in Bootstrap?

I am trying to ensure that all inputs are of the same height (or centered), but I'm facing an issue when a validation message is displayed. DEMO: http://codepen.io/Tursky/pen/gpvgBL?editors=100

Additionally, I would like to have this message appear under each input field.

Thank you for your assistance.

<form class="col-xs-12">
<div class="form-inline row"  style="padding:25px;">
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" >ERROR</span>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" ></span>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" ></span>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" ></span>
    </div>
</div>

Answer №1

You have the option to use the "&nbsp;" code to fill in that space with a new blank space.

See a live example here.

<form class="col-xs-12">
    <div class="form-inline row"  style="padding:25px;">
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >ERROR</span>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >&nbsp;</span>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >&nbsp;</span>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >&nbsp;</span>
        </div>
    </div>
</form>

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

The left margin is malfunctioning

As a newcomer to css, I am struggling with adding margin-left to my paragraph and <h2>, and it's not taking effect. I have a 700px div and I want to add a 10px margin-left to both <p> and <h2> in relation to the image. Despite my e ...

Tips for eliminating horizontal scrolling in a fixed width layout

When designing a responsive website using media queries, I encountered an issue where the screen size changes to 320px and all elements are also set to 320px, but a horizontal scroll appears. Despite my efforts, I am unsure how to resolve this problem. ...

Is There a Workaround for XMLHttpRequest Cannot Load When Using jQuery .load() with Relative Path?

My current project is stored locally, with a specific directory structure that I've simplified for clarity. What I'm aiming to do is include an external HTML file as the contents of a <header> element in my index.html file without manually ...

Is there a way to have an image expand to fit the entire screen before scrolling to view another image?

I'm working on a website and I want to have an image that automatically adjusts to fit any screen size. Users should be able to scroll down to see more content or another image. A similar effect can be seen on this site: . Any suggestions would be rea ...

What is the best method for eliminating tiny spaces between images that are aligned horizontally?

Check out this link for more details: . I am looking to eliminate the slim vertical gaps between the images in html5 without resorting to using the table cellpadding="0" cellspacing="0". Any ideas on how to achieve this? ...

The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from bein ...

Arrange the array in chronological order based on the month and year

I'm looking for assistance with sorting an array by month and year to display on a chart in the correct order. Array1: ['Mar19','Apr18','Jun18','Jul18','May18','Jan19'....]; Desired Output: ...

Arranging two DIVs side by side

I am struggling with positioning a promo image next to a dropdown menu, which consists of several DIVs. Currently, the image is displaying below the menu due to using inline-block and block properties in the CSS styles. .menu{ background-color: whi ...

HTML textarea fails to recognize inline styles

My journey with JHipster began recently when I embarked on my first project. Two entities were created, one of which resembles a blog. This particular blog entity has a content attribute that interacts with a textarea. In my blogs.html file, I allowed the ...

Why is my client program not receiving a response from this socket.io server?

Currently, I am in the process of developing a trivia game where two users engage in answering questions with the winner being declared at the end. As part of this project, I have integrated socket.io to facilitate the exchange of answers. However, I have ...

How to create HTML buttons with CSS that maintain proper proportions?

How can I ensure that my HTML buttons adjust proportionally to different screen sizes? I've been working on coding an Android app using HTML and CSS, and everything seems to be running smoothly. However, when I share the file with a friend, he compla ...

Encountering a problem with Material UI where the drop-down options are appearing below the footer of the modal window

Hey there, I'm currently using Material UI and React Select. One issue I've run into is that my dropdown options are appearing below the modal window. You can check out the code sandbox demo here https://i.sstatic.net/Av6Pe.jpg I've tried ...

Adjust the width to ensure the height is within the bounds of the window screen?

I am currently in the process of developing a responsive website, and my goal is to have the homepage display without any need for scrolling. The layout consists of a 239px tall header, a footer that is 94px tall, and an Owl Carousel that slides through im ...

Tips for determining the size and identifier of a newly appended element in jQuery?

Struggling to create a select element with a width="347px" and id="select-box-1". I attempted to use .append("select"), but my search on .append() didn't yield the desired results. Unsuccessful Attempt: .append("< ...

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

There was a problem retrieving the product information from the API

I have been struggling to pinpoint the exact issue at hand. The foundation of HTML and CSS is pre-written, with JavaScript responsible for generating the core elements to populate the DOM. Within my script, I am attempting to retrieve product data in ord ...

What is the best way to combine 4 small triangle pieces in order to create one large triangle?

Is there a way to create an image background with triangle shapes by combining small triangles together? I am interested in making this collection of triangle image backgrounds. Can someone guide me on how to do it?! .block { width: 0; height: ...

Customize the layout of menu icon in HTML/CSS using FlexBox Grid

Recently, I have encountered an issue with the position of a menu icon on my website. The icon is displayed when the window reaches a certain size, but it is not aligned properly on the right side of the site. Ideally, I would like to use the "right" prope ...

Selected Angular Radio Button

Back in the good ole days of basic HTML and CSS, I was able to achieve the following: input:checked+label { background-color: #f00; } <div class="col-xs-6"> <input type="radio" id="template-1" name="template" value="template1" checked> ...

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...