Freebie: 6 Excellent Paginations and Tabs

Freebie: 6 Excellent Paginations and Tabs

In this installment of our freebie series, we’ve prepared for you a collection of 6 templates for pagination menus and tab controls. We’ve built them without relying on any frameworks, so adding your own content or customization is as easy as editing a bit of HTML and CSS.

Pagination

For paginations we’ve come up with two designs –  one standard with page numbers and next/prev buttons, and the other with next/prev buttons and a dropdown. Both of them are simple and clean, so they should look great in almost any layout.

Basic Pagination Template

Basic Pagination Template

Tabs

Here we give you the option to choose between four different designs. We know that creating working tabs from scratch can be a bit tedious, so we’ve also included a short jQuery snippet in them to enable switching between the tab pages.

Underlined Tabs Template

Underlined Tabs Template

How to use

To use any of the templates from the demo, follow these steps:

  1. Grab the zip archive from the Download button near the top of the page and extract it.
  2. Open the .html file for the template you want, copy the code inside the <body> and paste it in your project.
  3. The styles are located in separate CSS files for each design. You can find them in the /assets/css folder. We’ve made sure our CSS is self contained and won’t break anything in your own styles.
  4. Replace our placeholder content with your own and add more buttons/tabs if you need to.

Free for Commercial Use

All of the templates are completely free and can be used in both personal and commercial projects. Don’t worry, you don’t have to include any form of attribution either! Enjoy :)

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

2 Comments

  1. Roy Coleman says:

    Nice! Thanks Danny..

  2. RCDC says:

    Good one. Thank you.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links