Features JavaScript
Little Neko JAVASCRIPT
Styling and add-ons to Bootstrap default jQuery components, plus a bunch of exclusive Neko stuff.
Tabs
Standard tabs with fade effects
Fade effect
To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content.
content tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
Icon Tabs
content tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
Tabs with menu on left
content tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
Tabs with menu on right
content tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
content tab dropdown 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tellus id nisi placerat fermentum sed non neque. Aliquam eget venenatis ante. Sed tempus, libero ac molestie faucibus, ante diam fermentum mi, at gravida augue justo venenatis augue. Pellentesque lacinia augue lobortis pharetra ultricies.
Minimal tabs
content tab 1
content tab 2
content tab 3
Form
Minimal form
Boostrap carousel
Examples
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
To get a complete explanation on how bootstrap carousel system works ckeck the bootstrap documentation here
Owl carousel
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
To get a complete explanation on how Owl Carousel system works ckeck the Owl carousel documentation here
Sliding Gallery
Sliding Gallery with margin
Add .owl-margins class to add a margin-right on elements.
One slide
One slide with HTML content
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Nunc purus nibh, aliquam sit amet commodo vitae, laoreet vitae enim. Fusce ac egestas sapien. Etiam cursus, sapien in placerat congue, odio elit viverra arcu, a tincidunt diam libero quis risus. Fusce a pellentesque lectus.
Lorem ipsum dolor sit amet
Sed non vestibulum purus. Mauris posuere turpis in accumsan facilisis. Aliquam lorem ante, suscipit in erat a, dignissim vehicula enim. Etiam aliquam non justo nec consectetur. Morbi fermentum, libero non sodales fringilla, mi lacus vulputate mauris, ac fringilla ligula nisi non enim. Duis laoreet dui ut purus pharetra tristique. Donec augue metus, cursus quis lorem ut, malesuada pellentesque ligula.
One slide with captions
Title inside a caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula orci ipsum, nec condimentum justo pharetra vel. Donec a egestas velit, vel tempus mauris.
Read More
Title inside a box
Caption can easily be placed with css classes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Read More
Swiper
Swiper is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. To get a complete explanation on how Swiper works ckeck the documentation here
Parallax
Section parallax
It’s the little details that are vital.
Little things make big things happen.
Page header parallax
Title Subtext for header
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Alerts
Add dismiss functionality to all alert messages with this plugin.
When using a .close button, it must be the first child of the .alert-dismissible and no text content may come before it in the markup.Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM. To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.
Modals
Live demo
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
To get a complete explanation on how bootstrap modal system works ckeck the bootstrap documentation here
Optional sizes
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.