Paper Bootstrap Wizard

Elements description

Buttons

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette:


See Full Implementation 
	<button class="btn btn-default">Default</button>

	<button class="btn btn-primary">Primary</button>

	<button class="btn btn-info">Info</button>

	<button class="btn btn-success">Success</button>

	<button class="btn btn-warning">Warning</button>

	<button class="btn btn-danger">Danger</button>

Sizes

Buttons come in all needed sizes:

See Full Implementation 
	<button class="btn btn-primary btn-lg">Large</button>

	<button class="btn btn-primary">Normal</button>

	<button class="btn btn-primary btn-sm">Small</button>

	<button class="btn btn-primary btn-xs">Extra Small</button>

Styles

We added extra classes that help you better customise the look. You can use regular buttons, filled buttons or plain link buttons. Let's see some examples:

See Full Implementation 
	<button class="btn btn-primary">Default</button>

	<button class="btn btn-primary btn-fill">Filled</button>

	<button class="btn btn-primary btn-simple">Simple</button>

Button groups, toolbars, and disabled states all work like they are supposed to.

Checkboxes

The .active color will change depending on what color you will set on data-color = 'green'.

Design

Code

Develop

Usage can be done via Data Attributes: See example. 

<div class="row">
	<div class="card wizard-card" data-color="green">
		<div class="col-sm-8 col-sm-offset-2">
			<div class="col-sm-4">
				<div class="choice" data-toggle="wizard-checkbox">
					<input type="checkbox" name="jobb" value="Design">
					<div class="card card-radios card-hover-effect">
						<i class="ti-paint-roller"></i>
						<p>Design</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="choice" data-toggle="wizard-checkbox">
					<input type="checkbox" name="jobb" value="Code">
					<div class="card card-radios card-hover-effect">
						<i class="ti-pencil-alt"></i>
						<p>Code</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="choice" data-toggle="wizard-checkbox">
					<input type="checkbox" name="jobb" value="Develop">
					<div class="card card-radios card-hover-effect">
						<i class="ti-star"></i>
						<p>Develop</p>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>

Inputs

We restyled the Bootstrap input to give it a different look. You can use the classic look, different colours and states or input groups. The default style for inputs is without borders, but if the colour inside the input is too close to your background, you can add the class 'border-input' to add a border to the input. If you want the input group to have a border, you should add the class 'border-input' both to the group and to the input.

See full implementation 
    <div class="form-group">

        <input type="text" value="" placeholder="Input" class="form-control border-input" />

    </div>



    <div class="form-group has-success">

        <input type="text" value="Success" class="form-control" />

    </div>



    <div class="form-group has-error has-feedback">

        <input type="text" value="Error" class="form-control" />

        <span class="glyphicon glyphicon-remove form-control-feedback"></span>

    </div>



    <div class="input-group border-input">

        <input type="text" value="Group Addon" class="form-control border-input">

        <span class="input-group-addon"><i class="fa fa-group"></i></span>

    </div>