Twitter Bootstrap Question posted in

Responsive table navigation bar with twitter bootstrap

Im trying to create a navigation bar for my table using twitter bootstrap.

The end result would look something like this

enter image description here

Im trying to use bootstraps grid system for this and seem to have gotten the showing rows part to look as planned but cant get the buttons to be responsive when the user switches to mobile.

HTML

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <!-- controls !-->
                        <div class="col-xs-12 col-sm-12">
                            <a href="#">Back</a>
                        </div> 
                        <div class="col-xs-12 col-sm-12">
                            <a href="#">First</a>
                        </div>       
                       <div class="col-xs-12 col-sm-12">
                            <a href="#">Previous</a>
                        </div>   
                       <div class="col-xs-12 col-sm-12">
                            <a href="#">Next</a>
                        </div>   
                        <div class="col-xs-12 col-sm-12">
                            <a href="#">Last</a>
                        </div>   
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"><!-- page number !-->
                        <div class="pull-right">
                            <span>Showing rows 1 to 10 of 20</span>
                        </div>
                    </div>
                </div>
            </div>

The buttons seem to only render on top of each other.

Here is a jsfiddle showing whats happening.

Tags:

2

Answers


  1. 0

    Each of your button is wrapped in a div with a bootstrap class “col-sm-12” and “col-xs-12” . This means that each of those div will occupy 12 columns EACH, thereby leaving no column for other buttons or divs to lie on the same row.

    To obtain the desired result, change their classes to “col-sm-2” so that each button’s div occupies two columns out of twelve.

    Login or Signup to reply.
  2. 0

    What about a button group? 

    <div class="btn-group" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Back</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">First</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Previous</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Next</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Last</button>
  </div>
  <div class="btn-group" role="group">
    <span>Showing rows 1 to 10 of 20</span>
  </div>
</div>

    EDIT added in showing rows and made more responsive on mobile devices

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search