logo

Elements

Buttons

Button

Buttons base

	
	<button class="btn  btn-light  ">
		Button
	
	</button>

Primary

Primary buttons

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

Secondary

Secondary buttons

	
	<button class="btn  btn-secondary  ">
		secondary
	
	</button>

Outline

Outline buttons

	
	<button class="btn  btn-outline-primary  ">
		primary
	
	</button>
	<button class="btn  btn-outline-secondary  ">
		secondary
	
	</button>
	<button class="btn  btn-outline-success  ">
		success
	
	</button>
	<button class="btn  btn-outline-danger  ">
		danger
	
	</button>
	<button class="btn  btn-outline-warning  ">
		danger
	
	</button>
	<button class="btn  btn-outline-info  ">
		danger
	
	</button>
	<button class="btn  btn-outline-light  ">
		danger
	
	</button>
	<button class="btn  btn-outline-dark  ">
		danger
	
	</button>

Disabled

	
	<button class="btn  btn-primary disabled  ">
		primary
	
	</button>
	<button class="btn  btn-secondary disabled  ">
		secondary
	
	</button>

Sizes

	
	<button class="btn  btn-primary btn-sm  ">
		small
	
	</button>
	<button class="btn  btn-primary  ">
		reqular
	
	</button>
	<button class="btn  btn-primary btn-lg  ">
		large
	
	</button>

Radio Buttons

radio buttons

	
	<div class="btn-group btn-group-toggle" data-toggle="buttons">
		<label class="btn btn-secondary active">
			<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
		</label>
		<label class="btn btn-secondary">
			<input type="radio" name="options" id="option2" autocomplete="off"> Radio
		</label>
		<label class="btn btn-secondary">
			<input type="radio" name="options" id="option3" autocomplete="off"> Radio
		</label>
	</div>

Link Button

Link button

Button 
	
	<a href="#" class="btn  btn-light  ">
		Button
	
	</a>

Checkbox

Checkbox

	
	<label class="form-checkbox">
		<input type="checkbox" name="">
	
	</label>

Radio

	
	<input type="radio" tabindex="0" name="" id="">

Icons

Icon

	
	<i class="icon ">
		<svg class="icons-tag  ">
			<use xlink:href="#tag" />
		</svg>
	</i>

Icons Size

	
	<i class="icon icon-x-small">
		<svg class="icons-tag  secondary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-small">
		<svg class="icons-tag  secondary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon ">
		<svg class="icons-tag  secondary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-large">
		<svg class="icons-tag  secondary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-x-large">
		<svg class="icons-tag  secondary">
			<use xlink:href="#tag" />
		</svg>
	</i>
	<i class="icon icon-x-small">
		<svg class="icons-tag  primary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-small">
		<svg class="icons-tag  primary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon ">
		<svg class="icons-tag  primary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-large">
		<svg class="icons-tag  primary">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-x-large">
		<svg class="icons-tag  primary">
			<use xlink:href="#tag" />
		</svg>
	</i>
	<i class="icon icon-x-small">
		<svg class="icons-tag  gray-dark">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-small">
		<svg class="icons-tag  gray-dark">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon ">
		<svg class="icons-tag  gray-dark">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-large">
		<svg class="icons-tag  gray-dark">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-x-large">
		<svg class="icons-tag  gray-dark">
			<use xlink:href="#tag" />
		</svg>
	</i>
	<i class="icon icon-x-small">
		<svg class="icons-tag  gray">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-small">
		<svg class="icons-tag  gray">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon ">
		<svg class="icons-tag  gray">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-large">
		<svg class="icons-tag  gray">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-x-large">
		<svg class="icons-tag  gray">
			<use xlink:href="#tag" />
		</svg>
	</i>
	<i class="icon icon-x-small">
		<svg class="icons-tag  gray-light">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-small">
		<svg class="icons-tag  gray-light">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon ">
		<svg class="icons-tag  gray-light">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-large">
		<svg class="icons-tag  gray-light">
			<use xlink:href="#tag" />
		</svg>
	</i><i class="icon icon-x-large">
		<svg class="icons-tag  gray-light">
			<use xlink:href="#tag" />
		</svg>
	</i>

Icons

	
	<div grid class="text-center">
		<div one>
			<i class="icon ">
				<svg class="icons-tag  secondary">
					<use xlink:href="#tag" />
				</svg>
			</i> </div>
		<div one>
			<i class="icon ">
				<svg class="icons-comment  secondary">
					<use xlink:href="#comment" />
				</svg>
			</i> </div>
		<div one>
			<i class="icon ">
				<svg class="icons-calendar  ">
					<use xlink:href="#calendar" />
				</svg>
			</i> </div>
	</div>

Inputs

Icon Input

	
	<div class="form-control-icon form-control-icon-example">
		<input class="form-control " name="" type="text" placeholder="Tarih seçiniz"> <i class="icon ">
			<svg class="icons-calendar  ">
				<use xlink:href="#calendar" />
			</svg>
		</i> </div>

Input Group

@
@example.com
https://example.com/users/
$
.00
With textarea 
	
	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text" id="basic-addon1">@</span>
		</div>
		<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
	</div>
	
	<div class="input-group mb-3">
		<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
		<div class="input-group-append">
			<span class="input-group-text" id="basic-addon2">@example.com</span>
		</div>
	</div>
	
	<label for="basic-url">Your vanity URL</label>
	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
		</div>
		<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
	</div>
	
	<div class="input-group mb-3">
		<div class="input-group-prepend">
			<span class="input-group-text">$</span>
		</div>
		<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
		<div class="input-group-append">
			<span class="input-group-text">.00</span>
		</div>
	</div>
	
	<div class="input-group">
		<div class="input-group-prepend">
			<span class="input-group-text">With textarea</span>
		</div>
		<textarea class="form-control" aria-label="With textarea"></textarea>
	</div>

Input

	
	<input class="form-control " name="" type="text" placeholder="">

Lists

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
	
	<ol>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ol>

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
	
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>

Selects

Select Options

	
	<select class="form-select">
		<option>Choose an option</option>
		<option>Git</option>
		<option>Subversion</option>
		<option>Social Coding</option>
		<option>Beets</option>
		<option>Bears</option>
		<option>Battlestar Galactica</option>
	</select>
	
	<select class="form-select select-sm">
		<option>Choose an option</option>
		<option>Git</option>
		<option>Subversion</option>
		<option>Social Coding</option>
		<option>Beets</option>
		<option>Bears</option>
		<option>Battlestar Galactica</option>
	</select>

Select

	
	<select class="form-select" name="">
		<option value="">Choose an option</option>
		<option value="1">Git</option>
		<option value="2">Subversion</option>
		<option value="3">Social Coding</option>
		<option value="4">Beets</option>
		<option value="5">Bears</option>
		<option value="6">Battlestar Galactica</option>
	</select>

Selectize

	
	<select id="Selectize" style="width: 400px " class="demo-default" data-placeholder="Select a person...">
	
	
		<option>list item 1</option>
	</select>

Textarea 

	
	<textarea class="" name="" rows=""></textarea>