Bootstrap 3 display links and text inline within TD

I have an odd issue, I cannot get the last row that contains 2 links and text to appear inline, instead it wraps.

<div class="row">
    <div class="col-md-12">
      <h3>Results</h3>
      <form action="/Search" class="form-inline" method="post">
        <table class="table table-striped" border="1">
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>

            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td colspan="5">
                    <a href="#" data-pageindex="3" class="pager">[Previous]</a> 
Page 5 of 30 
<a href="#" data-pageindex="5" class="pager">[Next]</a>
                </td>
            </tr>
        </table>
       </form>
    </div>
</div>

I've tried the text-nowrap class, and tried a number of CSS inline statements without any luck.

How do I get the last cell to have the text appear on the same line such as:

[Previous] Page 5 of 30 [Next]

instead of:

Answers


Wrap the section in a form tag with the form-inline class, then wrap the previous and next anchor links in divs with the form-group class.

BOOTPLY

HTML:

<div class="row">
    <div class="col-md-12">
        <table class="table table-striped" border="1">
            <tbody><tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>

            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td colspan="5">
                  <form class="form-inline">
                    <div class="form-group">
                    <a href="#" data-pageindex="3" class="pager">[Previous]</a>
                    </div>
                    Page 5 of 30
                    <div class="form-group">
                    <a href="#" data-pageindex="5" class="pager">[Next]</a>
                    </div>
                  </form>
                </td>
            </tr>
        </tbody></table>
    </div>
</div>

However, you could also remove the pager class from your anchor tags to get it to work normally.

Should you want actual Bootstrap styled pagers, you need to use them with an unordered list, like so:

BOOTPLY

HTML:

<div class="row">
    <div class="col-md-12">
        <table class="table table-striped" border="1">
            <tbody><tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>

            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td colspan="5">
                  <nav>
                    <ul class="pager pull-left">
                      <li><a href="#">Previous</a></li>
                      Page X of Y
                      <li><a href="#">Next</a></li>
                    </ul>
                  </nav>
                </td>
            </tr>
        </tbody></table>
    </div>
</div>

Only slight downside is it makes the row they're in a bit wider.


Need Your Help

Getting image data continuously from camera, SurfaceView or SurfaceHolder

java android camera surfaceview surfaceholder

So I have this camera preview set up with Camera, SurfaceView and SurfaceHolder.

Application suddenly became incompatible with device(Galaxy Tab 2)

android galaxy incompatibility

I have an application that suddenly (today) became incompatible with a device it was working on just fine. The app is Dragon Lords and the device is Samsung Galaxy Tab 2. Anyone have an idea what c...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.