→ Sahin Miah
→ Protfolio_page

Protfolio_page

This bootstrap css example is contributed by Sahin Miah, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author Sahin Miah

898

v.4.6

Fork Fullscreen

<section class="bg-light text-center py-5">
	<div class="container pb-5 pt-5">
		<div class="pb-5 pt-5 row">
			<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
				<span>Loreum ipsum</span>
				<h1 class="display-3 fw-bold mb-3">Protfolio page page</h1>
				<p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit tellus eu.
			</div>
		</div>
	</div>
</section>

<table class="table my-5 py-5 table-edit">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Adress</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>sahin</td>
      <td>Dhaka</td>
      <td>sahin@gmail.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-2 mb-lg-4">
			<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
				<span class="text-muted">Educational information</span>
				<h2 class="display-5 fw-bold">Educational information</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="card border-0 mb-3">
			<div class="card-body bg-light text-center py-4">
				<div class="row align-items-center">
					<div class="col-md-3">
						<h5 class="fw-bold mb-0">Basic</h5>
						<div class="display-3 fw-bold mt-1">
							SSC
						</div>
						<div>
							Monthly
						</div>
					</div>
					<div class="col-md-3">
						<ul class="list-unstyled mt-4 mt-md-3">
							<li class="mb-3">1 Domain</li>
							<li class="mb-3">1,000 Visitors</li>
							<li class="mb-3">24/7 Support</li>
						</ul>
					</div>
					<div class="col-md-3">
						<ul class="list-unstyled mt-3">
							<li class="mb-3">Free Control Panel</li>
							<li class="mb-3">Free 1-Click Installs</li>
							<li class="mb-3">Free Let's Encrypt</li>
						</ul>
					</div>
					<div class="col-md-3">
						<a class="btn btn-primary btn-lg" href="">Get Started</a>
					</div>
				</div>
			</div>
		</div>
		<div class="card border-0 mb-3">
			<div class="card-body bg-light text-center py-4">
				<div class="row align-items-center">
					<div class="col-md-3">
						<h5 class="fw-bold mb-0">Standard</h5>
						<div class="display-3 fw-bold mt-1 text-primary">
							HSC
						</div>
						<div>
							Monthly
						</div>
					</div>
					<div class="col-md-3">
						<ul class="list-unstyled mt-4 mt-md-3">
							<li class="mb-3">10 Domains</li>
							<li class="mb-3">10,000 Visitors</li>
							<li class="mb-3">24/7 Support</li>
						</ul>
					</div>
					<div class="col-md-3">
						<ul class="list-unstyled mt-3">
							<li class="mb-3">Free Control Panel</li>
							<li class="mb-3">Free 1-Click Installs</li>
							<li class="mb-3">Free Let's Encrypt</li>
						</ul>
					</div>
					<div class="col-md-3">
						<a class="btn btn-primary btn-lg" href="">Get Started</a>
					</div>
				</div>
			</div>
		</div>
		<div class="card border-0 mb-3">
			<div class="card-body bg-light text-center py-4">
				<div class="row align-items-center">
					<div class="col-md-3">
						<h5 class="fw-bold mb-0">Pro</h5>
						<div class="display-3 fw-bold mt-1">
							CSE
						</div>
						<div>
							Monthly
						</div>
					</div>
					<div class="col-md-3">
						<ul class="list-unstyled mt-4 mt-md-3">
							<li class="mb-3">Unlimited Domains</li>
							<li class="mb-3">Unlimited Visitors</li>
							<li class="mb-3">24/7 Support</li>
						</ul>
					</div>
					<div class="col-md-3">
						<ul class="list-unstyled mt-3">
							<li class="mb-3">Free Control Panel</li>
							<li class="mb-3">Free 1-Click Installs</li>
							<li class="mb-3">Free Let's Encrypt</li>
						</ul>
					</div>
					<div class="col-md-3">
						<a class="btn btn-primary btn-lg" href="">Get Started</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-2 mb-lg-4">
			<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
				<span class="text-muted">Raving Fans</span>
				<h2 class="display-5 fw-bold">Speacial Skills</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="row g-xl-5 py-4">
			<div class="col-md-4">
				<div class="mx-0 mx-xl-3 py-3 py-md-0 text-center">
					<div class="text-primary mb-md-4 mb-2">
						<svg class="bi bi-quote" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
						<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"></path></svg>
					</div>
					<p class="mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
					<h5 class="mb-1 fw-bold">Graphic Designe</h5>
					<div class="text-muted">
						Graphic Designer
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="mx-0 mx-xl-3 py-3 py-md-0 text-center">
					<div class="text-primary mb-md-4 mb-2">
						<svg class="bi bi-quote" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
						<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"></path></svg>
					</div>
					<p class="mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
					<h5 class="mb-1 fw-bold">fogma</h5>
					<div class="text-muted">
						fogma
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="mx-0 mx-xl-3 py-3 py-md-0 text-center">
					<div class="text-primary mb-md-4 mb-2">
						<svg class="bi bi-quote" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
						<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"></path></svg>
					</div>
					<p class="mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
					<h5 class="mb-1 fw-bold">github</h5>
					<div class="text-muted">
					github
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="py-5 modalsec">
<div class="modalDiv">
	<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content modalpic">
      
      <div>
        <img src="./image/p4.jpg" alt="">
      </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">Send message</button>
      </div>
    </div>
  </div>
