<section class="position-relative py-24 pt-lg-40 bg-light overflow-hidden">
<div class="container">
<div class="row mb-20">
<div class="col-12 col-lg-4 mb-16 mb-lg-0">
<div class="position-relative h-100 pt-20 pb-52 px-8 px-md-12 bg-white rounded">
<div class="mb-16 pb-5 border-bottom">
<h4 class="display-6 mb-0">Files</h4>
</div>
<div class="d-flex mb-14 align-items-center">
<img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt="">
<span class="ms-8">All inspirations</span>
</div>
<div class="d-flex mb-14 align-items-center">
<img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt="">
<span class="ms-8">Bathroom design</span>
</div>
<div class="d-flex align-items-center">
<img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt="">
<span class="ms-8">Songs</span>
</div>
<a class="position-absolute bottom-0 start-0 ms-12 mb-24 btn mt-auto btn-primary" href="#">All files</a>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="pt-20 pb-24 px-8 px-md-12 bg-white rounded">
<div class="d-sm-flex align-items-center justify-content-between mb-14 pb-5 border-bottom">
<h4 class="display-6 mb-4 mb-md-0">Teamwork</h4>
<select class="form-select rounded-1 py-1 ps-8" aria-label="New select example" style="max-width: max-content;">
<option selected="">New</option>
<option value="1">Old</option>
</select>
</div>
<div class="table-responsive pb-6 px-4 w-100 mb-16" style="width: min-content;">
<table class="table table-borderless mb-0" style="min-width: max-content;">
<thead></thead>
<tbody>
<tr class="align-middle">
<th class="pb-6" scope="row">
<div class="d-flex align-items-center pe-6 position-relative">
<div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div>
<img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt="">
<span class="ms-8">Bathroom design</span>
</div>
</th>
<td class="pb-6">
<div class="d-flex align-items-center px-12">
<img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt="">
<img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt="">
<a class="btn ms-3 p-0 text-secondary-light" href="#">
<svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
<path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
<defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
</svg>
</a>
</div>
</td>
<td class="pe-12 pb-6">
<span class="text-secondary">Today, 9:44 AM</span>
</td>
<td class="pb-6">
<a class="btn d-flex align-items-center p-0 text-success" href="#">
<svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
</svg>
<span class="ms-3">Details</span>
</a>
</td>
</tr>
<tr class="align-middle">
<th class="pb-6" scope="row">
<div class="d-flex align-items-center pe-6 position-relative">
<div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div>
<img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt="">
<span class="ms-8">Photos.zip</span>
</div>
</th>
<td class="pb-6">
<div class="d-flex align-items-center px-12">
<img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt="">
<img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt="">
<a class="btn ms-3 p-0 text-secondary-light" href="#">
<svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
<path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
<defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
</svg>
</a>
</div>
</td>
<td class="pe-12 pb-6">
<span class="text-secondary">Today, 9:44 AM</span>
</td>
<td class="pb-6">
<a class="btn d-flex align-items-center p-0 text-success" href="#">
<svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
</svg>
<span class="ms-3">Details</span>
</a>
</td>
</tr>
<tr class="align-middle">
<th scope="row">
<div class="d-flex align-items-center pe-6 position-relative">
<div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div>
<img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt="">
<span class="ms-8">Songs that feel like winter</span>
</div>
</th>
<td>
<div class="d-flex align-items-center px-12">
<img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt="">
<img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt="">
<a class="btn ms-3 p-0 text-secondary-light" href="#">
<svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
<path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
<defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
</svg>
</a>
</div>
</td>
<td class="pe-12">
<span class="text-secondary">Today, 9:44 AM</span>
</td>
<td>
<a class="btn d-flex align-items-center p-0 text-success" href="#">
<svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
</svg>
<span class="ms-3">Details</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mb-n4"><a class="btn mb-4 me-4 btn-primary" href="#">Sign in</a><a class="btn mb-4 btn-outline-dark" href="#">More Scores</a></div>
</div>
</div>
</div>
<a class="btn d-flex mx-auto align-items-center justify-content-center p-0" href="#" style="width: 136px; height: 136px; background-image: url('wrexa-assets/elements/circle-border-light.svg'); background-size: contain;">
<svg width="12" height="32" viewbox="0 0 12 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.3109 -2.9239e-07L5.3109 29.4165L0.974389 25.1693L-1.88224e-07 26.1236L6 32L12 26.1236L11.0256 25.1693L6.6891 29.4165L6.6891 -2.32147e-07L5.3109 -2.9239e-07Z" fill="#252525"></path>
</svg>
</a>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 53
- Banners 15
- Blog 56
- Call to action 95
- Careers 4
- Contact 38
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 43
- Features 132
- Footers 53
- Graphs 18
- HTTP codes 48
- Hero section 91
- How it works 43
- Logo clouds 72
- Modals 3
- Navbar 68
- Navigation (horizontal) 92
- Navigation (vertical) 6
- Newsletter 45
- Portfolio 39
- Pricing 43
- Projects 9
- Reviews 5
- Sign in / Sign up 71
- Stats 76
- Tables 57
- Team 41
- Testimonials 41
- Users 25
Tables are the daily bread of any business. In our resources you will find many different types of Bootstrap tables components, tailored for different applications. Whether it's users, transactions, packages, datasets - we have ready-made ideas and coded Tailwind components that you can use. You will present and compare data without boring users.
Choose from many variations of the Bootstrap components stats. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bootstrap website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Bootstrap components stats, code and our editor. Try the demo for free.
Component #6
Component #7
Component #8
Component #9
Component #10
