The helptext in Bootstrap4 input-group does not appear in a block format

I recently encountered an issue on my Bootstrap 4 page where adding help text to a single input control resulted in it appearing on the same line, rather than directly beneath the control as expected.

Upon investigating, I believe the problem lies within the input-group/form-group elements. However, I am struggling to understand how these components interact, especially since I am using input groups as the field label.

Here is a snippet of the HTML code:

<div class="input-group">
    <div class="input-group-prepend">
        <label for="undoLocation" id="undoLocationlabel" class="input-group-text">
            Find songs 
        </label>
    </div>
    <select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">

            <option value="0">
                that are currently in the selected locations
            </option>
            <option selected="selected" value="1">
                that were originally in the selected locations
            </option>

    </select>
    <small id="undoLocationHELP" class="form-text text-muted">
        When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
    </small>
</div>

I have also created a jsfiddle to demonstrate the issue: https://jsfiddle.net/paultaylor/g64v96fy/1/

Answer №1

As per the information provided by Bootstrap on their website:

To create block help text for inputs or longer lines of help text, you can easily use the .form-text class. This class will set the display to block and add some top margin for better spacing from the inputs above.

However, when you applied this class to a parent element with an input-group class, it naturally displayed inline with the group. Additionally, you used the default HTML inline tag <small>, which also displays inline by default.

According to the specifications:

The small element is not meant for longer sections of text, like multiple paragraphs, lists, or text sections. It should only be used for short fragments of text...

Even if you follow the recommendation and wrap it in a <p> tag, the parent element still dictates the style, and input-groups are inherently inline. Therefore, it is advised to move it outside of the div.

<div class="input-group">
  <div class="input-group-prepend">
    <label for="undoLocation" id="undoLocationlabel" class="input-group-text">
       Find songs 
    </label>
  </div>
  <select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
    <option value="0">that are currently in the selected locations</option>
    <option selected="selected" value="1">that were originally in the selected locations</option>
  </select>
</div>

<p id="undoLocationHELP" class="form-text text-muted">
  When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</p>

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

Is there a way to make the X-editable datepicker appear next to the date field rather than in the same spot every time?

When utilizing X-editable, I encountered a problem where specifying the datepicker field mode as "popup" results in the popup displaying correctly. However, when dealing with a long table (either vertically or horizontally), the position of the date/dateti ...

Implement Bootstrap globally in your React application using css modules

Just diving into the world of React and need some guidance. Recently, I integrated the https://github.com/gajus/babel-plugin-react-css-modules plugin into my project to use local CSS files with components. Now, I want to incorporate Bootstrap for the enti ...

Divergent Appearance of Input Field in Chrome versus Firefox

After testing in Chrome and Firefox, I noticed that the input box appears larger than expected in Firefox. Below is the HTML markup: <div class="form-wrapper"> <input type="search" name="Ofsearch" placeholder="Search h ...

What is the best way to accomplish a smooth transition of background colors similar to this design

I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achi ...

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

having difficulty adjusting the background color of a div that is positioned absolutely

Hey there! I am new to the world of html/css and working on my very first webpage. I'm facing an issue with setting the background color for a div with the class inner. Currently, it is displaying the background color set in the banner-bottom class. ...

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

Tips for using jQuery to adjust HTML attributes based on conditions

I'm still trying to figure out how to assign a different class attribute to an element based on another element's dynamic numberical attribute. Here is the HTML & PHP code I am working with: <?php for($i=1;$i<=$total;$i++){ ?> <a hr ...

Achieving a frosted glass effect for your background without relying on a background image

I am currently working on creating a modal window in React with a blurred backdrop. My goal is to blur the backdrop content while keeping the background image clear, as there is no image behind the modal window, just content. I have explored various soluti ...

The main menu items in jQuery do not display the child sub menu upon clicking

I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my sele ...

Can you explain how to set a title to align with the object on the far left within a Grid component using justify="space-between" in Material UI?

I am currently working on a Grid layout project that involves a Grid container with four Grid items. The first Grid item takes up the full width and contains a title, while the other three Grid items contain avatars. My goal is to align the avatars to the ...

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

Prevent automatic scrolling by clicking when you reach the bottom

In order to replicate the issue I am experiencing, please click on the down button four times, and then click on the up button. You will observe that you need to click the up button one extra time for it to function properly. How can I detect when it has r ...

The animation unexpectedly resets to 0 just before it begins

Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping b ...

Tips for customizing the appearance of your browser's scroll bar:

Is there a way to customize the browser scroll bar using html, css, and js similar to how Chrome does with Control + F? https://i.sstatic.net/62Hju.png I have experimented with adding a fixed position div creating a linear gradient style for the scroll ...

Leverage Arrays with Bootstrap SelectPicker in Javascript

I am looking to populate a Bootstrap SelectPicker with values from an array. I am unsure of how to loop through the array to extract the values. Currently, I have manually added values to the SelectPicker like this. <!DOCTYPE html> <html> < ...

User Agent Stylesheets do not take effect

https://i.sstatic.net/UXF3l.png Currently, I am working on a simple unordered list project where I am utilizing Material UI. However, there seems to be an issue that I would like some help with. (user agent) html.css The CSS includes the property padd ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

Having trouble getting ng-repeat to work properly alongside Bootstrap collapse?

Using a bootstrap 4 card to create a blog post. When the View Comments link is clicked, a collapsed div within the card-footer should open to display all comments. The collapse functioned correctly with hard coded html and dynamic data {{blog.title}} until ...

How can the spacing between Angular Material's mat-card-content and mat-card-actions be adjusted?

I am creating a mat card layout where there are two separate cards within the main card's content section. However, when I add a button for the actions section of the main card, there is no spacing between these two sections. How can I create a vertic ...