Features Components
Little Neko Components
Styling and add-ons to Bootstrap default components, plus a couple of exclusive Neko stuff.
Boxes
Standard boxes
Add .box
to quickly create a box content.
Rounded corners boxes
Add .rounded
to quickly create a rounded corner box content.
Padding variants
Add .padding-large
, .padding-medium
or .padding-small
to change box paddings
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ullamcorper purus in auctor. Nunc pulvinar, orci lobortis varius eleifend, tortor arcu auctor lacus, ac dapibus turpis nunc nec nunc. Fusce ultrices diam commodo rhoncus luctus. Proin ut ipsum lorem. Morbi non enim neque. Nunc id tortor id felis tincidunt rutrum non ac eros. Phasellus tincidunt sodales neque vel accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ullamcorper purus in auctor. Nunc pulvinar, orci lobortis varius eleifend, tortor arcu auctor lacus, ac dapibus turpis nunc nec nunc. Fusce ultrices diam commodo rhoncus luctus. Proin ut ipsum lorem. Morbi non enim neque. Nunc id tortor id felis tincidunt rutrum non ac eros. Phasellus tincidunt sodales neque vel accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ullamcorper purus in auctor. Nunc pulvinar, orci lobortis varius eleifend, tortor arcu auctor lacus, ac dapibus turpis nunc nec nunc. Fusce ultrices diam commodo rhoncus luctus. Proin ut ipsum lorem. Morbi non enim neque. Nunc id tortor id felis tincidunt rutrum non ac eros. Phasellus tincidunt sodales neque vel accumsan.
Boxes colors
Add .main-color
, .dark-main-color
, .light-main-color
, .dark-color
or .light-color
to get colored boxes.
Boxes content
Boxes can be filled with any content.
h2. This is a title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ullamcorper purus in auctor. Nunc pulvinar, orci lobortis varius eleifend, tortor arcu auctor lacus, ac dapibus turpis nunc nec nunc. Fusce ultrices diam commodo rhoncus luctus. Proin ut ipsum lorem. Morbi non enim neque. Nunc id tortor id felis tincidunt rutrum non ac eros. Phasellus tincidunt sodales neque vel accumsan.
A buttonYou can put columns inside a box.
h2. This is a title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ullamcorper purus in auctor. Nunc pulvinar, orci lobortis varius eleifend, tortor arcu auctor lacus, ac dapibus turpis nunc nec nunc. Fusce ultrices diam commodo rhoncus luctus.
A buttonImage components
Image with caption
Boxed image with caption
Image with boxed caption
Image with caption over
Icon box
Standard icon box
Add .box-icon
to a div around icon and text to create box icons.
All sort of icon options can be applied (large
, medium
, small
, icon-animated
, circle
, squared
, color classes, etc...)
Icon boxes can have a background color.
Link icon box
Icon box can also be linked.
Linked box with a background color
Link icon box with image
Icon can be replace with an image
Feature box
Icon feature box
Lorem ipsum dolor sit amet
Elegant layouts that help you organize your content
Lorem ipsum dolor sit amet
Elegant layouts that help you organize your content
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. In laoreet, ligula sed sagittis varius, purus nunc lacinia nibh, ac eleifend lorem elit quis sapien. Cras quam nunc, convallis auctor libero at, blandit dapibus est. Curabitur suscipit nec metus at varius. Curabitur purus magna, condimentum quis enim id, rhoncus posuere erat.
Animated icon on rollover
Elegant layouts that help you organize your content
Lorem ipsum dolor sit amet
Elegant layouts that help you organize your content
Lorem ipsum dolor sit amet
Elegant layouts that help you organize your content
Image feature box
Icon can be replaced with an image. Add .avatar
class and .small
, .medium
, .large
or .x-large
for sizing of the image.
Lorem ipsum dolor sit amet
Elegant layouts that help you organize your content
Lorem ipsum dolor sit amet
Elegant layouts that help you organize your content
Lorem ipsum dolor sit amet
Elegant layouts that help you organize your content
Team box
Standard
Call to action
2 columns
Call to action
Lorem ipsum dolor sit amet
Call to action
Lorem ipsum dolor sit amet
Call to action
Lorem ipsum dolor sit amet
Call to action
Lorem ipsum dolor sit amet
Call to action
Lorem ipsum dolor sit amet
Call to action
Lorem ipsum dolor sit amet
Fullwidth
Remove the borders and margins for display inside a fullwidth section by removing the .box
classes.
Call to action
Lorem ipsum dolor sit amet.
Centered
1 column with centered elements
Call to action
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.
Testimonial
You see a dog growls when it's angry, and wags its tail when it's pleased. Now I growl when I'm pleased, and wag my tail when I'm angry. Therefore I'm mad.
Pop singer
You see a dog growls when it's angry, and wags its tail when it's pleased. Now I growl when I'm pleased, and wag my tail when I'm angry. Therefore I'm mad.
Pop singer
You see a dog growls when it's angry, and wags its tail when it's pleased. Now I growl when I'm pleased, and wag my tail when I'm angry. Therefore I'm mad.
Pop singer
You see a dog growls when it's angry, and wags its tail when it's pleased. Now I growl when I'm pleased, and wag my tail when I'm angry. Therefore I'm mad.
Pop singer
You see a dog growls when it's angry, and wags its tail when it's pleased. Now I growl when I'm pleased, and wag my tail when I'm angry. Therefore I'm mad.
Pop singer
Header
You can change the look and feel of your menu by adding one of the .nav-style-X
class to the body.
You can see the different options available in the "Features" section of the demo.
Colors
You can change the background of your menu by adding .header-dark
or class to the body.
Opacity
You can change the background opacity of your menu by adding .header-semi-transparent
class to the body or set the menu background opacity to 0 with .header-transparent
.
Pre header
Add class .pre-header-on
to display the pre-header above the menu..pre-header-on-sm
class will hide it on mobile devices.
Pre-header can be styled with .main-color
, .dark-main-color
, .light-main-color
, .light-color
and .dark-color
classes.
Pricing tables
Standard pricing tables
Image pricing tables
Image pricing tables
Spacers
Page header
Standard
A simple shell for an h1
to appropriately space out and segment sections of content on a page. It can utilize the h1
's default small
element, as well as most other components (with additional styles).
Title Subtext for header
Color variants
Title Subtext for header
Title Subtext for header
Title Subtext for header
Title Subtext for header
Title Subtext for header
Background image
Add .image-background
to display an image background on the header. Add .image-X
to select one of the defined image background.
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.
Background image with a mask
Add .no-padding
to remove the padding on the header. Add a div with a .mask
class around the content, finally adjust the mask opacity with opacity-X
class.
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.
Large
Add .large
to the header to set its size in height. Add .v-align-center
to the .container
to center the content verticaly.
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.
Extra large
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.
Color and opacity
Add .mask-main-color
to the mask to change color. Add .opacity-X
to change its opacity.
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.
Breadcrumbs
Indicate the current page's location within a navigational hierarchy.
Separators are automatically added in CSS through :before
and content
.
Pagination
Default pagination
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
Disabled and active states
Links are customizable for different circumstances. Use .disabled
for unclickable links and .active
to indicate the current page.
Pagination styles
Add .circle
or .rounded
for different navigation styles.
Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
Default example
By default, the pager centers links.
Default example
Alternatively, you can align each link to the sides:
Optional disabled state
Pager links also use the general .disabled
utility class from the pagination.
Progress bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Basic example
Default progress bar.
With label
Remove the .sr-only
class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width
to ensure the label's text is fully visible.
Animated
Add .active
to .striped
to animate the stripes right to left. Not available in IE9 and below.
Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.
Stacked
Place multiple bars into the same .progress
to stack them.
Panels
Panels are some kind of special boxes, from default bootstrap
Basic example
By default, all the .panel
does is apply some basic border and padding to contain some content.
Responsive embed
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to <iframe>
, <embed>
, and <object>
elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don't need to include frameborder="0" in your <iframe>
s as we override that for you.