<h2>Content</h2>
<div class="row">
	<div class="col-sm-6">
		<h3>Display Headings</h3>
		<h1 class="display-1">Display 1</h1>
		<h1 class="display-2">Display 2</h1>
		<h1 class="display-3">Display 3</h1>
		<h1 class="display-4">Display 4</h1>
		<h3>Muted Text Class</h3>
		<h3>
			Heading Text
			<small class="text-muted">With muted shade text</small>
		</h3>
		<h3>Blockquote</h3>
		<blockquote class="blockquote">
			<p class="mb-0">
				Typography is to literature as musical performance is to composition: an
				essential act of interpretation, full of endless opportunities for
				insight or obtuseness.
			</p>
			<footer class="blockquote-footer">
				Robert Bringhurst in
				<cite title="Source Title">The Elements of Typographic Style</cite>
			</footer>
		</blockquote>
		<h3>Table</h3>
		<table class="table ">
			<thead class="thead-default">
				<tr>
					<th>#</th>
					<th>thead-default</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Nina</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Penta</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td>Santa Maria</td>
				</tr>
			</tbody>
		</table>
		<table class="table">
			<thead class="thead-inverse">
				<tr>
					<th>#</th>
					<th>thead-inverse</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Nina</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Penta</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td>Santa Maria</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-sm-6">
		<h3>Lead</h3>
		<p class="lead">
			A lead paragraph is used to draw a reader into the body copy. In a badly
			designed book, the letters mill and stand like starving horses in a field.
			In a book designed by rote, they sit like stale bread and mutton on the
			page.
		</p>
		<p>
			In a well-made book, where designer, compositor and printer have all done
			their jobs, no matter how many thousands of lines and pages, the letters
			are alive. They dance in their seats. Sometimes they rise and dance in the
			margins and aisles.
		</p>
		<h3>Unstyled List</h3>
		<ul class="list-unstyled">
			<li>Unstyled list item text</li>
			<li>
				Unstyled list item text
				<ul>
					<li>
						Nested list items need the <code>.list-unstyled</code> class as well
						or they will have bullets
					</li>
				</ul>
			</li>
			<li>Unstyled list item text</li>
			<li>Unstyled list item text</li>
		</ul>
		<h3>Inline List</h3>
		<ul class="list-inline">
			<li class="list-inline-item">List item one</li>
			<li class="list-inline-item">List item two</li>
			<li class="list-inline-item">List item three</li>
		</ul>
		<h3>Description List</h3>
		<dl class="row">
			<dt class="col-sm-3">
				Long title that <strong>is not</strong> truncated or shortened
			</dt>
			<dd class="col-sm-9">
				Definition list description etiam porta sem malesuada magna mollis
				euismod.
			</dd>
			<dt class="col-sm-3 text-truncate">
				Long title that <strong>is</strong> truncated or shortened
			</dt>
			<dd class="col-sm-9">
				Definition list description etiam porta sem malesuada magna mollis
				euismod.
			</dd>
			<dt class="col-sm-3">Nesting</dt>
			<dd class="col-sm-9">
				<dl class="row">
					<dt class="col-sm-4">Nested definition list</dt>
					<dd class="col-sm-8">
						Definition list description etiam porta sem malesuada magna mollis
						euismod.
					</dd>
				</dl>
			</dd>
		</dl>
		<h3>Image Thumbnails</h3>
		<img
			src="https://dummyimage.com/80x80/563d7c/fff"
			alt=""
			class="img-thumbnail"
		/>
		<img
			src="https://dummyimage.com/80x80/563d7c/fff"
			alt=""
			class="img-thumbnail"
		/>
		<img
			src="https://dummyimage.com/80x80/563d7c/fff"
			alt=""
			class="img-thumbnail"
		/>
		<h3>Figure</h3>
		<figure class="figure">
			<img
				src="https://dummyimage.com/400x200/563d7c/fff"
				class="figure-img img-fluid rounded"
				alt=""
			/>
			<figcaption class="figure-caption">
				Figure caption description text
			</figcaption>
		</figure>
	</div>
