page-grid.php

<?php include('header.php'); ?>

<!-- Main Content
================================================== -->
<section id="body" class="">	

	<!-- Section: Mini Hero -->
	<div class="section-mini-hero" style="background-image: url('img/bg1.jpg');">
		<div class="container">
			<h2 class="title2 mini-hero-subtitle">BabyRex Boilerplate</h2>
			<h1 class="title1 mini-hero-title">Typography / Grid - 12 Columns</h1>
		</div>
	</div>
	<!-- /Section: Mini Hero -->

	<!-- Section: Typography -->
	<div class="section contrast">
		<div class="container">
			<div class="row">
				<div class="col-sm-8 col-sm-offset-2">
					<!-- Title of Section -->
					<h2 class="title-of-section">Typography</h2>
					<!-- / Title of Section -->

					<h1 class="title1">Title 1</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh dapibus, viverra enim et, pretium tellus. Integer et odio pellentesque, feugiat est sed, fringilla lectus. Vestibulum auctor pretium nunc, at ultricies risus auctor vitae. Fusce nec ex ipsum. Nulla vel purus augue. Aliquam quis metus ante. Nam ornare felis sed ipsum tincidunt, in pretium lorem vehicula. Sed pharetra dui eu sapien posuere, vitae scelerisque nunc pharetra. Mauris tempor, erat id hendrerit mattis, quam arcu venenatis turpis, nec ultricies augue neque sed ante. Duis a urna a metus elementum semper quis in tortor. Donec est dolor, facilisis in libero in, elementum lobortis dui.</p>

					<h2 class="title2">This is Title 2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh dapibus, viverra enim et, pretium tellus. Integer et odio pellentesque, feugiat est sed, fringilla lectus. Vestibulum auctor pretium nunc, at ultricies risus auctor vitae. Fusce nec ex ipsum. Nulla vel purus augue. Aliquam quis metus ante. Nam ornare felis sed ipsum tincidunt, in pretium lorem vehicula. Sed pharetra dui eu sapien posuere, vitae scelerisque nunc pharetra. Mauris tempor, erat id hendrerit mattis, quam arcu venenatis turpis, nec ultricies augue neque sed ante. Duis a urna a metus elementum semper quis in tortor. Donec est dolor, facilisis in libero in, elementum lobortis dui.</p>

					<h3 class="title3">This is Title 3</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh dapibus, viverra enim et, pretium tellus. Integer et odio pellentesque, feugiat est sed, fringilla lectus. Vestibulum auctor pretium nunc, at ultricies risus auctor vitae. Fusce nec ex ipsum. Nulla vel purus augue. Aliquam quis metus ante. Nam ornare felis sed ipsum tincidunt, in pretium lorem vehicula. Sed pharetra dui eu sapien posuere, vitae scelerisque nunc pharetra. Mauris tempor, erat id hendrerit mattis, quam arcu venenatis turpis, nec ultricies augue neque sed ante. Duis a urna a metus elementum semper quis in tortor. Donec est dolor, facilisis in libero in, elementum lobortis dui.</p>

					<h4 class="title4">This is Title 4</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh dapibus, viverra enim et, pretium tellus. Integer et odio pellentesque, feugiat est sed, fringilla lectus. Vestibulum auctor pretium nunc, at ultricies risus auctor vitae. Fusce nec ex ipsum. Nulla vel purus augue. Aliquam quis metus ante. Nam ornare felis sed ipsum tincidunt, in pretium lorem vehicula. Sed pharetra dui eu sapien posuere, vitae scelerisque nunc pharetra. Mauris tempor, erat id hendrerit mattis, quam arcu venenatis turpis, nec ultricies augue neque sed ante. Duis a urna a metus elementum semper quis in tortor. Donec est dolor, facilisis in libero in, elementum lobortis dui.</p>

					<h5 class="title5">This is Title 5</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh dapibus, viverra enim et, pretium tellus. Integer et odio pellentesque, feugiat est sed, fringilla lectus. Vestibulum auctor pretium nunc, at ultricies risus auctor vitae. Fusce nec ex ipsum. Nulla vel purus augue. Aliquam quis metus ante. Nam ornare felis sed ipsum tincidunt, in pretium lorem vehicula. Sed pharetra dui eu sapien posuere, vitae scelerisque nunc pharetra. Mauris tempor, erat id hendrerit mattis, quam arcu venenatis turpis, nec ultricies augue neque sed ante. Duis a urna a metus elementum semper quis in tortor. Donec est dolor, facilisis in libero in, elementum lobortis dui.</p>

					<h6 class="title6">This is Title 6</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh dapibus, viverra enim et, pretium tellus. Integer et odio pellentesque, feugiat est sed, fringilla lectus. Vestibulum auctor pretium nunc, at ultricies risus auctor vitae. Fusce nec ex ipsum. Nulla vel purus augue. Aliquam quis metus ante. Nam ornare felis sed ipsum tincidunt, in pretium lorem vehicula. Sed pharetra dui eu sapien posuere, vitae scelerisque nunc pharetra. Mauris tempor, erat id hendrerit mattis, quam arcu venenatis turpis, nec ultricies augue neque sed ante. Duis a urna a metus elementum semper quis in tortor. Donec est dolor, facilisis in libero in, elementum lobortis dui.</p>
				</div>
			</div>
		</div>
	</div>
	<!-- /Section: Typography -->

	<!-- Section: Grids -->
	<div class="section section-grid">
		<div class="container">
			<!-- Title of Section -->
			<h2 class="title-of-section">Grid</h2>
			<!-- / Title of Section -->

			<!-- Row -->
			<div class="row">
				<!-- Col -->
				<div class="col-sm-12">
					<div class="contrast-box">12 Col</div>
				</div>				
				<!-- /Col -->
			</div>
			<!-- /Row -->
			<!-- Row -->
			<div class="row">
				<!-- Col -->
				<div class="col-sm-6">
					<div class="contrast-box">6 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-6">
					<div class="contrast-box">6 Col</div>
				</div>				
				<!-- /Col -->
			</div>
			<!-- /Row -->
			<!-- Row -->
			<div class="row">
				<!-- Col -->
				<div class="col-sm-4">
					<div class="contrast-box">4 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-4">
					<div class="contrast-box">4 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-4">
					<div class="contrast-box">4 Col</div>
				</div>				
				<!-- /Col -->
			</div>
			<!-- /Row -->
			<!-- Row -->
			<div class="row">
				<!-- Col -->
				<div class="col-sm-3">
					<div class="contrast-box">3 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-3">
					<div class="contrast-box">3 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-3">
					<div class="contrast-box">3 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-3">
					<div class="contrast-box">3 Col</div>
				</div>				
				<!-- /Col -->
			</div>
			<!-- /Row -->
			<!-- Row -->
			<div class="row">
				<!-- Col -->
				<div class="col-sm-2">
					<div class="contrast-box">2 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-2">
					<div class="contrast-box">2 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-2">
					<div class="contrast-box">2 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-2">
					<div class="contrast-box">2 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-2">
					<div class="contrast-box">2 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-2">
					<div class="contrast-box">2 Col</div>
				</div>				
				<!-- /Col -->
			</div>
			<!-- /Row -->
			<!-- Row -->
			<div class="row">
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
				<!-- Col -->
				<div class="col-sm-1">
					<div class="contrast-box">1 Col</div>
				</div>				
				<!-- /Col -->
			</div>
			<!-- /Row -->
		</div>
	</div>
	<!-- /Section: Grids -->

	<!-- Section: Table -->
	<div class="section contrast">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<!-- Title of Section -->
					<h2 class="title-of-section">Tables</h2>
					<!-- / Title of Section -->

					<!-- Table Wrapper-->
					<div class="table-responsive">
						<!-- Table -->
						<table class="table table-condensed table-striped table-bordered table-hover">
							<!-- Table Head -->
							<thead>
								<!-- Tr -->
								<tr>
									<!-- col -->
									<th style="width:5%">
										<input type="checkbox" class="no-margin">
									</th>
									<!-- /col -->
									<!-- col -->
									<th style="width:40%">Name</th>
									<!-- / col -->
									<!-- col -->
									<th style="width:20%" class="hidden-phone">Product</th>
									<!-- /col -->
									<!-- col -->
									<th style="width:10%" class="hidden-phone">Status</th>
									<!-- / col -->
									<!-- col -->
									<th style="width:15%" class="hidden-phone">Date</th>
									<!-- / col -->
									<!-- col -->
									<th style="width:10%" class="hidden-phone">Actions</th>
									<!-- / col -->
								</tr>
								<!-- /Tr -->
							</thead>
							<!-- / Table Head -->
							<!-- Table Body -->
							<tbody>
								<!-- Tr -->
								<tr>
									<!-- col -->
									<td>
										<input type="checkbox" class="no-margin">
									</td>
									<!-- / col -->
									<!-- col -->
									<td>
										<span class="name">Donald Oswany</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">Agile #555</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<span class="label label label-info">New</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">15 - 10 - 2013</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
											Action <span class="caret"></span></button>
											<ul class="dropdown-menu pull-right">
												<li><a href="#">Edit</a></li>
												<li><a href="#">Delete</a></li>
											</ul>
										</div>
									</td>
									<!-- / col -->
								</tr>
								<!-- / Tr -->
								<!-- Tr -->
								<tr>
									<!-- col -->
									<td>
										<input type="checkbox" class="no-margin">
									</td>
									<!-- / col -->
									<!-- col -->
									<td>
										<span class="name">Michel Clark</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">Wilson #343</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<span class="label label label-success">New</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">15 - 10 - 2013</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
											Action <span class="caret"></span></button>
											<ul class="dropdown-menu pull-right">
												<li><a href="#">Edit</a></li>
												<li><a href="#">Delete</a></li>
											</ul>
										</div>
									</td>
									<!-- / col -->
								</tr>
								<!-- / Tr -->
								<!-- Tr -->
								<tr>
									<!-- col -->
									<td>
										<input type="checkbox" class="no-margin">
									</td>
									<!-- / col -->
									<!-- col -->
									<td>
										<span class="name">Rahul David</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">Wilson #343</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<span class="label label label-danger">New</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">15 - 10 - 2013</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
											Action <span class="caret"></span></button>
											<ul class="dropdown-menu pull-right">
												<li><a href="#">Edit</a></li>
												<li><a href="#">Delete</a></li>
											</ul>
										</div>
									</td>
									<!-- / col -->
								</tr>
								<!-- / Tr -->
								<!-- Tr -->
								<tr>
									<!-- col -->
									<td>
										<input type="checkbox" class="no-margin">
									</td>
									<!-- / col -->
									<!-- col -->
									<td>
										<span class="name">Donald Oswany</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">Agile #555</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<span class="label label label-info">New</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">15 - 10 - 2013</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
											Action <span class="caret"></span></button>
											<ul class="dropdown-menu pull-right">
												<li><a href="#">Edit</a></li>
												<li><a href="#">Delete</a></li>
											</ul>
										</div>
									</td>
									<!-- / col -->
								</tr>
								<!-- / Tr -->
								<!-- Tr -->
								<tr>
									<!-- col -->
									<td>
										<input type="checkbox" class="no-margin">
									</td>
									<!-- / col -->
									<!-- col -->
									<td>
										<span class="name">Michel Clark</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">Wilson #343</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<span class="label label label-success">New</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">15 - 10 - 2013</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
											Action <span class="caret"></span></button>
											<ul class="dropdown-menu pull-right">
												<li><a href="#">Edit</a></li>
												<li><a href="#">Delete</a></li>
											</ul>
										</div>
									</td>
									<!-- / col -->
								</tr>
								<!-- / Tr -->
								<!-- Tr -->
								<tr>
									<!-- col -->
									<td>
										<input type="checkbox" class="no-margin">
									</td>
									<!-- / col -->
									<!-- col -->
									<td>
										<span class="name">Rahul David</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">Wilson #343</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<span class="label label label-danger">New</span>
									</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">15 - 10 - 2013</td>
									<!-- / col -->
									<!-- col -->
									<td class="hidden-phone">
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
											Action <span class="caret"></span></button>
											<ul class="dropdown-menu pull-right">
												<li><a href="#">Edit</a></li>
												<li><a href="#">Delete</a></li>
											</ul>
										</div>
									</td>
									<!-- / col -->
								</tr>
								<!-- / Tr -->
							</tbody>
							<!-- /Table Body -->
							<!-- Table Footer -->
							<tfoot>
								<!-- Tr -->
								<tr>
									<th>-</th>
									<th>Name</th>
									<th>Product</th>
									<th>Status</th>
									<th>Date</th>
									<th>Actions</th>									
								</tr>
								<!-- / Tr -->
							</tfoot>
							<!-- /Table Footer-->
						</table>
						<!-- / Table -->
					</div>
					<!-- / Table Wrapper-->
				</div>
			</div>
		</div>
	</div>
	<!-- /Section: Table -->
	


</section>
<!-- /Main Content
================================================== -->

<?php include('footer.php'); ?>