Clever Geek Handbook

Td in one bootstrap line

Display td

content on one line using bootstrap. I went through this old post and some more solutions from google_search but no luck.

Here's at least the HTML:

<td class="column-verticallineMiddle">
  <input type="text" class="form-control form-mediumItem" >
<span class="pull-right pull-top">Abc</span>
</td>

Tried classes with no success - pull-right pull-top, inline, etc. I want the text to Abc

appear to the right of the textbox.

Here is a JsFiddle

@downvoters - If you have a solution to this please answer it. Then do -1, I will be grateful for that. Otherwise, you are not authorized to do so. If the request is not clear, ask me.

+3


source to share


4 answers


If you are using bootstrap you can use the inline form from the official documentation.

<td class="column-verticallineMiddle form-inline" style="vertical-align:middle;">
    <input type="text" class="form-control form-mediumItem" style="width:60%;">
    <span>Abc</span>
</td>


Just add form-inline

and define the input width, see the Jsfiddle here.

+2


source


try replacing this.

<td class="column-verticallineMiddle" style="vertical-align:middle;">
      <div style="width:60%;float:left;" >
           <input type="text" class="form-control form-mediumItem"> 
      </div>
      <div style="width:30%; float:right;">
           <span class="pull-right pull-top">Abc</span>
      </div>
</td>


here is FIDDLE

+2


source


I have a working solution:

Create div

in td

and use this CSS:

.inline-td {
    display: flex;
}

Here is a JSFiddle

+2


source


This can also be achieved with col-xs-8

and col-xs-4

.

<td class="column-verticallineMiddle">
 <div class="row">
      <div class="col-xs-8">
          <input type="text" class="form-control form-mediumItem" />
      </div>
      <div class="col-xs-4">
          <span>Abc</span>
      </div>
 </div>
</td>

Have a look at the jsfiddle

+2


source






More articles:


All Articles