Guide on incorporating an inline input and glyph icon within a table cell using Bootstrap 3

How do I align my glyph icon in the same line as an input in Bootstrap3? I've tried various classes but none seem to work. The glyph icon keeps displaying on a separate line because the input is too long. The only solution that works is manually setting the width of the input, but that's not ideal. Any suggestions?

<table class="table table-bordered table-striped table-hover">
<tbody>
  <tr>
    <td class="search-header">Legend:</td>
    <td>
        <div class="row-fluid form-inline">
            <input class="form-control input-sm" type="text" id="inputSmall"> 
            <span class="glyphicon glyphicon-question-sign"></span>
        </div>
    </td>
  </tr>
</tbody>
</table>
csstwitter-bootstrap-3

Answer №1

An effective approach could be:

   <div class="form-group">
      <label for="exampleInput">Legend:</label>
      <div class="input-group">
        <input type="text" class="form-control" id="exampleInput">
        <span class="input-group-addon"><i class="fa fa-question-circle"></i></span>
      </div>
   </div>

For more information, please refer to the official documentation on Input groups.

Answer №2

If you're searching for a way to add an icon to the end of a small input in a table cell, it's best to do so by using a button. The Bootstrap 3 code for this would look like the following:

<table class="table table-bordered table-striped table-hover">
<tbody>
  <tr>
    <td class="search-header">Legend:</td>
    <td><div class="input-group">
            <input type="text" class="form-control input-sm" id="inputSmall">
            <span class="input-group-btn">
                <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-question-sign"></i></button>
            </span>
        </div>
    </td>
  </tr>
</tbody>
</table>

If you need to adjust the width of this element group, remember to wrap it in a DIV and apply the appropriate class for the desired width.

UPDATE: JSFiddle demo

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

Utilize Bootstrap to ensure that column size remains consistent at 12 on small devices, while maintaining default behavior on larger devices

I have a component that has the ability to hold any number of elements. My goal is to have the elements stack on top of each other and take up the full width of the container when the screen is small, but revert to the default Bootstrap column behavior on ...

htmlcssbootstrap-4

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 ...

htmlcssoverlapping

Tips for resizing the MUI-card on a smaller screen

Is there a way to adjust the width of the card on small screen sizes? It appears too small. You can view my recreation on codesandbox here: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js The width seems inadequate for this particular scr ...

javascriptcssreactjsmaterial-ui

"Enhance your webpage with a captivating opaque background image using Bootstrap

I'm new to exploring Bootstrap and I am currently experimenting with options for displaying content with a semi-transparent background image. Currently, I am using a "well" but I am open to other suggestions. I have managed to place the image inside t ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Horizontal scrollbar displayed by CSS Bootstrap

Experimenting with Bootstrap on a small project and encountering an issue that I can't seem to figure out. Here is the snippet of my code: nav{ background-color: lightblue; } section{ background-color: lightgreen; } <link href="http://netd ...

csstwitter-bootstraptwitter-bootstrap-3

showing text style that is only specified on the server, not by the client

I am in the process of creating a new website that offers SMS services through clickatell. This website includes various font families that may not be defined on the client's computer. For instance, if the site is accessed from a different computer, t ...

htmlcssfont-face

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

htmlcssangularangular-materialmat-form-field

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

https://i.sstatic.net/Ov3yF.png I'm currently working on a code to assign tasks to employees, and I have created a login form with multiple text fields, each accompanied by an icon. However, there seems to be a layout issue as shown in the image. The ...

cssreactjsmaterial-ui

Utilizing Vanilla JavaScript to Insert a Class When a Distinct Class Exists Within an Element

My goal is to dynamically add a class to specific elements based on the presence of another class in elements below them. Consider the following code snippet: < p class="my-paragraph">This is a sentence.</p> < p class="my-par ...

javascripthtmlcss

Issues arise when trying to integrate Bootstrap modal with bootcards

I am currently implementing a modal with bootstrap: <div class="modal" id="contact-update-view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head ...

htmlcsstwitter-bootstrapmodal-dialogz-index

I'm having trouble getting my dropdown content to align properly with my centered search bar. Any suggestions on how to fix this issue?

How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar. This is the HTML: &l ...

htmlcss

What is the best way to achieve a precision of 6 decimal places in JavaScript when working with decimals?

While working on coding to round numbers to six decimal places after performing some arithmetic operations, I encountered a problem. I was iterating through the elements of an array and conducting calculations based on the array contents. To achieve roundi ...

javascriptcssarraysdecimaltofixed

What's up with portable devices requiring two taps to hover over one DIV and affect another DIV?

Upon implementing "hover one DIV - affecting another inner DIV," a strange issue arose on iPad/iPhones where it now requires two taps to click on the link within the DIV with the hover effect: Below is the HTML code: <div class="portfblock"> &l ...

ioscsshovertouchscreen

The issue of responsive spacing (such as mb-lg-2 mb-sm-3, etc) not functioning as expected has been identified in Bootstrap

Previously in Bootstrap 4, these classes were effective. However, I am finding that they are not functioning properly in Bootstrap 5. Any insights as to why this might be happening? Note: d-block d-lg-flex , text-center text-lg-start text-md-end seem to s ...

csstwitter-bootstrapbootstrap-5

Turn off hover opacity effect for a specific image

Currently, I've implemented a hover opacity effect on my images using the following CSS: img { opacity: 1.0; filter: alpha(opacity=1.0); } img:hover { opacity: 0.6; filter: alpha(opacity=0.6); } However, I now have a specific image for whi ...

csshoveropacity

What is the best way to adjust the width of a button to match the size of its

Is there a way to make a button automatically adjust its width to the parent div it is nested in? . Below is the code (html structure) for reference: <div class="drp"> <button class="drp-btn" id="i-drp-btn">m/s</button> <div i ...

htmlcss

The sequence of HTML5 DragDrop Enter and Leave events occur consecutively

I am encountering a problem with a simple drag & drop effect where the class name is changed when the drag enters or leaves, resulting in continuous entering and leaving. Take a look at this basic HTML code: <div class="box"> <div cla ...

javascripthtmlcssdrag-and-dropdraggable

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...

javascriptcssreactjsapexcharts

What is the best way to ensure proper alignment of elements in a React application?

Currently, I am delving into learning react and antd by putting it into practice. My goal is to create a layout with a button and two input fields that have a 10px gap between them, while also displaying the titles of each field directly above them. To ach ...

htmlcssreactjsantd

When the page is resized, the Font-Awesome icons shift position

/* icon sect*/ .social { margin-top: px; padding: 0; position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); } .social li { list-style: none; float: left; margin: 0px; width: 60px; height: 10px; line-height: 60px; ...

htmlcsstwitter-bootstrap