Add content to the beginning of the input with the assistance of bootstrap. However, ensure that when utilizing "form-group row", the content is shifted

I am experiencing an issue with my Bootstrap 4 form. I am using the 'form-group row' class to display labels and inputs on the same line, but when I try to prepend a $ sign before an input, it shifts the input to the next line.

Below is the code snippet:

<link href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group row">
  <label for="msrp" class="col-sm-2 col-form-label text-right">MSRP</label>
  <div class="col-sm-10">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input onBlur='this.value = parseFloat($(this).val()).toFixed(2)' type="number" step="0.01" class="form-control" name="msrp" required>
  </div>
</div>

This is how my output looks: See screenshot here

I have tried various solutions found online without success. If anyone could assist in keeping the label and input on the same line while adding the $ sign before the input, I would greatly appreciate it.

htmlcssbootstrap-4

Answer №1

Make sure to first create a div with the class of input-group before adding the input-group-prepend class. Update your code as follows:

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
</div>

Check out this Bootstrap documentation link for more information.

Answer №2

Thank you paul-schultz for your help! After experimenting a bit, I was able to get it to work. I decided to post the code along with a screenshot so others can easily see how to implement it too. Thanks once again!

<div class="form-group row">
  <label for="msrp" class="col-sm-2 col-form-label text-right">MSRP</label>
  <div class="col-sm-4">
    <div class=input-group>
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input onBlur='this.value = parseFloat($(this).val()).toFixed(2)' type="number" step="0.01" class="form-control" name="msrp" required>
    </div>
  </div>
</div>

Check out the result HERE

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 jQuery or Javascript alternative to CSS Counter?

Can a counter be implemented that changes the text of a tag directly using jQuery/Javascript? For example, if there were two tags like this: <a>hello</a> <a>bye</a> After executing the jQuery/JS function, the result would be: < ...

javascriptjqueryhtmlcss

CSS documents are being displayed as type text/plain

My goal is to host my static blog (built with Jekyll) on my Ubuntu server, but I'm encountering a problem where the CSS isn't being applied and I keep seeing this error: "Resource interpreted as Stylesheet but transferred with MIME type text/pla ...

cssjekyll

I am facing issues with utilizing if endif for my Internet Explorer stylesheet in HTML/CSS

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <link rel="StyleSheet" href="style.css" /> Whenever I apply this code, the content in Internet Explorer is being influenced by both style.css and ie. ...

cssinternet-explorer

Foundation: the importance of source order (without using flex grid)

I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...

htmlcsszurb-foundation

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

I want to create a unique effect with an image in the background and a button above it. When the mouse hovers over the button, I want its opacity to decrease while the image's opacity increases simultaneously. I have experience applying fade effects ...

htmlcss

Disappearing table borders in print view on Firefox

I have been working on creating a printable table that displays correctly in Chrome. However, when viewed in Firefox, the table borders are not showing up. <body> <table> <tbody> <tr> ...

htmlfirefoxprinting-web-page

PHP: Dynamically adjust image size from database to fit different screen sizes

Managing a website with various categories means each category has its own assigned image stored in the database. So, when a product from a specific category like bikes or chairs is displayed on the website, the corresponding image needs to be retrieved an ...

phphtml

angular trustAsHtml does not automatically insert content

Two divs are present on the page. Upon clicking button1, an iframe is loaded into div1. The same applies to button2 and div2. These iframes are loaded via ajax and trusted using $sce.trustAsHtml. This is how the HTML looks: <div ng-bind-html="video.tru ...

javascripthtmlangularjsiframe

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

javascripthtmlcssangularjs

CSS / JavaScript Navigation Menu overshadowing Flash content in Firefox

On my website, I have a drop-down menu that was created using CSS and JavaScript. This menu drops down over a Flash animation. Interestingly, in Internet Explorer 6 and 7, the drop-down menus successfully appear over the Flash animation. However, in Mozill ...

javascriptcssflashnavigation

Tips for halting the live graph plotting based on a specific condition with canvas js

I have a piece of code that generates a live graph based on probabilities. I am looking for a way to stop the plotting process as soon as a specific condition is met. <script> window.onload = function () { var dps = []; // dataPoints var c ...

javascripthtmlcanvasjs

What are the steps for implementing responsive design animation in my particular scenario?

Can someone please help me with a strange bug in Chrome? I am trying to create a responsive design for my app. The width of the 'item' element should change based on the browser's width. It works fine when the page first loads in Chrome, b ...

javascripthtmlcssanimation

over line up text align on the baseline with hr

I'm looking to make sure the text is positioned just above the hr tag, similar to how the logout button appears with bootstrap. This is the desired outcome: https://i.sstatic.net/gIl1b.png Here's the code I have using bootstrap : <di ...

cssbootstrap-5

Adjusting the height of a div according to the changing heights of other divs

The sidebar contains a search field, two lists, and a text div. The height of the search field and text div always remains constant, while the heights of the two lists vary dynamically. I am exploring the possibility of using only CSS to make the height o ...

htmlcss

Tips for creating Java code that generates visually appealing colored HTML from JSON data include:1. Use libraries like Gson or Jackson

On certain pages dedicated to our API, such as for sales, we want to showcase JSON examples. We are looking for a nicely formatted display with color-coded spans. While the option of using the JavaScript code prettifier from this archived and unmaintaine ...

javahtmljson

What is the best way to implement a hover effect on multiple rows within an HTML table using Angular?

I am currently working on developing a table preview feature to display events. I previously sought assistance here regarding positioning elements within the table and successfully resolved that issue. Applying the same principles, I am now attempting to c ...

htmlcssangulartypescript

Angular toolbar on the left side that hovers seamlessly

1 I am using Angular Material toolbar and trying to position a span inside the toolbar on the left side. I have attempted using CSS float left, but it is not working. Can anyone provide some assistance please? <mat-toolbar> <span>le ...

cssangularangular-material

The width of sibling divs in IE7 does not match their sibling's width

Currently facing a challenge with resolving an IE7 problem. My goal is to ensure that my sibling div has the same width as its counterparts. The initial sibling serves as the header, whereas the subsequent siblings have specific dimensions. Any advice woul ...

csshtmlinternet-explorer-7

Clicking the ASP button does not trigger the onclick event when a web user control is included on the webpage

I have been working on a web form application that I developed using the visual studio template. The template includes a content placeholder that gets replaced by the content of each accessed page. One particular page, which contains server controls like t ...

javascriptc#htmlasp.netweb-controls

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox