<section class="py-24 position-relative">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-sm-6 mx-auto col-lg-4 mb-20 mt-lg-0">
<ul class="list-unstyled mb-0">
<li class="d-flex align-items-center mb-6 mb-xl-10">
<a class="link-dark h2 text-decoration-none lh-sm" href="#">All</a>
<span class="d-flex align-items-center justify-content-center ms-4 mb-0 bg-primary-light fw-bold p-1 rounded-circle" style="width: 24px; height:24px; font-size: 12px;">41</span>
</li>
<li class="d-flex align-items-center mb-6 mb-xl-10">
<a class="link-primary h2 text-decoration-none lh-sm" href="#">Art Direction</a>
<span class="d-flex align-items-center justify-content-center ms-4 mb-0 bg-primary fw-bold p-1 rounded-circle text-primary-light" style="width: 24px; height:24px; font-size: 12px;">6</span>
</li>
<li class="d-flex align-items-center mb-6 mb-xl-10">
<a class="link-dark h2 text-decoration-none lh-sm" href="#">Branding</a>
<span class="d-flex align-items-center justify-content-center ms-4 mb-0 bg-primary-light fw-bold p-1 rounded-circle" style="width: 24px; height:24px; font-size: 12px;">4</span>
</li>
<li class="d-flex align-items-center mb-6 mb-xl-10">
<a class="link-dark h2 text-decoration-none lh-sm" href="#">Video</a>
<span class="d-flex align-items-center justify-content-center ms-4 mb-0 bg-primary-light fw-bold p-1 rounded-circle" style="width: 24px; height:24px; font-size: 12px;">12</span>
</li>
<li class="d-flex align-items-center mb-6 mb-xl-10">
<a class="link-dark h2 text-decoration-none lh-sm" href="#">Event</a>
<span class="d-flex align-items-center justify-content-center ms-4 mb-0 bg-primary-light fw-bold p-1 rounded-circle" style="width: 24px; height:24px; font-size: 12px;">3</span>
</li>
<li class="d-flex align-items-center">
<a class="link-dark h2 text-decoration-none lh-sm" href="#">Development</a>
<span class="d-flex align-items-center justify-content-center ms-4 mb-0 bg-primary-light fw-bold p-1 rounded-circle" style="width: 24px; height:24px; font-size: 12px;">16</span>
</li>
</ul>
</div>
<div class="col-12 col-lg-8">
<div class="d-md-flex flex-md-row justify-content-md-between justify-content-xl-end mw-md-xl mw-xl-none mx-auto me-lg-0">
<div class="d-flex flex-column align-items-center mb-16 mt-md-16 me-xl-32">
<div class="mb-16">
<img class="img-fluid" src="pstls-assets/images/portfolio/portfolio-1-room.jpg" alt="">
<h5 class="mb-2 mt-6 lh-lg">Lorem Ipsum Random Name</h5>
<p class="mb-0 text-uppercase text-light-dark" style="font-size: 12px;">Art direction</p>
</div>
<div>
<img class="img-fluid" src="pstls-assets/images/portfolio/portfolio-1-forest.jpg" alt="">
<h5 class="mb-2 mt-6 lh-lg">Lorem Ipsum Random Name</h5>
<p class="mb-0 text-uppercase text-light-dark" style="font-size: 12px;">Art direction</p>
</div>
</div>
<div class="d-flex flex-column align-items-center">
<div class="mb-16">
<img class="img-fluid" src="pstls-assets/images/portfolio/portfolio-1-design.jpg" alt="">
<h5 class="mb-2 mt-6 lh-lg">Lorem Ipsum Random Name</h5>
<p class="mb-0 text-uppercase text-light-dark" style="font-size: 12px;">Art direction</p>
</div>
<div>
<img class="img-fluid" src="pstls-assets/images/portfolio/portfolio-1-design2.jpg" alt="">
<h5 class="mb-2 mt-6 lh-lg">Lorem Ipsum Random Name</h5>
<p class="mb-0 text-uppercase text-light-dark" style="font-size: 12px;">Art direction</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-20 p-xl-40 p-md-32 position-absolute top-0 start-0 bg-success2-light" style="z-index: -1;"></div>
<div class="p-20 p-xl-40 p-md-32 position-absolute bottom-0 start-0 bg-secondary-light" style="z-index: -1;"></div>
<div class="p-20 p-xl-40 p-md-32 position-absolute top-0 end-0 bg-warning-light" style="z-index: -1;"></div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 5
- Application 38
- Banner 10
- Blog 43
- Call to action 75
- Contact 23
- Content 4
- Content 45
- Cookies 31
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 29
- Features 108
- Footer 27
- Footers 10
- Graphs 9
- HTTP codes 32
- Headers 75
- How it works 29
- Logo clouds 51
- Modals 3
- Navbar 40
- Navigation (horizontal) 63
- Navigation (vertical) 4
- Newsletter 31
- Portfolio 29
- Pricing 25
- Projects 9
- Reviews 5
- Sign in / Sign up 55
- Stats 45
- Tables 25
- Team 24
- Testimonials 25
- Users 8
Bootstrap components for portfolio will allow you to display previously completed work, case studies and experience. This is a key element in persuading clients, so make sure to give it the right setting.
On this subpage you can browse a variety of Bootstrap portfolio component themes that are available within our UI libraries. You will also find many other types of components that will be in the same style. Each of these libraries has been prepared by experienced designers along with our in-house team of developers.
Get access to all Bootstrap teams components, code and our editor. Try the demo for free.
Component #1
