bootflat
Version:
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
1,094 lines (1,093 loc) • 120 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documentation - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="The complete style of the Bootflat Framework.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> -->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body style="background-color: #f1f2f6;">
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link current" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Documentation</h3>
<h4>The complete style of the Bootflat Framework</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container">
Bootflat offers over a dozen reusable components, which can be combined with each other.
</div>
</div>
</div>
</div>
<!--documents-->
<div class="container documents">
<!-- Color Swatches
================================================== -->
<div class="example">
<h2 class="example-title">Color Swatches <span>(<b>More Colors See</b>: <a href="color-picker.html">Flat UI Color Picker</a>)</span></h2>
<div class="row">
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#5D9CEC"></div>
<div class="pull-right dark" style="background-color:#4A89DC"></div>
</div>
<div class="infos">
<h4>BLUE JEANS</h4>
<p>#5D9CEC, #4A89DC</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#4FC1E9"></div>
<div class="pull-right dark" style="background-color:#3BAFDA"></div>
</div>
<div class="infos">
<h4>AQUA</h4>
<p>#4FC1E9, #3BAFDA</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#48CFAD"></div>
<div class="pull-right dark" style="background-color:#37BC9B"></div>
</div>
<div class="infos">
<h4>MINT</h4>
<p>#48CFAD, #37BC9B</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#A0D468"></div>
<div class="pull-right dark" style="background-color:#8CC152"></div>
</div>
<div class="infos">
<h4>GRASS</h4>
<p>#A0D468, #8CC152</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#FFCE54"></div>
<div class="pull-right dark" style="background-color:#F6BB42"></div>
</div>
<div class="infos">
<h4>SUNFLOWER</h4>
<p>#FFCE54, #F6BB42</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#FC6E51"></div>
<div class="pull-right dark" style="background-color:#E9573F"></div>
</div>
<div class="infos">
<h4>BITTERSWEET</h4>
<p>#FC6E51, #E9573F</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#ED5565"></div>
<div class="pull-right dark" style="background-color:#DA4453"></div>
</div>
<div class="infos">
<h4>GRAPEFRUIT</h4>
<p>#ED5565, #DA4453</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#AC92EC"></div>
<div class="pull-right dark" style="background-color:#967ADC"></div>
</div>
<div class="infos">
<h4>LAVENDER</h4>
<p>#AC92EC, #967ADC</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#EC87C0"></div>
<div class="pull-right dark" style="background-color:#D770AD"></div>
</div>
<div class="infos">
<h4>PINK ROSE</h4>
<p>#EC87C0, #D770AD</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#F5F7FA"></div>
<div class="pull-right dark" style="background-color:#E6E9ED"></div>
</div>
<div class="infos">
<h4>LIGHT GRAY</h4>
<p>#F5F7FA, #E6E9ED</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#CCD1D9"></div>
<div class="pull-right dark" style="background-color:#AAB2BD"></div>
</div>
<div class="infos">
<h4>MEDIUM GRAY</h4>
<p>#CCD1D9, #AAB2BD</p>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="color-swatches">
<div class="swatches">
<div class="clearfix">
<div class="pull-left light" style="background-color:#656D78"></div>
<div class="pull-right dark" style="background-color:#434A54"></div>
</div>
<div class="infos">
<h4>DARK GRAY</h4>
<p>#656D78, #434A54</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Buttons
================================================== -->
<div class="example">
<h2 class="example-title">Buttons</h2>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-block">Normal</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-default btn-block">Default</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block">Primary</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-success btn-block">Success</button>
</div>
</div>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-info btn-block">Info</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-warning btn-block">Warning</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger btn-block">Danger</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-link btn-block">Link</button>
</div>
</div>
</div>
<!-- Button Groups
================================================== -->
<div class="example">
<h2 class="example-title">Button Groups</h2>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
</div>
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
</div>
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
</div>
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
</div>
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-2">
<div class="btn-group-vertical">
<button type="button" class="btn btn"><i class="glyphicon glyphicon-home"></i></button>
<button type="button" class="btn btn"><i class="glyphicon glyphicon-user"></i></button>
<button type="button" class="btn btn"><i class="glyphicon glyphicon-comment"></i></button>
<button type="button" class="btn btn"><i class="glyphicon glyphicon-cog"></i></button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-user"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-comment"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-cog"></i></button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-home"></i></button>
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-user"></i></button>
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-comment"></i></button>
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-cog"></i></button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-home"></i></button>
<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-user"></i></button>
<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-comment"></i></button>
<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-cog"></i></button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-home"></i></button>
<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-user"></i></button>
<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-comment"></i></button>
<button type="button" class="btn btn-info"><i class="glyphicon glyphicon-cog"></i></button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-home"></i></button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i></button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-comment"></i></button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-cog"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button Dropdowns
================================================== -->
<div class="example">
<h2 class="example-title">Button Dropdowns</h2>
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Normal <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<button type="button" class="btn">Normal</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Labels, Badges, Dropdowns, Tooltip and Popover
================================================== -->
<div class="example">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<!-- Labels
================================================== -->
<h2 class="example-title">Labels</h2>
<span class="label">Normal</span>
<div class="blank"></div>
<span class="label label-default">Default</span>
<div class="blank"></div>
<span class="label label-primary">Primary</span>
<div class="blank"></div>
<span class="label label-success">Success</span>
<div class="blank"></div>
<span class="label label-info">Info</span>
<div class="blank"></div>
<span class="label label-warning">Warning</span>
<div class="blank"></div>
<span class="label label-danger">Danger</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Badges
================================================== -->
<h2 class="example-title">Badges</h2>
<span class="badge">Normal</span>
<div class="blank"></div>
<span class="badge badge-default">Default</span>
<div class="blank"></div>
<span class="badge badge-primary">Primary</span>
<div class="blank"></div>
<span class="badge badge-success">Success</span>
<div class="blank"></div>
<span class="badge badge-info">Info</span>
<div class="blank"></div>
<span class="badge badge-warning">Warning</span>
<div class="blank"></div>
<span class="badge badge-danger">Danger</span>
</div>
</div>
<div class="row">
<div class="col-md-6 example-dropdown">
<!-- Dropdowns
================================================== -->
<h2 class="example-title">Dropdowns</h2>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Setting</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li class="dropdown-submenu">
<a href="#">Something else here</a>
<ul class="dropdown-menu">
<li><a href="#">Action1</a></li>
<li><a href="#">Action2</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="col-md-6">
<!-- Tooltips
================================================== -->
<h2 class="example-title">Tooltips</h2>
<div class="row tooltip-demo">
<div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button></div>
<div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button></div>
<div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button></div>
<div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<!-- Popovers
================================================== -->
<h2 class="example-title">Popovers</h2>
<div class="row example-popover">
<div class="col-md-6">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="popover right">
<div class="arrow"></div>
<h3 class="popover-title">Popover right</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="popover left">
<div class="arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Forms
================================================== -->
<div class="example">
<div class="row">
<div class="col-md-12">
<h2 class="example-title">Forms</h2>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Text input">
</div>
<div class="col-md-6">
<input type="text" class="form-control" disabled placeholder="Text input">
</div>
</div>
<div class="row">
<div class="col-md-6">
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-danger" tabindex="-1">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-primary" tabindex="-1">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-search search-only">
<i class="search-icon glyphicon glyphicon-search"></i>
<input type="text" class="form-control search-query">
</div>
</div>
<div class="col-md-6">
<div class="input-group form-search">
<input type="text" class="form-control search-query">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary" data-type="last">Search</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stepper
================================================== -->
<div class="example">
<h2 class="example-title">Stepper <span>(<b>How to use</b>: https://github.com/benplum/Stepper)</span></h2>
<div class="row">
<div class="col-md-6">
<input type="number" class="form-control" />
</div>
<div class="col-md-6">
<input type="number" class="form-control" disabled/>
</div>
</div>
</div>
<!-- Selecter
================================================== -->
<div class="example">
<h2 class="example-title">Selecter <span>(<b>How to use</b>: https://github.com/benplum/Selecter)</span></h2>
<div class="row">
<div class="col-md-3">
<select name="selecter_basic" class="selecter_1">
<optgroup label="Group One">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Group One">
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
</optgroup>
<optgroup label="Group Three">
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</optgroup>
</select>
</div>
<div class="col-md-3">
<select name="selecter_basic" class="selecter_2" data-selecter-options='{"label":"Jump Sites","external":"true"}'>
<option value="http://google.com">Google Search</option>
<option value="http://boingboing.com">BoingBoing</option>
<option value="http://cnn.com">CNN News</option>
</select>
</div>
<div class="col-md-3">
<select name="selecter_basic" class="selecter_3" data-selecter-options='{"cover":"true"}'>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<div class="col-md-3">
<select name="selecter_basic" class="selecter_4" disabled="disabled">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<select name="selecter_multiple" class="selecter_5" multiple="multiple">
<option value="1" >One</option>
<option value="2" disabled>Two</option>
<option value="3" selected>Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<div class="col-md-6">
<select name="selecter_multiple" class="selecter_6" multiple="multiple" disabled="disabled">
<option value="1" >One</option>
<option value="2" disabled>Two</option>
<option value="3" selected>Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
</div>
</div>
<!-- Checkboxes and Radios
================================================== -->
<div class="example">
<h2 class="example-title">Checkboxes and Radios <span>(<b>How to use</b>: https://github.com/fronteed/iCheck/)</span></h2>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="flat-checkbox-1">
<label for="flat-checkbox-1">default</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="flat-checkbox-2" checked>
<label for="flat-checkbox-2">checked</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="flat-checkbox-3" disabled>
<label for="flat-checkbox-3">disabled</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="flat-checkbox-4" checked disabled>
<label for="flat-checkbox-4">checked & disabled</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="radio">
<input type="radio" id="flat-radio-1">
<label for="flat-radio-1">default</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<input type="radio" id="flat-radio-2" checked>
<label for="flat-radio-2">checked</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<input type="radio" id="flat-radio-3" disabled>
<label for="flat-radio-3">disabled</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<input type="radio" id="flat-radio-4" checked disabled>
<label for="flat-radio-4">checked & disabled</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Toggle
================================================== -->
<div class="example">
<h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)</span></h2>
<div class="row">
<div class="col-md-4">
<label class="toggle">
<input type="checkbox" >
<span class="handle"></span>
</label>
</div>
<div class="col-md-4">
<label class="toggle">
<input type="checkbox" checked>
<span class="handle"></span>
</label>
</div>
<div class="col-md-4">
<label class="toggle">
<input type="checkbox" disabled>
<span class="handle"></span>
</label>
</div>
</div>
</div>
<!--TimeLine
================================================== -->
<div class="example">
<h2 class="example-title">TimeLine</h2>
<div class="row">
<div class="col-md-12">
<div class="timeline">
<dl>
<dt>Apr 2014</dt>
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Apr 14</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-1.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">Bootstrap</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Apr 10</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-2.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">Bootflat</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
<dt>Mar 2014</dt>
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Mar 15</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-3.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">Flat UI</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Mar 8</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-4.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">UI design</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- Calendar
================================================== -->
<div class="example">
<h2 class="example-title">Calendar and Pricing</h2>
<div class="row">
<div class="col-md-4">
<div class="calendar">
<div class="years clearfix">
<div class="unit prev"><em></em></div>
<div class="monyear">MAY 2014</div>
<div class="unit next"><em></em></div>
</div>
<div class="days">
<div class="clearfix">
<div class="unit">SU</div>
<div class="unit">MO</div>
<div class="unit">TU</div>
<div class="unit">WE</div>
<div class="unit">TH</div>
<div class="unit">FR</div