├── .gitignore ├── index.js ├── screenshot.png ├── screenshot-v.png ├── package.json ├── bower.json ├── src ├── tabs.css └── tabs.sideways.css ├── LICENSE ├── bootstrap.vertical-tabs.min.css ├── Gruntfile.js ├── bootstrap.vertical-tabs.css ├── README.md └── demo.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // webpack support 2 | require('./bootstrap.vertical-tabs.css'); 3 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbtek/bootstrap-vertical-tabs/HEAD/screenshot.png -------------------------------------------------------------------------------- /screenshot-v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbtek/bootstrap-vertical-tabs/HEAD/screenshot-v.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-vertical-tabs", 3 | "homepage": "https://dbtek.github.io/bootstrap-vertical-tabs", 4 | "version": "1.2.2", 5 | "license": "MIT", 6 | "author": { 7 | "name": "İsmail Demirbilek" 8 | }, 9 | "repository": "https://github.com/dbtek/bootstrap-vertical-tabs.git", 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "grunt": "~0.4.2", 13 | "grunt-contrib-concat": "~0.3.0", 14 | "grunt-contrib-cssmin": "^0.9.0", 15 | "grunt-contrib-jshint": "^0.10.0", 16 | "grunt-contrib-nodeunit": "*", 17 | "grunt-contrib-uglify": "~0.2.7", 18 | "grunt-contrib-watch": "~0.5.3", 19 | "grunt-usemin": "^2.1.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-vertical-tabs", 3 | "version": "1.2.1", 4 | "homepage": "https://github.com/dbtek/bootstrap-vertical-tabs", 5 | "authors": [ 6 | "İsmail Demirbilek " 7 | ], 8 | "description": "Missing vertical tabs component for Bootstrap 3", 9 | "main": "bootstrap.vertical-tabs.css", 10 | "keywords": [ 11 | "bootstrap", 12 | "vertical", 13 | "tabs" 14 | ], 15 | "license": "MIT", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests", 22 | "Gruntfile.js", 23 | "package.json", 24 | "*.png", 25 | "demo.html", 26 | "src" 27 | ], 28 | "dependencies": { 29 | "bootstrap": ">=3.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/tabs.css: -------------------------------------------------------------------------------- 1 | .tabs-left, .tabs-right { 2 | border-bottom: none; 3 | padding-top: 2px; 4 | } 5 | .tabs-left { 6 | border-right: 1px solid #ddd; 7 | } 8 | .tabs-right { 9 | border-left: 1px solid #ddd; 10 | } 11 | .tabs-left>li, .tabs-right>li { 12 | float: none; 13 | margin-bottom: 2px; 14 | } 15 | .tabs-left>li { 16 | margin-right: -1px; 17 | } 18 | .tabs-right>li { 19 | margin-left: -1px; 20 | } 21 | .tabs-left>li.active>a, 22 | .tabs-left>li.active>a:hover, 23 | .tabs-left>li.active>a:focus { 24 | border-bottom-color: #ddd; 25 | border-right-color: transparent; 26 | } 27 | 28 | .tabs-right>li.active>a, 29 | .tabs-right>li.active>a:hover, 30 | .tabs-right>li.active>a:focus { 31 | border-bottom: 1px solid #ddd; 32 | border-left-color: transparent; 33 | } 34 | .tabs-left>li>a { 35 | border-radius: 4px 0 0 4px; 36 | margin-right: 0; 37 | display:block; 38 | } 39 | .tabs-right>li>a { 40 | border-radius: 0 4px 4px 0; 41 | margin-right: 0; 42 | } -------------------------------------------------------------------------------- /src/tabs.sideways.css: -------------------------------------------------------------------------------- 1 | .sideways { 2 | margin-top:50px; 3 | border: none; 4 | position: relative; 5 | } 6 | .sideways>li { 7 | height: 20px; 8 | width: 120px; 9 | margin-bottom: 100px; 10 | } 11 | .sideways>li>a { 12 | border-bottom: 1px solid #ddd; 13 | border-right-color: transparent; 14 | text-align: center; 15 | border-radius: 4px 4px 0px 0px; 16 | } 17 | .sideways>li.active>a, 18 | .sideways>li.active>a:hover, 19 | .sideways>li.active>a:focus { 20 | border-bottom-color: transparent; 21 | border-right-color: #ddd; 22 | border-left-color: #ddd; 23 | } 24 | .sideways.tabs-left { 25 | left: -50px; 26 | } 27 | .sideways.tabs-right { 28 | right: -50px; 29 | } 30 | .sideways.tabs-right>li { 31 | -webkit-transform: rotate(90deg); 32 | -moz-transform: rotate(90deg); 33 | -ms-transform: rotate(90deg); 34 | -o-transform: rotate(90deg); 35 | transform: rotate(90deg); 36 | } 37 | .sideways.tabs-left>li { 38 | -webkit-transform: rotate(-90deg); 39 | -moz-transform: rotate(-90deg); 40 | -ms-transform: rotate(-90deg); 41 | -o-transform: rotate(-90deg); 42 | transform: rotate(-90deg); 43 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 İsmail Demirbilek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /bootstrap.vertical-tabs.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * bootstrap-vertical-tabs - v1.2.2 3 | * https://dbtek.github.io/bootstrap-vertical-tabs 4 | * 2016-12-02 5 | * Copyright (c) 2016 İsmail Demirbilek 6 | * License: MIT 7 | */ 8 | 9 | .tabs-left,.tabs-right{border-bottom:none;padding-top:2px}.tabs-left{border-right:1px solid #ddd}.tabs-right{border-left:1px solid #ddd}.tabs-left>li,.tabs-right>li{float:none;margin-bottom:2px}.tabs-left>li{margin-right:-1px}.tabs-right>li{margin-left:-1px}.tabs-left>li.active>a,.tabs-left>li.active>a:focus,.tabs-left>li.active>a:hover{border-bottom-color:#ddd;border-right-color:transparent}.tabs-right>li.active>a,.tabs-right>li.active>a:focus,.tabs-right>li.active>a:hover{border-bottom:1px solid #ddd;border-left-color:transparent}.tabs-left>li>a{border-radius:4px 0 0 4px;margin-right:0;display:block}.tabs-right>li>a{border-radius:0 4px 4px 0;margin-right:0}.sideways{margin-top:50px;border:none;position:relative}.sideways>li{height:20px;width:120px;margin-bottom:100px}.sideways>li>a{border-bottom:1px solid #ddd;border-right-color:transparent;text-align:center;border-radius:4px 4px 0 0}.sideways>li.active>a,.sideways>li.active>a:focus,.sideways>li.active>a:hover{border-bottom-color:transparent;border-right-color:#ddd;border-left-color:#ddd}.sideways.tabs-left{left:-50px}.sideways.tabs-right{right:-50px}.sideways.tabs-right>li{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.sideways.tabs-left>li{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)} -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 'use strict'; 3 | 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | banner: '/*!\n' + 7 | ' * <%= pkg.name %> - v<%= pkg.version %>\n' + 8 | ' * <%= pkg.homepage %>\n' + 9 | ' * <%= grunt.template.today("yyyy-mm-dd") %>\n' + 10 | ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>\n' + 11 | ' * License: <%= pkg.license %>\n' + 12 | ' */\n', 13 | concat: { 14 | options: { 15 | banner: '<%= banner %>', 16 | stripBanners: true 17 | }, 18 | dist: { 19 | src: ['src/{,*/}*.css'], 20 | dest: 'bootstrap.vertical-tabs.css' 21 | } 22 | }, 23 | cssmin: { 24 | options: { 25 | banner: '<%= banner %>' 26 | }, 27 | dist: { 28 | src: ['src/*.css'], 29 | dest: 'bootstrap.vertical-tabs.min.css' 30 | } 31 | }, 32 | jshint: { 33 | options: { 34 | node: true, 35 | curly: true, 36 | eqeqeq: true, 37 | immed: true, 38 | latedef: true, 39 | newcap: true, 40 | noarg: true, 41 | sub: true, 42 | undef: true, 43 | unused: true, 44 | eqnull: true, 45 | boss: true 46 | }, 47 | gruntfile: { 48 | src: 'Gruntfile.js' 49 | } 50 | }, 51 | watch: { 52 | gruntfile: { 53 | files: '<%= jshint.gruntfile.src %>', 54 | tasks: ['jshint:gruntfile'] 55 | } 56 | } 57 | }); 58 | 59 | // These plugins provide necessary tasks 60 | grunt.loadNpmTasks('grunt-contrib-concat'); 61 | grunt.loadNpmTasks('grunt-contrib-jshint'); 62 | grunt.loadNpmTasks('grunt-contrib-watch'); 63 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 64 | 65 | // Default task 66 | grunt.registerTask('build', [ 67 | 'jshint', 68 | 'concat', 69 | 'cssmin' 70 | ]); 71 | 72 | grunt.registerTask('default', ['build']); 73 | }; 74 | 75 | -------------------------------------------------------------------------------- /bootstrap.vertical-tabs.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * bootstrap-vertical-tabs - v1.2.2 3 | * https://dbtek.github.io/bootstrap-vertical-tabs 4 | * 2016-12-02 5 | * Copyright (c) 2016 İsmail Demirbilek 6 | * License: MIT 7 | */ 8 | .tabs-left, .tabs-right { 9 | border-bottom: none; 10 | padding-top: 2px; 11 | } 12 | .tabs-left { 13 | border-right: 1px solid #ddd; 14 | } 15 | .tabs-right { 16 | border-left: 1px solid #ddd; 17 | } 18 | .tabs-left>li, .tabs-right>li { 19 | float: none; 20 | margin-bottom: 2px; 21 | } 22 | .tabs-left>li { 23 | margin-right: -1px; 24 | } 25 | .tabs-right>li { 26 | margin-left: -1px; 27 | } 28 | .tabs-left>li.active>a, 29 | .tabs-left>li.active>a:hover, 30 | .tabs-left>li.active>a:focus { 31 | border-bottom-color: #ddd; 32 | border-right-color: transparent; 33 | } 34 | 35 | .tabs-right>li.active>a, 36 | .tabs-right>li.active>a:hover, 37 | .tabs-right>li.active>a:focus { 38 | border-bottom: 1px solid #ddd; 39 | border-left-color: transparent; 40 | } 41 | .tabs-left>li>a { 42 | border-radius: 4px 0 0 4px; 43 | margin-right: 0; 44 | display:block; 45 | } 46 | .tabs-right>li>a { 47 | border-radius: 0 4px 4px 0; 48 | margin-right: 0; 49 | } 50 | .sideways { 51 | margin-top:50px; 52 | border: none; 53 | position: relative; 54 | } 55 | .sideways>li { 56 | height: 20px; 57 | width: 120px; 58 | margin-bottom: 100px; 59 | } 60 | .sideways>li>a { 61 | border-bottom: 1px solid #ddd; 62 | border-right-color: transparent; 63 | text-align: center; 64 | border-radius: 4px 4px 0px 0px; 65 | } 66 | .sideways>li.active>a, 67 | .sideways>li.active>a:hover, 68 | .sideways>li.active>a:focus { 69 | border-bottom-color: transparent; 70 | border-right-color: #ddd; 71 | border-left-color: #ddd; 72 | } 73 | .sideways.tabs-left { 74 | left: -50px; 75 | } 76 | .sideways.tabs-right { 77 | right: -50px; 78 | } 79 | .sideways.tabs-right>li { 80 | -webkit-transform: rotate(90deg); 81 | -moz-transform: rotate(90deg); 82 | -ms-transform: rotate(90deg); 83 | -o-transform: rotate(90deg); 84 | transform: rotate(90deg); 85 | } 86 | .sideways.tabs-left>li { 87 | -webkit-transform: rotate(-90deg); 88 | -moz-transform: rotate(-90deg); 89 | -ms-transform: rotate(-90deg); 90 | -o-transform: rotate(-90deg); 91 | transform: rotate(-90deg); 92 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap Vertical Tabs ![bower version](http://img.shields.io/bower/v/bootstrap-vertical-tabs.svg) 2 | ======================= 3 | 4 | Vertical tabs component for Bootstrap 3. 5 | 6 | ![screenshot](screenshot.png) 7 | 8 | ### Install 9 | * Via npm: 10 | ```bash 11 | $ npm i -S bootstrap-vertical-tabs 12 | ``` 13 | * Via bower (recommended): 14 | ```bash 15 | $ bower install bootstrap-vertical-tabs 16 | ``` 17 | * Or you can just clone, [download](https://github.com/dbtek/bootstrap-vertical-tabs/releases) from GitHub. 18 | 19 | ### Usage 20 | 21 | * [Get](https://github.com/dbtek/bootstrap-vertical-tabs#install) the package. 22 | * Include css in your html. / Load with webpack or css processors. 23 | * Use it. 24 | 25 | #### Left Tabs 26 | ```html 27 |
28 | 29 | 35 |
36 | 37 |
38 | 39 |
40 |
Home Tab.
41 |
Profile Tab.
42 |
Messages Tab.
43 |
Settings Tab.
44 |
45 |
46 | ``` 47 | 48 | #### Right Tabs 49 | ```html 50 |
51 | 52 |
53 |
Home Tab.
54 |
Profile Tab.
55 |
Messages Tab.
56 |
Settings Tab.
57 |
58 |
59 | 60 |
61 | 62 | 68 |
69 | ``` 70 | #### Sideways Tabs :new: 71 | 72 | Add `sideways` class to tabs. 73 | 74 | Example: 75 | ``` 76 |