</div>
<h2 id="components">Components</h2>
<div class="row">
	<div class="col-sm-6">
		<h3>Alert</h3>
		<div class="alert alert-warning" role="alert">
			<strong>Alert!</strong> This is a Bootstrap alert box
		</div>
		<h3>Badge</h3>
		<p>Example heading <span class="badge badge-default">badge</span></p>
		<p>
			Example heading <span class="badge badge-primary">.badge-primary</span>
		</p>
		<h3>Popover</h3>
		<a
			tabindex="0"
			class="btn btn-lg btn-primary"
			role="button"
			data-toggle="popover"
			data-trigger="focus"
			title="Dismissible popover"
			data-content="And here's some amazing content. It's very engaging. Right?"
			>Popover on click</a
		>
		<button
			type="button"
			class="btn btn-lg btn-primary"
			data-toggle="popover"
			data-trigger="hover"
			data-delay="300"
			title="Popover title"
			data-content="Popover description text"
		>
			Popover on hover
		</button>
		<h3>Card</h3>
		<div class="card" style="width: 20rem;">
			<img
				class="card-img-top w-100"
				src="https://dummyimage.com/600x400/563d7c/fff"
				alt="Card image cap"
			/>
			<div class="card-block">
				<h4 class="card-title">Card title</h4>
				<p class="card-text">
					Some quick example text to build on the card title and make up the
					bulk of the card's content.
				</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</div>
		</div>
		<h3>Collapse - Accordian</h3>
		<div id="accordion" role="tablist" aria-multiselectable="true">
			<div class="card">
				<div class="card-header" role="tab" id="headingOne">
					<h5 class="mb-0">
						<a
							data-toggle="collapse"
							data-parent="#accordion"
							href="#collapseOne"
							aria-expanded="true"
							aria-controls="collapseOne"
						>
							Accordian Group Item #1
						</a>
					</h5>
				</div>
				<div
					id="collapseOne"
					class="collapse show"
					role="tabpanel"
					aria-labelledby="headingOne"
				>
					<div class="card-block">
						<div class="row">
							<div class="col-sm-6">
								<img
									src="https://dummyimage.com/200x200/563d7c/fff"
									alt=""
									class="img-thumbnail img-fluid"
								/>
							</div>
							<div class="col-sm-6">
								<h2>Accordian Group Heading</h2>
								Accordian content description text.
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="card-header" role="tab" id="headingTwo">
					<h5 class="mb-0">
						<a
							class="collapsed"
							data-toggle="collapse"
							data-parent="#accordion"
							href="#collapseTwo"
							aria-expanded="false"
							aria-controls="collapseTwo"
						>
							Accordian Group Item #2
						</a>
					</h5>
				</div>
				<div
					id="collapseTwo"
					class="collapse"
					role="tabpanel"
					aria-labelledby="headingTwo"
				>
					<div class="card-block">
						<div class="row">
							<div class="col-sm-6">
								<img
									src="https://dummyimage.com/200x200/563d7c/fff"
									alt=""
									class="img-thumbnail img-fluid"
								/>
							</div>
							<div class="col-sm-6">
								<h2>Accordian Group Heading</h2>
								Accordian content description text.
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="card-header" role="tab" id="headingThree">
					<h5 class="mb-0">
						<a
							class="collapsed"
							data-toggle="collapse"
							data-parent="#accordion"
							href="#collapseThree"
							aria-expanded="false"
							aria-controls="collapseThree"
						>
							Accordian Group Item #3
						</a>
					</h5>
				</div>
				<div
					id="collapseThree"
					class="collapse"
					role="tabpanel"
					aria-labelledby="headingThree"
				>
					<div class="card-block">
						<div class="row">
							<div class="col-sm-6">
								<img
									src="https://dummyimage.com/200x200/563d7c/fff"
									alt=""
									class="img-thumbnail img-fluid"
								/>
							</div>
							<div class="col-sm-6">
								<h2>Accordian Group Heading</h2>
								Accordian content description text.
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h3>Input group</h3>
		<div class="input-group">
			<input type="text" class="form-control" placeholder="Search Products" />
			<button
				class="btn btn-primary input-group-btn br-bl_square br-tl_square "
				type="button"
			>
				Search
			</button>
		</div>
		<div class="input-group input-group-lg">
			<input type="email" class="form-control" placeholder="Email Address" />
			<button
				class="bg_primary br-bl_square br-tl_square btn btn-primary input-group-btn"
				type="button"
			>
				Subscribe
			</button>
		</div>
		<h3>Pills Nav</h3>
		<ul class="nav nav-pills">
			<li class="nav-item">
				<a class="nav-link active" href="#">Active</a>
			</li>
			<li class="nav-item dropdown">
				<a
					class="nav-link dropdown-toggle"
					data-toggle="dropdown"
					href="#"
					role="button"
					aria-haspopup="true"
					aria-expanded="false"
					>Dropdown</a
				>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">Separated link</a>
				</div>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			</li>
		</ul>
		<h3>Fill and Justify Pills Nav</h3>
		<div class=" ">
			<ul class="nav nav-pills nav-fill">
				<li class="nav-item">
					<a class="nav-link active" href="#">Active</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Longer nav link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">Disabled</a>
				</li>
			</ul>
		</div>
		<h3>Progress</h3>
		<div class="progress">
			<div
				class="progress-bar progress-bar-striped progress-bar-animated"
				role="progressbar"
				aria-valuenow="75"
				aria-valuemin="0"
				aria-valuemax="100"
				style="width: 75%"
			>
				75%
			</div>
		</div>
		<h3>Buttons</h3>
		<div class="flex">
			<ul class="ul_none flex_auto p-r_4">
				<li>
					<button type="button" class="btn btn-primary btn-sm">Primary</button>
				</li>
				<li><button type="button" class="btn btn-primary">Primary</button></li>
				<li>
					<button type="button" class="btn btn-primary btn-lg">Primary</button>
				</li>
			</ul>
			<ul class="ul_none flex_auto p-r_4">
				<li>
					<button type="button" class="btn btn-secondary btn-sm">
						secondary
					</button>
				</li>
				<li>
					<button type="button" class="btn btn-secondary">secondary</button>
				</li>
				<li>
					<button type="button" class="btn btn-secondary btn-lg">
						secondary
					</button>
				</li>
				<li><button type="button" class="btn btn-link">Link</button></li>
			</ul>
			<ul class="ul_none flex_auto p-r_4">
				<li>
					<button type="button" class="btn btn-accent btn-sm">
						accent
					</button>
				</li>
				<li>
					<button type="button" class="btn btn-accent">accent</button>
				</li>
				<li>
					<button type="button" class="btn btn-accent btn-lg">
						accent
					</button>
				</li>
				<li><button type="button" class="btn btn-link">Link</button></li>
			</ul>
		</div>
		<h3>Button Group</h3>
		<div
			class="btn-group btn-group-sm"
			role="group"
			aria-label="Button group with nested dropdown"
		>
			<button type="button" class="btn btn-secondary">1</button>
			<button type="button" class="btn btn-secondary">2</button>
			<div class="btn-group" role="group">
				<button
					id="btnGroupDrop1"
					type="button"
					class="btn btn-secondary dropdown-toggle"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
				>
					Dropdown
				</button>
				<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
					<a class="dropdown-item" href="#">Dropdown link</a>
					<a class="dropdown-item" href="#">Dropdown link</a>
				</div>
			</div>
		</div>
		<div
			class="btn-group"
			role="group"
			aria-label="Button group with nested dropdown"
		>
			<button type="button" class="btn btn-secondary">1</button>
			<button type="button" class="btn btn-secondary">2</button>
			<div class="btn-group" role="group">
				<button
					id="btnGroupDrop1"
					type="button"
					class="btn btn-secondary dropdown-toggle"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
				>
					Dropdown
				</button>
				<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
					<a class="dropdown-item" href="#">Dropdown link</a>
					<a class="dropdown-item" href="#">Dropdown link</a>
				</div>
			</div>
		</div>
		<div
			class="btn-group btn-group-lg"
			role="group"
			aria-label="Button group with nested dropdown"
		>
			<button type="button" class="btn btn-secondary">1</button>
			<button type="button" class="btn btn-secondary">2</button>
			<div class="btn-group" role="group">
				<button
					id="btnGroupDrop1"
					type="button"
					class="btn btn-secondary dropdown-toggle"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
				>
					Dropdown
				</button>
				<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
					<a class="dropdown-item" href="#">Dropdown link</a>
					<a class="dropdown-item" href="#">Dropdown link</a>
				</div>
			</div>
		</div>
		<h3>Collapse</h3>
		<p>
			<a
				class="btn btn-primary"
				data-toggle="collapse"
				href="#collapseExample"
				aria-expanded="false"
				aria-controls="collapseExample"
			>
				Link with href
			</a>
			<button
				class="btn btn-primary"
				type="button"
				data-toggle="collapse"
				data-target="#collapseExample"
				aria-expanded="false"
				aria-controls="collapseExample"
			>
				Button with data-target
			</button>
		</p>
		<div class="collapse" id="collapseExample">
			<div class="card card-block p-x_5 p-t_3 p-b_4">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
				terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
				labore wes anderson cred nesciunt sapiente ea proident.
			</div>
		</div>
	</div>
	<div class="col-sm-6">
		<h3>Breadcrumb</h3>
		<nav class="breadcrumb">
			<a class="breadcrumb-item" href="#">Home</a>
			<a class="breadcrumb-item" href="#">Library</a>
			<span class="breadcrumb-item active">Breadcrumb</span>
		</nav>
		<h3>Dropdowns</h3>
		<div class="btn-toolbar" role="toolbar">
			<div class="btn-group">
				<button
					class="btn btn-secondary btn-lg dropdown-toggle"
					type="button"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
				>
					Large button
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">Separated link</a>
				</div>
			</div>
			<div class="btn-group ml-2">
				<button type="button" class="btn btn-lg btn-secondary">
					Large split button
				</button>
				<button
					type="button"
					class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
				>
					<span class="sr-only">Toggle Dropdown</span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">Separated link</a>
				</div>
			</div>
		</div>
		<h3>Navbar</h3>
		<nav class="navbar navbar-toggleable-md navbar-dark bg_primary">
			<button
				class="br_none navbar-toggler navbar-toggler-right"
				type="button"
				data-toggle="collapse"
				data-target="#navbarNavDropdown"
				aria-controls="navbarNavDropdown"
				aria-expanded="false"
				aria-label="Toggle navigation"
			>
				<i class="fas fa-bars"></i>
			</button>
			<a class="navbar-brand" href="#">Navbar</a>
			<div class="collapse navbar-collapse" id="navbarNavDropdown">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#"
							>Home <span class="sr-only">(current)</span></a
						>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Features</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Pricing</a>
					</li>
					<li class="nav-item dropdown">
						<a
							class="nav-link dropdown-toggle"
							href="http://example.com"
							id="navbarDropdownMenuLink"
							data-toggle="dropdown"
							aria-haspopup="true"
							aria-expanded="false"
						>
							Dropdown link
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
							<a class="dropdown-item" href="#">Action</a>
							<a class="dropdown-item" href="#">Another action</a>
							<a class="dropdown-item" href="#">Something else here</a>
						</div>
					</li>
				</ul>
			</div>
		</nav>
		<h3>List group</h3>
		<ul class="list-group">
			<li class="list-group-item justify-content-between">
				List group item #1
				<span class="badge badge-default badge-pill">14</span>
			</li>
			<li class="list-group-item justify-content-between">
				List group item #2
				<span class="badge badge-default badge-pill">2</span>
			</li>
			<li class="list-group-item justify-content-between">
				List group item #3
				<span class="badge badge-warning badge-pill">1</span>
			</li>
		</ul>
		<h3>Base Nav</h3>
		<ul class="nav">
			<li class="nav-item">
				<a class="nav-link active" href="#">Active</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			</li>
		</ul>
		<h3>List group with Custom Content</h3>
		<div class="list-group">
			<a
				href="#"
				class="list-group-item list-group-item-action flex-column align-items-start active"
			>
				<div class="d-flex w-100 justify-content-between">
					<h5 class="mb-1">Don't Make Me Think</h5>
					<small>20 Comments</small>
				</div>
				<p class="mb-1">
					Description text gravida at eget metus. Maecenas sed diam eget risus
					varius blandit.
				</p>
				<small>Category: Design</small>
			</a>
			<a
				href="#"
				class="list-group-item list-group-item-action flex-column align-items-start"
			>
				<div class="d-flex w-100 justify-content-between">
					<h5 class="mb-1">Thinking with Type</h5>
					<small class="text-muted">3 Comments</small>
				</div>
				<p class="mb-1">
					Description text gravida at eget metus. Maecenas sed diam eget risus
					varius blandit
				</p>
				<small class="text-muted">Category: Design</small>
			</a>
			<a
				href="#"
				class="list-group-item list-group-item-action flex-column align-items-start"
			>
				<div class="d-flex w-100 justify-content-between">
					<h5 class="mb-1">Design of Everyday Things</h5>
					<small class="text-muted">3 Comments</small>
				</div>
				<p class="mb-1">
					Description text gravida at eget metus. Maecenas sed diam eget risus
					varius blandit
				</p>
				<small class="text-muted">Category: Design</small>
			</a>
		</div>
		<h3>Tabs Nav</h3>
		<ul class="nav nav-tabs">
			<li class="nav-item">
				<a class="nav-link active" href="#tab-1" data-toggle="tab">Active</a>
			</li>
			<li class="nav-item dropdown">
				<a
					class="nav-link dropdown-toggle"
					data-toggle="dropdown"
					href="#"
					role="button"
					aria-haspopup="true"
					aria-expanded="false"
					>Dropdown</a
				>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#tab-2" data-toggle="tab">Tab 2</a>
					<a class="dropdown-item" href="#tab-3" data-toggle="tab">Tab 3</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#tab-4" data-toggle="tab">Tab 4</a>
				</div>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			</li>
		</ul>
		<br />
		<div class="tab-content">
			<div class="tab-pane active" id="tab-1" role="tabpanel">
				<h5>Tab #1 Content</h5>
				<p>Tab main content.</p>
			</div>
			<div class="tab-pane" id="tab-2" role="tabpanel">Tab #2 content</div>
			<div class="tab-pane" id="tab-3" role="tabpanel">Tab #3 content</div>
			<div class="tab-pane" id="tab-4" role="tabpanel">Tab #4 content</div>
		</div>
		<h3>Pagination</h3>
		<nav aria-label="...">
			<ul class="pagination">
				<li class="page-item disabled">
					<span class="page-link">Previous</span>
				</li>
				<li class="page-item"><a class="page-link" href="#">1</a></li>
				<li class="page-item active">
					<span class="page-link">
						2
						<span class="sr-only">(current)</span>
					</span>
				</li>
				<li class="page-item"><a class="page-link" href="#">3</a></li>
				<li class="page-item">
					<a class="page-link" href="#">Next</a>
				</li>
			</ul>
		</nav>
		<nav aria-label="...">
			<ul class="pagination pagination-lg">
				<li class="page-item disabled">
					<a class="page-link" href="#" tabindex="-1">Previous</a>
				</li>
				<li class="page-item"><a class="page-link" href="#">1</a></li>
				<li class="page-item"><a class="page-link" href="#">2</a></li>
				<li class="page-item"><a class="page-link" href="#">3</a></li>
				<li class="page-item">
					<a class="page-link" href="#">Next</a>
				</li>
			</ul>
		</nav>
		<h3>Forms</h3>
		<form>
			<div class="row">
				<div class="col">
					<div class="form-group">
						<label for="exampleInputEmail1">Email address</label>
						<input
							type="email"
							class="form-control"
							id="exampleInputEmail1"
							aria-describedby="emailHelp"
							placeholder="Enter email"
						/>
						<small id="emailHelp" class="form-text text-muted">No Spam.</small>
					</div>
					<div class="form-group">
						<label for="exampleSelect1">Example select</label>
						<select class="form-control" id="exampleSelect1">
							<option>1</option>
							<option>2</option>
							<option>3</option>
						</select>
					</div>
					<fieldset class="form-group">
						<legend>Radio buttons</legend>
						<div class="form-check">
							<label class="form-check-label">
								<input
									type="radio"
									class="form-check-input"
									name="optionsRadios"
									id="optionsRadios1"
									value="option1"
									checked
								/>
								Option one
							</label>
						</div>
						<div class="form-check disabled">
							<label class="form-check-label">
								<input
									type="radio"
									class="form-check-input"
									name="optionsRadios"
									id="optionsRadios3"
									value="option3"
									disabled
								/>
								Option two - disabled
							</label>
						</div>
					</fieldset>
				</div>
				<div class="col">
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input
							type="password"
							class="form-control"
							id="exampleInputPassword1"
							placeholder="Password"
						/>
						<small id="emailHelp" class="form-text text-muted"
							><a href="">Forgot Password?</a> / <a href="">Sign Up</a></small
						>
					</div>
					<div class="form-group">
						<label for="exampleSelect2">Multiple select</label>
						<select multiple class="form-control" id="exampleSelect2">
							<option>1</option>
							<option>2</option>
							<option>3</option>
						</select>
					</div>
					<div class="form-check">
						<label class="form-check-label">
							<input type="checkbox" class="form-check-input" />
							Checkbox
						</label>
					</div>
					<div class="form-check">
						<label class="form-check-label">
							<input type="checkbox" class="form-check-input" disabled />
							Checkbox - disabled
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="exampleTextarea">Textarea</label>
				<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
			</div>
			<div class="form-group">
				<label for="exampleInputFile">File input</label>
				<input
					type="file"
					class="form-control-file"
					id="exampleInputFile"
					aria-describedby="fileHelp"
				/>
				<small id="fileHelp" class="form-text text-muted">Help message</small>
			</div>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
</div>