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

Executing a post request asynchronously and storing the retrieved data into a variable

Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...

jqueryhtmlangularjsajax

Tag in HTML not being replaced

Within my HTML snippet, I have encountered some <br> tags <div id="reading-project"> <p>The next morning, as soon as the sun was up, they started on their way, and soon saw a beautiful green glow in the sky just before them."That must b ...

javascripthtmlreplace

Application with menu design, similar to the layout of google.com on mobile devices

Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...

javascriptandroidjqueryhtmlcss

The forecast button seems to be malfunctioning. Each time I attempt to click on it, a message pops up saying, "The server failed to comprehend the request sent by the browser (or proxy)."

Even though I provided all the necessary code, including the Flask app, predictionmodel.py, and HTML code, I am still encountering an error when running it locally after clicking submit. The browser (or proxy) sent a request that this server could not un ...

pythonhtmlmachine-learningflasknltk-trainer

Are there any alternative methods to avoid duplication of Navbar link margin classes in Tailwind CSS?

It feels really repetitive to have to add margin classes to each LI manually on a non-dynamically generated menu. It almost seems as messy as using inline style attributes... Is there a more efficient way to handle this? While it may not be a big deal fo ...

csstailwind-css

Modifying a Sass variable using a Knockout binding or alternative method

Is it feasible to dynamically alter a sass variable using data-binding? For instance, I am seeking a way to modify the color of a variable through a button click. I am considering alternative approaches apart from relying on Knockout.js. $color: red; ...

javascriptjqueryhtmlknockout.jssass

Leveraging Vue's "v-slot" functionality to create a specified slot within a JavaScript object

I have turned to this platform seeking guidance on using "v-slot" while utilizing a syntax that involves a javascript object. This specific method was introduced in the online course Intro to Vue3 which I recently completed. Below is an image de ...

javascripthtmlvue.jsvuejs3

Arrangement using the display property of inline-block not following a linear direction

I'm experiencing some issues with the arrangement of elements on this page: When the viewport width is around 800px, the layout appears misaligned. Some lines have only a few bottles even though there is space for more. Is there a solution to this pr ...

htmlcss

Add a new element to the page with a smooth fade-in animation using jQuery

var content = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(content).fadeIn(999); Unfortunately, the desired effect is not achieved with this code. I am trying to create a sleek animation when adding new content. ...

javascriptjqueryhtmlcss

Presenting a data table in Angular

I'm new to using Angular and need help creating a table to organize my data, which is being fetched from a JSON file on the server. Here's the content of data.component.html: <div class="container"> <h1>Search history</h1> ...

htmlangularangular-material

developing a loading animation with progress indicator in CSS3

I have been working on creating a preloader, but I am having trouble embedding the percentage with the CSS circle. So far, I have tried various plugins without success. Can anyone help me with this issue? Here is my current progress. Below is the HTML co ...

javascriptjqueryhtmlcsspreloader

What could be causing my jQuery handler to not capture my form submission?

I am developing a Ruby web application and using JQuery and AJAX to send/receive data. However, I am facing an issue where pressing the enter key does not submit the form. What should I do to ensure that my form submits successfully? Within my Foundation ...

javascriptjqueryhtmlajaxforms

Aligning table data elements within a division

Currently working on revamping a tech night website for my school. I made some changes to the navbar, switching it from the side to the top. However, I'm struggling to get the table data and menu to center properly within the div. If you'd like ...

htmlcssmenunavbarnav

Exploring the versatility of Bootstrap 4's grid system with varying column widths

I am encountering an issue with div alignment in my code. The first two col-3 classes seem to have different widths than the next two col-3 classes, causing elements to appear unaligned. Here is the code snippet: <link href="https://stackpath.bootstr ...

htmlcsstwitter-bootstrapbootstrap-4

Modifying the chart width in Chart.js: A step-by-step guide

After creating a chart using Chart Js, I encountered an issue where the chart did not fit within the specified width. Adjusting the attributes of canvas proved to be ineffective, specifically with regards to the width attribute. Despite changing the value, ...

javascripthtmlcsschartschart.js

What is the best way to include start and end labels on Bootstrap's progress bars?

Is there a way to add start and end labels directly below the progress bar in Bootstrap? Here is an example of what I want: [||||||||------------] <Start Label> <End Label> I have been searching for a solution, but it seems ...

csstwitter-bootstrap

Tips for creating the appearance of a resizable element

My goal was to replicate the resizing and moving functionality of elements in Adobe Illustrator using CSS alone. Unfortunately, I couldn't find any useful resources on how to achieve this. ...

cssresizecontrolsoutline

What is the best way to showcase my divs in a masonry layout using flexbox?

I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some ...

htmlcss

Conceal the Download Button Effectively

I operate a website for playing audio files and I am looking to prevent users from downloading the sounds using the download button in the HTML audio element. Here is what I came up with: <audio src="sound.mp3" controls controlsList="nodownload">< ...

html

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp