The inline feature of the Bootstrap input group addon is not being utilized

Check out my code snippet here: http://www.bootply.com/iR1SvOyEGH

<form>
    <div class="form-group">
        <label for="inputEmail">Company Name</label>
  <input type="text" class="form-control">
  <span class="input-group-addon">.test.com</span>
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Update</button>
</form>

I expected the input-group-addon to appear inline with the input box to its right, but it is displaying below the input box and taking up full width. Can anyone help me understand what I did wrong?

htmlcsstwitter-bootstrap

Answer №1

The documentation for Bootstrap clearly states that the input-group-addon class is meant to be used within an input-group, but in this case, a form-group is being utilized instead.

   <form>
      <label for="inputEmail">Company Name</label>
      <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-addon">.test.com</span>
      </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>

Check out this demo here: http://jsfiddle.net/TLtQU/3/

UPDATE: It is important to note that the label should not be included within the input-group; instead, it should be placed outside of the input-group for optimal functionality.

Answer №2

Design a new look:

.input-group-inline {
    display: inline-flex; 
    width: auto; 
    vertical-align: middle;
}

Include this in the input-group class

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

Using query strings to manipulate the URL of an iframe and add additional information

I am facing a challenge with integrating my legacy perl application into an MVC application. I have set up a structure where the legacy application is loaded into an iframe within default.aspx, but I need to capture the URL of each page within the iframe a ...

javascripthtmlasp.net-mvcperliframe

Is it possible to incorporate a php file within .htaccess?

Can anyone provide guidance on how to include a PHP file using .htaccess? I've searched online but haven't been able to find a helpful tutorial or code. Below is the PHP include code that I have tried: <?php require('footer.php'); ...

phphtmlfile.htaccessinclude

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

htmlcssbootstrap-4

The arrangement of pictures on a card

I decided to tweak the original concept by placing the images inside a Bootstrap card. However, the end result is that the images appear to be floating. https://i.stack.imgur.com/Uf721.png Any suggestions on how to make them fit nicely within the card? ...

htmlcssbootstrap-5

Maintain line breaks in the scanner input within an HTML element

Currently, I am utilizing a Zebra DS9908 scanner to scan a barcode and transfer the data onto an HTML page. However, I am encountering an issue with preserving all input characters. Despite attempting both a <div> and <textarea>, the line feed ...

htmlbarcode-scannerzebra-scanners

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

This is a sample code snippet: $list: ( input[type="text"], input[type="name"], input[type="email"], textarea, select[multiple] ) !default; @each $value in $list { ...

csssass

Is there a problem with the alignment of

<s:form id="inputThresholdForm" name="inputThresholdForm" theme="simple"> <table border="0" class="display-table" cellspacing="2" cellpadding="2" height="100%" width="100%"> <tr> <td colspan= ...

javascriptjqueryhtmlcss

What is the best way to ensure that the question text will wrap onto a new line if it becomes too lengthy

I am currently working on developing ASP.NET MVC applications. However, I am facing a design issue with the HTML, CSS, and Bootstrap elements on one of my pages. The problem arises when Question 8 exceeds the border and does not wrap to a new line as inte ...

htmlcssasp.net-mvcbootstrap-4html-helper

Look up and input information into the dropdown selection list

Is there a way to search for and input text in a select drop-down menu? Generally, we are unable to write inside the select drop-down menu. Is there a method that allows me to type inside this drop-down menu and as I am typing, if a similar word appears, I ...

phpjqueryhtmlmysqlajax

php modes breaking away from traditional php

My recent inquiry was regarding the distinction between HTML and PHP separation. While tutorials and examples often mention this concept, I have realized that it goes beyond what most people talk about - specifically relating to PHP modes. Is there a need ...

phphtml

Hiding the Bootstrap progress bar in AngularJS once it reaches 100% of its maximum value - here's how!

I need help with a bootstrap progress bar implementation. My goal is to show the progress bar when I click the test button, have it reach 100%, and then hide it. Subsequently, when I click the test button again, I want the progress bar to reappear. How can ...

angularjstwitter-bootstrap

Ways to initiate JavaScript event upon clearing input form field

I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user ...

javascripthtml

Minimizing the frequency of getElementById calls for the same HTML element

When dealing with repetitive function calls using the same element as a parameter, is it more effective to store the element as a global variable? For instance, imagine a function that is triggered on every key press and takes an element as an argument. ...

javascripthtmlglobal-variablesgetelementbyid

Toggling designs with a simple click

I'm currently working on a ReactJS project and I'm trying to figure out how to change the color of a button when it's clicked. I've heard about the Ripple API, but I find it quite complex to use. Can anyone offer some advice on how I ca ...

cssreactjsbuttonfrontendmaterial-ui

The background color in the HTML file remains unchanged

Hello everyone, this is my debut post here. I can't seem to figure out why the background color isn't changing for me. Even though I have applied the bg color property, it's not taking effect as expected. <body bgcolor="#f0ffff"> T ...

htmlcsscolorsbackground

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

javascriptjqueryhtmlcss

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

htmlcsstextflexbox

Leveraging JavaScript and HTML to extract a single data point from a JSON response

As a complete beginner, I want to clarify that I may not be using the correct terminology in my question. I am embarking on creating an HTML5/Javascript application with Intel XDK to retrieve barcode information for video games from an online API. Specifi ...

javascriptjqueryjsonhtml

Create a shiny application that makes text bold in the user interface

Can someone please guide me on how to make specific words bold in a sentence within the UI using HTML tags under the h() function? Your assistance is greatly appreciated. Thank you. library(shiny) ui <- navbarPage( title = 'Benvenuto&apos ...

htmlrshiny

Unable to view indicators and slides are not transitioning in Bootstrap carousel

I am in the process of developing a website with bootstrap, but I am encountering issues with the carousel feature. Despite copying the code directly from their official page, the carousel remains non-functional. The indicators are missing, and the slides ...

htmlcssbootstrap-5bootstrap-carousel