Some examples and components of the Minimal theme

<div class="jumbotron text-white bg-cover p-5 rounded" style="background-image: linear-gradient(to bottom, rgba(77, 79, 84, .6) 0%, rgba(77, 79, 84, .9) 100%), url(https://cloud.modyocdn.com/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg);">
		<h2 class="display-4 font-weight-bold">Hello, world!</h2>
		<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
		<hr class="my-4">
		<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
		<a class="btn btn-primary" href="#" role="button">Learn more</a>
	</div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component.

Learn more

<div class="row gx-0 align-items-center shadow rounded overflow-hidden">
		<figure class="col-12 col-lg-6 m-0">
			<img src="https://cloud.modyocdn.com/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
		</figure>
		<div class="col-12 col-lg-6 p-5">
			<h2 class="display-4 font-weight-bold">Hello, world!</h2>
			<p class="lead">This is a simple hero unit, a simple jumbotron-style component.</p>
			<a class="btn btn-primary" href="#" role="button">Learn more</a>
		</div>
	</div>

Mon, Aug 18, 25

Hello, world!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Mon, Aug 18, 25

Hello, world!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Mon, Aug 18, 25

Hello, world!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

<div>
		<div class="row gx-0 shadow-sm rounded overflow-hidden mb-4">
			<figure class="col-12 col-lg-5 m-0">
				<img src="https://cloud.modyocdn.com/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
			</figure>
			<div class="col-12 col-lg-7 p-4">
				<small class="text-muted">Tue, Apr 06, 21</small>
				<h4 class="font-weight-bold">Hello, world!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<a href="#" class="btn btn-outline-primary">Learn more</a>
			</div>
		</div>
		<div class="row gx-0 shadow-sm rounded overflow-hidden mb-4">
			<figure class="col-12 col-lg-5 m-0">
				<img src="https://cloud.modyocdn.com/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
			</figure>
			<div class="col-12 col-lg-7 p-4">
				<small class="text-muted">Tue, Apr 06, 21</small>
				<h4 class="font-weight-bold">Hello, world!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<a href="#" class="btn btn-outline-primary">Learn more</a>
			</div>
		</div>
		<div class="row gx-0 shadow-sm rounded overflow-hidden mb-4">
			<figure class="col-12 col-lg-5 m-0">
				<img src="https://cloud.modyocdn.com/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
			</figure>
			<div class="col-12 col-lg-7 p-4">
				<small class="text-muted">Tue, Apr 06, 21</small>
				<h4 class="font-weight-bold">Hello, world!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<a href="#" class="btn btn-outline-primary">Learn more</a>
			</div>
		</div>
	</div>

<aside class="col-12 col-md-5">
		<div class="row border-bottom mb-4 pb-4">
			<div class="col-3 text-center">
				<span class="text-center text-primary">
					<b class="font-weight-bold h2 d-block mb-0">06</b>
					<span class="h4 text-uppercase">Apr</span>
				</span>
			</div>
			<div class="col-9">
				<h4 class="font-weight-bold">Hello, world!</h4>
				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget elit dapibus, ullamcorper.</p>
				<a href="#" class="btn btn-outline-primary">Learn more</a>
			</div>
		</div>
		<div class="row border-bottom mb-4 pb-4">
			<div class="col-3 text-center">
				<span class="text-center text-primary">
					<b class="font-weight-bold h2 d-block mb-0">06</b>
					<span class="h4 text-uppercase">Apr</span>
				</span>
			</div>
			<div class="col-9">
				<h4 class="font-weight-bold">Hello, world!</h4>
				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget elit dapibus, ullamcorper.</p>
				<a href="#" class="btn btn-outline-primary">Learn more</a>
			</div>
		</div>
		<div class="row border-bottom mb-4 pb-4">
			<div class="col-3 text-center">
				<span class="text-center text-primary">
					<b class="font-weight-bold h2 d-block mb-0">06</b>
					<span class="h4 text-uppercase">Apr</span>
				</span>
			</div>
			<div class="col-9">
				<h4 class="font-weight-bold">Hello, world!</h4>
				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget elit dapibus, ullamcorper.</p>
				<a href="#" class="btn btn-outline-primary">Learn more</a>
			</div>
		</div>
	</aside>

This is a example title

Some quick example text to build on the card title and make up the bulk of the card's content.

This is a example title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div>
		<div class="row d-flex justify-content-center align-items-center mb-4">
			<div class="col-12 col-md-4">
				<figure class="m-0">
					<img src="https://cloud.modyocdn.com/uploads/ac8bd256-d026-43cd-97df-2f975fa3fdde/original/example.jpg" alt="People working" class="rounded shadow">
				</figure>
			</div>
			<div class="col-12 col-md-6 py-3">
				<h2>	This is a example title</h2>
				<p class="text-muted">	Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			</div>
		</div>
		<div class="row d-flex justify-content-center align-items-center mb-4">
			<div class="col-12 col-md-6 order-2 order-md-1">
				<h2>	This is a example title</h2>
				<p class="text-muted">	Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			</div>
			<div class="col-12 col-md-4 order-1 order-md-2 py-3">
				<figure class="m-0">
					<img src="https://cloud.modyocdn.com/uploads/ac8bd256-d026-43cd-97df-2f975fa3fdde/original/example.jpg" alt="Another image of people working" class="rounded shadow">
				</figure>
			</div>
		</div>
	</div>	

<p>
		<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
			Link with href
		</a>
		<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
			Button with data-bs-target
		</button>
	</p>
	<div class="collapse" id="collapseExample">
		<div class="card card-body">
			Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
		</div>
	</div>
	

<div class="btn-group mb-3">
				<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					Action
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="#">Action</a></li>
					<li><a class="dropdown-item" href="#">Another action</a></li>
					<li><a class="dropdown-item" href="#">Something else here</a></li>
					<li><hr class="dropdown-divider"></li>
					<li><a class="dropdown-item" href="#">Separated link</a></li>
				</ul>
			</div>

	<div class="btn-group">
		<button type="button" class="btn btn-danger">Action</button>
		<button type="button" class="btn btn-priamry dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Toggle Dropdown</span>
		</button>
		<ul class="dropdown-menu">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>

<div class="btn-group">
		<button type="button" class="btn btn-danger">Action</button>
		<button type="button" class="btn btn-priamry dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Toggle Dropdown</span>
		</button>
		<ul class="dropdown-menu">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="list-group mb-4">
		<li class="list-group-item">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>
		<li class="list-group-item">Porta ac consectetur ac</li>
		<li class="list-group-item">Vestibulum at eros</li>
	</ul>
	

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="list-group mb-5">
		<li class="list-group-item active">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>
		<li class="list-group-item">Porta ac consectetur ac</li>
		<li class="list-group-item">Vestibulum at eros</li>
	</ul>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="list-group list-group-flush mb-4">
		<li class="list-group-item">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>
		<li class="list-group-item">Porta ac consectetur ac</li>
		<li class="list-group-item">Vestibulum at eros</li>
	</ul>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

<ul class="list-group list-group-horizontal mb-4">
		<li class="list-group-item">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>
	</ul>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Close Save changes

<!-- Button trigger modal -->
	<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
		Launch demo modal
	</button>

	<!-- Modal -->
	<div class="modal modal_img fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-white border-0 p-0">
					<img src="https://cloud.modyocdn.com/uploads/8238bc7e-a70f-4d90-8012-d9841fab1025/original/example3.jpg" alt="" />
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">✕</span>
					</button>
				</div>
				<div class="modal-body">
					<h3 id="exampleModalLabel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>