<section class="pb-20 bg-dark overflow-hidden">
<img class="img-fluid w-100l" src="yofte-assets/elements/line-content.svg" alt="">
<div class="container">
<span class="text-white fw-bold">Online shopping</span>
<h1 class="mt-4 mb-16 text-white">How to improve online store?</h1>
<div class="position-relative mx-n6 mb-20" style="height: 384px;">
<div class="position-absolute top-50 translate-middle-y start-0 end-0 w-100 bg-info" style="height: 80%;"></div>
<img class="position-relative w-100 img-fluid px-6" style="height: 384px; object-fit: cover;" src="yofte-assets/images/placeholder-banner.png" alt="">
</div>
<div class="mw-3xl mx-auto">
<h4 class="mb-12 fw-normal text-white">This morning, platea dictumst nec nunc. In hac habitasse, general, dignissim accumsan just. Suspendisse vitae ligula convallis, porta tortor et, finibus neque.</h4>
<p class="mb-10 lead text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat nisl quis justo egestas, nec eleifend erat egestas. Curabitur purus neque, tincidunt ac malesuada nec, ornare non odio. Nulla nec lorem sed purus semper porta vel sit amet sem. Nunc placerat non turpis eu molestie. Nam consectetur lacus ut lacus elementum dapibus. Etiam vehicula ipsum ac dolor tristique placerat. In hac habitasse platea dictumst.</p>
<p class="lead text-secondary">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis est quis venenatis dignissim. Maecenas a sem eros. Quisque hendrerit vitae libero non porta. Maecenas quis sem et nulla pellentesque accumsan. Proin blandit bibendum orci, a aliquam augue sagittis sed. Quisque pharetra ut quam eget varius. Morbi nisi nunc, ultricies id ligula id, feugiat eleifend est. Etiam metus sem, ornare vitae porta vel, porta a mauris. Fusce dapibus egestas lorem eu tincidunt. Quisque lobortis placerat placerat. Donec eget lectus blandit ex pellentesque iaculis. Proin aliquam vulputate arcu et blandit. Duis sed lobortis mauris, vel porttitor lectus. Pellentesque vel ultrices odio.</p>
</div>
</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
Content makes the page. In our Bootstrap content components, we provide you with many possible variations of content presentation. Regardless of its type and length, you'll find a way to show what's important to your audience.
Browse the Bootstrap navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.
See all variations of Bootstrap navigation components and the code underneath them in Shuffle Editor.
Component #1
