Olin comes with the full arsenal of Bootstrap 3 components plus some more fancy jQuery plugins, so your website will WOW your visitors and convert them into long-term customers.

If you are already familiar with Twitter Bootstrap you will hit the ground running. But even if you never heard of Bootstrap before you can make this awesome toolkit your own within minutes. Head over to the Bootstrap - Getting Started guide to learn more about Bootstrap.

Buttons

Buttons are pure CSS3 with gradients and fallbacks. In six styles (+ disabled state), four sizes, groupable and much more.

Buttons Sizes

Button Group

Labels

Default Primary Success Info Warning Danger

Badges

Highlight new or unread items by adding a <span class="badge"></span> to all kinds of elements.

Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, voluptates, cum, atque, minima soluta architecto quisquam assumenda saepe ea ad maiores nulla sapiente impedit aspernatur provident nesciunt asperiores. Quis, fugit nisi soluta facilis rerum fugiat pariatur consectetur beatae ipsa. Ex optio cum eligendi rerum adipisci. Aperiam explicabo fugiat vero saepe?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, autem, tenetur, earum suscipit repellendus est iusto reprehenderit iure rem eveniet totam culpa ipsa libero odio ratione similique quasi laudantium officia. Expedita, provident ex quod vitae eos asperiores facilis modi. Neque, accusamus, asperiores odit distinctio maxime fugiat vitae! Sunt, sint, cum rerum exercitationem itaque officiis dolorum odio amet ratione suscipit nemo doloremque officia provident iure repudiandae nam veniam voluptates temporibus vitae fugit nostrum dicta omnis eaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, laborum, eius, quasi, labore asperiores sint vitae accusamus dicta ad quidem alias officia iusto magnam dolorum neque aut repudiandae officiis error quos possimus deserunt in expedita adipisci perspiciatis incidunt quia eos animi sit debitis distinctio. Sunt et quod unde obcaecati doloribus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, id nulla quo consequuntur unde dolores facilis inventore vel natus aut provident deserunt in enim at voluptatum architecto quos dolor corrupti earum error officia repudiandae alias quis! Accusamus, hic maiores eius.

Accordion

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Collapsible Group Item #2

Collapsible Group Item #3

Images

Custom Content

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, officiis, omnis rerum qui tempora cum suscipit eum quidem dolorum laboriosam nisi repellendus nobis maxime voluptas.

Button

Well

The Perfect Highlighter

Well with inset box shadow and light gray background.

Add a little note..

Well with background gradient

For a background gradient add .gradient to your well. Same with Jumbotron or any other element.

Jumbotron

Big News

Got something big to announce?

Learn more

Pagination

Pager

Alerts with close button

Success! Hi, I'm a dismissable alert for success messages.

Info! Hi, I'm a dismissable alert for info messages.

Warning! Hi, I'm a dismissable alert for warning messages.

Danger! Hi, I'm a dismissable alert for danger messages.

Progress Bars

Add the data-toggle="tooltip" and title=".." attribute to the element you want the tooltip to apply to. The title attribute contain your tooltip's text.

Example: http://getbootstrap.com/javascript/#tooltips

Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

"On Hover" Example - class="popover":
http://getbootstrap.com/javascript/#popovers

"On Click"" Example - class="popover":
Click to toggle the popover

Forms

Create beautiful forms without any extra markup. Either with labels & form controls, like the example below, or even more minimal by adding a placeholder text to your inputs, instead of labels.

Hint: Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

Affix

The sidebar on the left is a live demo of the Affix plugin.

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Example: Show "Contact Us" Modal

Iconbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, provident.

Carousel

Retina-Ready Bootstrap 3 slideshow with pure CSS3 controls.

Learn more: http://getbootstrap.com/javascript/#carousel

Ultra Responsive HTML5 Template

Bootstrap 3 Framework
Great CSS3 Animations
Smooth Font Scaling
361 Vector Icons

Put your Business in the Spotlight.

Skills, Profiles, Testimonials.

Multislider

Show between two and eight browseable slides at once utilizing the great BxSlider from Steven Wanderski. Perfect to showcase some of the clients you worked with.

Highly customized, fast, light and responsive Magnific Popup lightbox plugin by Dmitry Semenov. Displays all kind of content such as single images, galleries, videos, Google Maps, Ajax content and forms.

Gallery