Using Bootstrap to add an input field next to a radio button in line

I'm in search of a way to align a text field next to a radio button using Bootstrap. If anyone knows of a specific class that can help achieve this, I would greatly appreciate it.

My current method results in misalignment, with the textbox appearing directly below the radio button instead of inline as desired.

You can view my code on JSFiddle here: http://jsfiddle.net/fs85eedu/


      <div class="radio">
            <label class="control-label">
                <input type="radio" name="radioname" id="radioid" class="radio_class">
                <label>text here</label>
                   <div class='row'>
                     <div class="col-md-5">
                       <input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
                     </div>
                   </div>
                </label>    
        </div>

Answer №1

Perhaps a solution could be combining both controls within the same row.

<div class="radio">
    <div class='row'>
        <div class="col-md-2">
            <label class="control-label"></label>
            <input type="radio" name="radioname" id="radioid" class="radio_class">
            <label>text here</label>
        </div>    
        <div class="col-md-3">
            <input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
        </div>
    </div>
</div>

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

Creating an HTML5 canvas that expands to cover the entire html document

After learning JavaScript, I decided to create a page on Github. Everything seems fine, except that the JS code for canvas doesn't scale to fit the entire HTML page. The particles only bounce off the initial window, leaving empty space when scrolling ...

Tips for stopping an accordion from toggling in Bootstrap when a user clicks on a specific section of the toggle button

I am currently utilizing bootstrap for my project. The accordion feature I have implemented is standard, but I am looking for a way to customize its behavior. Specifically, when a user clicks on elements with the class 'option', I want it to sele ...

Creating a responsive bootstrap card-tall for mobile devices

I'm currently using Bootstrap cards to create a gallery-like display of images. To style the images, I'm also utilizing the card-tall class. Since these images are posters, they naturally occupy a lot of space. Here's how it appears on the ...

Gradient that runs in a straight line from opposite ends

Is there a way to apply linear gradients from both the top and bottom to create smoother lines when text is scrolled? I was able to achieve a linear gradient at the bottom using this code: <div className="vsebina" style={{WebkitMaskImage:&apo ...

How to flexibly show one item on the top line and two items on the bottom line using CSS

I've been trying to solve a simple problem with my flex container layout. I want to display 3 items in 2 rows - one item in the first row and the other 2 in the second row. However, no matter what I try, the items all end up on a single line due to th ...

php executing javascript - error

I have a question regarding my PHP file code: echo '<script type="text/javascript">'; echo '<audio id="player" src="../cdh/ba1.mp3"></audio>'; echo '<a onclick="document.getElementById( ...

`Positioning of inline-block elements`

I am encountering an issue with the display CSS attributes set for three tags: a - inline-block img - block span - inline <a id="first"> <img/> <span> A first line of text B second line of text </span> </a> <a id="secon ...

Bootstrap resource failed to load

I successfully connected the most recent version of bootstrap.min.css to my webpage using <link rel="stylesheet" href="assets/css/bootstrap.min.css">. Initially, everything was running smoothly. However, I now encountered an issue where my browser is ...

The styling of the first column in this row will be different from the rest

Despite having the same styling and no typing errors, I am still facing an issue with the first column not being styled correctly. It appears as nothing but text inside a column square. HTML: <div class="container-fluid"> <!--Nav Bar--> ...

Linking text to specific spot on image

I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost. While I want to allow some resizing of the win ...

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

Place a circular grid at the center of a webpage

Is there a way to align this grid in the center of a webpage? It appears skewed on mobile view but not on larger screens. The issue seems to be primarily with mobile devices. For instance, when viewed on a mobile device, the circles are positioned to the r ...

Issue when attempting to animate an SVG point using translateX transformation

I am attempting to create a basic animation using the translate X property on a section of my svg when hovering over the element. Here is the code I have so far: <html> <style> .big-dot:hover { transform: translateX(20px); animat ...

Ways to guarantee that only one accordion tab is open at a time while keeping it open continuously

Hey everyone, I'm just starting to learn how to code and still getting the hang of using Stack Overflow so please bear with me if my question isn't perfectly formatted. I have created an accordion that is almost functioning correctly, but I need ...

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

I am facing an issue with my data table requirement. I need to have 2 thead elements in the table, both of which should stick when scrolling. However, only the last thead's tr stays stuck at the top while the first one gets hidden. Can anyone help me ...

Tips for minimizing the arrow size in the infowindow on a Google Maps interface

As a newcomer to customizing Google Maps, I am looking to decrease the size of the arrow in the infowindow and position it in the bottom left corner for a better appearance. I am struggling to figure out how to adjust the height and width of the arrow and ...

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

Create a modal dialog in CSS that dynamically adjusts its size without extending beyond the edges of the screen

I'm in the midst of developing a web application specifically for tablets. My goal is to display a modal dialog with a title bar and body that dynamically adjusts in height based on its content. If the content exceeds the viewport size, I want the dia ...

Limiting the click event to the parent div only

I've encountered a problem with my overlay setup. I have an overlay with a child div inside, and I want the overlay to close only when the user clicks on the overlay itself, not the child div. Even though I've implemented the closing function, it ...

The div element moves to the right as soon as the drop-down menu pops up

Currently, I am facing an issue with aligning an image inside a div that is centered in an outer-wrapper. The outer-wrapper contains a horizontal menu at the top with 5 sub divs displayed inline. I have implemented CSS for a drop-down menu that appears whe ...