</div>
</section>

<section class="py-5">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-6 order-2 order-lg-1">
				<div class="row g-3">
					<div class="col-sm-6">
						<div class="card text-center border-0 bg-light">
							<div class="card-body px-4 py-4">
								<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="data:image/jpeg;base64,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"></div>
								<h5 class="fw-bold">John Doe</h5>
								<div class="text-muted">
									Programmer
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="card text-center border-0 bg-light">
							<div class="card-body px-4 py-4">
								<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="data:image/jpeg;base64,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"></div>
								<h5 class="fw-bold">John Doe</h5>
								<div class="text-muted">
									Graphic Designer
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="card text-center border-0 bg-light">
							<div class="card-body px-4 py-4">
								<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ-eOO09YyHM_j24WUwEoE8Vd3gvdI55IjzA&s"></div>
								<h5 class="fw-bold">John Doe</h5>
								<div class="text-muted">
									Programmer
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="card text-center border-0 bg-light">
							<div class="card-body px-4 py-4">
								<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9U_c5cI4iHSsKXXvNHc6_aRv4kgk3abVsDw&s"></div>
								<h5 class="fw-bold">John Doe</h5>
								<div class="text-muted">
									HR Manager
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6 order-1 order-lg-2">
				<div class="ms-lg-5 mb-5">
					<span class="text-muted">Our Team</span>
					<h2 class="display-5 fw-bold mb-3 mb-xl-5">Meet the Team</h2>
					<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
					<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
				</div>
			</div>
		</div>
	</div>
</section>

More Examples

Personal Biography Section

Author:
Shahriar Noyon

5 months ago

637

v.4.6
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

2.1k

v.5.3
Restaurant Reservation section

Author:
Creative Araf

3 months ago

230

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

2 years ago

9.2k

v.4.6
E-Commerce Contact Section

Author:
Creative Araf

3 months ago

344

v.5.3
E-Commerce Product Page

Author:
Creative Araf

3 months ago

416

v.5.3
Restaurant About Page

Author:
Creative Araf

3 months ago

253

v.5.3
Skills & Expertise

Author:
Shahriar Noyon

5 months ago

415

v.4.6
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

2 years ago

8.5k

v.5.3
Our Existing Clients Section

Author:
Shahriar Noyon

5 months ago

917

v.4.6
Home Page of portfolio (WDD)

Author:
sajid taz

4 months ago

728

v.4.6
Restaurant Home Page

Author:
Creative Araf

3 months ago

232

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent