<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
<div class="container">
<div class="mw-6xl mx-auto mb-32">
<div class="mw-xl">
<span class="h6 text-primary">Our Works</span>
<h2 class="h3 text-white mt-10">More than 20 years in the game</h2>
</div>
</div>
</div>
<div class="d-flex px-4 px-md-0 justify-content-center position-relative">
<img class="d-none d-md-block img-fluid" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
<div class="flex-shrink-0 w-100 mw-2xl mw-lg-3xl mw-xl-5xl mw-xxl-6xl mx-8 mx-lg-16 mx-xxl-28 position-relative">
<img class="d-block w-100 img-fluid mb-12" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=80" alt="">
<div class="row">
<div class="col-12 col-md-9 col-xl-10 mb-6 mb-md-0">
<div class="position-relative pt-12 pb-16 px-6 px-sm-20 rounded bg-secondary">
<div class="position-absolute top-0 start-0 ms-20 translate-middle bg-secondary" style="width: 64px; height: 64px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
<h4 class="text-white mb-6">Experience design for your products</h4>
<p class="text-secondary-light mb-0">The brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="col-12 col-md-3 col-xl-2 text-end">
<button class="btn p-0 me-2 bg-primary d-inline-flex justify-content-center align-items-center text-white rounded-circle" style="width: 62px; height: 62px;">
<svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.84708 12.1077C7.05097 12.3133 7.05097 12.6436 6.84708 12.8476C6.64319 13.0517 6.31377 13.0525 6.10988 12.8476L0.152917 6.8708C-0.0509739 6.66673 -0.0509738 6.33645 0.152917 6.13087L6.10988 0.154027C6.31377 -0.0500387 6.64319 -0.0500386 6.84708 0.154027C7.05098 0.358848 7.05098 0.689887 6.84708 0.893952L1.4143 6.50121L6.84708 12.1077Z" fill="white"></path>
</svg>
</button>
<button class="btn p-0 bg-primary d-inline-flex justify-content-center align-items-center text-white rounded-circle" style="width: 62px; height: 62px;">
<svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.152917 0.894235C-0.0509742 0.688658 -0.0509742 0.358375 0.152917 0.15431C0.356808 -0.0497557 0.686228 -0.0505119 0.89012 0.15431L6.84708 6.13116C7.05097 6.33522 7.05097 6.6655 6.84708 6.87108L0.890119 12.8479C0.686227 13.052 0.356807 13.052 0.152916 12.8479C-0.0509753 12.6431 -0.0509753 12.3121 0.152916 12.108L5.5857 6.50074L0.152917 0.894235Z" fill="white"></path>
</svg>
</button>
</div>
</div>
</div>
<img class="d-none d-md-block img-fluid" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 43
- Applications 5
- Banner 15
- Blog 53
- Call to action 86
- Contact 28
- Contacts 5
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 39
- Features 118
- Footers 48
- Graphs 18
- HTTP codes 43
- Headers 86
- How it works 39
- Logo clouds 68
- Modals 3
- Navbar 68
- Navigation (horizontal) 80
- Navigation (vertical) 6
- Navigations 4
- Newsletter 41
- Portfolio 39
- Pricing 35
- Projects 9
- Reviews 5
- Sign in / Sign up 65
- Stats 71
- Tables 52
- Tables 5
- Team 35
- Testimonials 35
- Users 25
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.
