Combining input elements and captchas in one line within Bootstrap

I am currently working on a form group that includes a label, a captcha image, and an input field for the captcha code. My goal is to have the label positioned at the top of the form group, with the captcha image and input field aligned in one line. I have successfully achieved the first part but am struggling with the second.

Here is the HTML code I have:

<div class="form-group has-error">
    <label for="captcha">Verification Code</label>
    <div class="input-group">
    <?php echo $captcha; ?>
    <input type="text" class="form-control" id="captcha" maxlength="4" name="captcha" placeholder="Verification Code">
        </div>
    <span class="help-block"><?php echo form_error('captcha'); ?></span>
</div>

Image:

Could anyone provide guidance on how I can achieve this?

htmlcsstwitter-bootstrap-3

Answer №1

Referencing the Forms - Basic example

Customizing form controls with global styling is easy. Once you remove the class .form-control from the input, both elements will align on the same line.

Here is a snippet of code showcasing this concept:

<div class="form-group has-error">
    <label for="captcha">Random Code</label>
    <div class="input-group">
        <img class="captcha-img" src="http://lorempixel.com/100/20"/>
        <input type="text" id="captcha" maxlength="4" name="captcha" placeholder="Random Code" />
        </div>
    <span class="help-block"><?php echo form_error('captcha'); ?></span>
</div>

To visually see this in action, check out this JSFiddle

Update:

After some tweaking, the solution is clear. By adding class="row" to the outer div and structuring the elements with additional classes like col-xs-2 or col-xs-4, you achieve:

<div class="form-group has-error">
    <label for="captcha">Random Code</label>
    <div class="row">
        <div class="col-xs-2">
            <img src="http://lorempixel.com/100/20" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" id="captcha" maxlength="4" name="captcha" placeholder="Random Code" />
        </div>
    </div> <span class="help-block"><?php echo form_error('captcha'); ?></span>

</div>

Check out the updated JSFiddle

Answer №2

Include the following CSS code to style your input element:

#verification { display:inline; }

Answer №3

It appears that the width of the outer container is not sufficient for keeping two elements inline. Each of these elements can be restricted to a 45% width.

To visualize this issue, you can apply a border to the outer container div.form-group.

<div class="form-group has-error" style="width:200px;border:1px solid red">
    <label for="captcha">Random Code</label>
    <div class="input-group">
        <img class="captcha-img" src="http://lorempixel.com/100/20"/ style="width:40%">
        <input type="text" class="form-control" id="captcha" maxlength="4" name="captcha" placeholder="Random Code" style="width:40%"/>
        </div>
    <span class="help-block"><?php echo form_error('captcha'); ?></span>
</div>

Check out this JSFiddle for reference.

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

Unable to assign focus to textbox

In my chrome extension, I have implemented two text boxes - one for entering a URL and the other for LDAP. Upon clicking on the extension icon, a popup page opens where I automatically fill the URL text box with the current page's URL using the code s ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Struggling to remove an image while using the onmouseover event with a button?

I am encountering an issue with hiding an image using the onmouseover event not applied directly to it, but rather to a button element. The desired functionality is for the image to appear when the mouse hovers over and disappear when it moves away. Here&a ...

javascriptjquerycssangularjshtml

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

javascripthtmlangulartypescriptcheckbox

Encountering a problem with the persistent JavaScript script

I have implemented a plugin/code from on my website: Upon visiting my website and scrolling down, you will notice that the right hand sidebar also scrolls seamlessly. However, when at the top of the screen, clicking on any links becomes impossible unless ...

javascripthtmlcss

What is the best way to incorporate a range of details into a div using only jQuery, all while avoiding the use of data-

I'm struggling to find a concise way to explain this, so please bear with me. The information I'm sharing here is all just for example purposes and may sound strange. I have been working on creating a character select page where clicking on a cha ...

javascriptjqueryhtml

Adjust the color of the icon depending on the value

I am new to Angular2 and I'm looking for a way to dynamically change the CSS of an icon based on specific values. Here is the code in HTML: <li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</l ...

htmlcssangulartypescriptng-class

Change the absolute positioning of a div element to be applied globally

When trying to get the position of an element using jQuery's .offset(), I then set the div to have a position:absolute; and adjust its left and top based on the information obtained from offset(). This method works well when all the element's pa ...

jqueryhtmlcsspositioncss-position

What is the best way to move between websites or pages without having to reload the current page using a selector?

Have you ever wondered how to create a webpage where users can navigate to other websites or pages without seeing their address, simply by selecting from a drop-down menu? Take a look at this example. Another similar example can be found here. When visit ...

javascriptphphtmlcssajax

full-page overlay is covering the entire screen

Is there a CSS-based solution to create an overlay that remains visible even when the page is scrolled down? I want to use this overlay behind a popup. Using JavaScript to set the height of the overlay based on the page's content is one option, but I& ...

htmlcss

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...

javascripthtmlcss

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...

csssvg

Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code: <body> <div class="page-top"> * </div> <div class="page-bottom"> <div class="contentbox"> <h1>CONTENTBOX</h1> </div ...

csshtml

Tips for recognizing components within the #document are as follows:

I am currently utilizing xpath to extract data from a dynamic table in an HTML document. The specific information I am looking for is contained within a tag identified as #document. However, I am encountering difficulties including this unique element in ...

pythonhtmlseleniumxpathiframe

Having trouble with enter key input not triggering?

I have scoured various resources for answers to my query, including Stackoverflow. Unfortunately, none of the posts I came across have helped me resolve my issue with getting the enter key to work in my project for FreeCodeCamp on Codepen. When I press the ...

javascriptjqueryhtml

Struggling to fetch option value from a dynamic add/remove list using a combination of PHP, jQuery, and HTML5

Having trouble accessing and displaying values from a select list. Constructed an add/remove list functionality using JQuery but unable to showcase the values using foreach and for loops. Specifically trying to obtain $existing_mID[$j] values from the &apo ...

javascriptphpjqueryhtml

The preventDefault() function is not functioning properly on the <a> tag

As a JavaScript beginner, I decided to create an accordion menu using JavaScript. Although I was successful in implementing it, I encountered a bug in my program. In this scenario, uppercase letters represent first-level menus while lowercase letters repr ...

javascriptjqueryhtmlcss

Moving specified data from one interactive table to another interactive table

In my setup, there are two tables - one for products and another for customers: <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>Product Code</th> </tr> </thead> ...

angularjshtml

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...

javascripthtmljquerycss

One login for accessing multiple forms

I am trying to figure out a way to use one login for two different forms that serve different functions. How can I pass the login details between these two functions? Just to clarify, I only have knowledge of JavaScript and VBScript, not jQuery. For inst ...

javascripthtmlasp-classic

Strange occurrences within the realm of javascript animations

The slider works smoothly up until slide 20 and then it suddenly starts cycling through all the slides again before landing on the correct one. Any insights into why this is happening would be greatly appreciated. This issue is occurring with the wp-coda- ...

javascriptcsstransition