<section class="pb-5">
<nav class="navbar navbar-expand-lg navbar-light py-4">
<div class="container">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="bootstrap5-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#header01" aria-controls="header01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="header01">
<ul class="navbar-nav ms-auto mt-3 mt-lg-0 mb-3 mb-lg-0 me-4">
<li class="nav-item me-4"><a class="nav-link" href="#">About</a></li>
<li class="nav-item me-4"><a class="nav-link" href="#">Company</a></li>
<li class="nav-item me-4"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
</ul>
<div><a class="btn btn-primary" href="#">Contact Us</a></div>
</div>
</div>
</nav>
<div class="container pt-5">
<div class="row align-items-center mb-5">
<div class="col-12 col-md-10 col-lg-5 mb-5 mb-lg-0">
<h2 class="display-4 fw-bold mb-5">Take care of your performance every day.</h2>
<p class="lead text-muted mb-5">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
<div class="d-flex flex-wrap"><a class="btn btn-primary me-2 mb-2 mb-sm-0" href="#">Track your performance</a><a class="btn btn-outline-secondary mb-2 mb-sm-0" href="#">Learn more</a></div>
</div>
<div class="col-12 col-lg-6 offset-lg-1">
<img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
</div>
</div>
<div class="text-center d-none d-lg-block">
<button class="btn border rounded-circle" style="width: 56px;height: 56px">
<svg class="text-muted mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
</div>
</div>
</section>Framework
All Frameworks
UI Library
Plain 5
Bootstrap UI Components by Shuffle
Choose from 130 of ready-made UI components available in Shuffle Editor.
By subscribing to the editor, you get access to all of them.
The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.
