Hello there, this is a demo for a page. The entire idea is that we can use the offpanel for a menu. From there it should not be hard to think out therest of the page. The mnu does not scroll like it should. But it is an idea, a setup, an example. From there you can think about what you do want it to do.
With that as the basics, the setup is the same on desktop as it is on mobile. Why, most of us use mobile. Lets just embrace the thinking.Also it makes the website usage easier as it is the same on mobile as it is on desktop. At least the menu usage.
For now, lets just add some icons so it looks nice.
Well actually, thats it. I also added a quick navbar on top, just to see what you can do.
If you want to see some more blocks, you can find them here
If you want to see more about this? The source code is on the bottom, and the packages used are the basic packages.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam harum illum in inventore molestiae nobis, officiis porro similique. Asperiores dolorem exercitationem facere inventore iste libero modi molestias nobis, placeat sed!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam doloribus ea eaque, eligendi enim est excepturi, fugiat harum impedit itaque laudantium mollitia natus nihil nobis nulla totam unde voluptatum.
Tue Oct 25 2022 01:04:01 GMT+0200 (Central European Summer Time)
Est quia eos excepturi alias et voluptatibus quasi accusantium enim. Qui similique ut. Veritatis provident aut. Veniam sit aliquid eos libero perferendis delectus.
Tue Oct 25 2022 12:39:24 GMT+0200 (Central European Summer Time)
Et voluptatem excepturi voluptatum repellendus sint voluptatem. Perspiciatis eveniet quia. Officia enim maxime necessitatibus ea quaerat. Accusantium at et ad non cupiditate ipsum modi expedita. Culpa corrupti optio.
Tue Oct 25 2022 21:09:19 GMT+0200 (Central European Summer Time)
Aut et unde nesciunt hic et. Officia placeat exercitationem ducimus qui facere saepe explicabo et. Facilis dicta eaque ab alias et. Ut blanditiis est sed suscipit modi ab dolore. Expedita delectus mollitia debitis consequatur est ipsa voluptas nesciunt laudantium.
Tue Oct 25 2022 16:04:23 GMT+0200 (Central European Summer Time)
Cumque architecto nesciunt quaerat sit voluptatum ea molestias. Qui molestiae omnis natus mollitia. Et laudantium repellat repellat ut voluptatem quibusdam quidem error sint. Et quia sunt. Enim nostrum aut sequi modi voluptatem deleniti quia nam. Incidunt autem temporibus minus odio vitae eum consectetur ipsam fuga.
Tue Oct 25 2022 07:02:55 GMT+0200 (Central European Summer Time)
Qui vel occaecati corrupti et odio. Facere magni cupiditate magni eos quia enim temporibus optio quam. Iste eaque est qui distinctio facilis quibusdam eum. Voluptas aut eos. Rerum odio et ipsa quidem laboriosam.
Tue Oct 25 2022 17:38:59 GMT+0200 (Central European Summer Time)
Est quisquam sint sed veniam. Labore officiis voluptate aspernatur porro expedita ea. Sequi quis veniam nam ex nam repudiandae. Ipsam consequatur nobis labore suscipit maiores. Itaque rerum repellat fugiat reiciendis.
Tue Oct 25 2022 10:41:56 GMT+0200 (Central European Summer Time)
Eum qui ipsum illo similique. Et consequatur maxime sit omnis hic sit nostrum aliquam optio. Excepturi incidunt et blanditiis dolorem ea. Voluptas sed magni dolores neque.
Tue Oct 25 2022 18:24:30 GMT+0200 (Central European Summer Time)
Dicta voluptates aspernatur dolore veritatis repellat itaque voluptatum quod dolorem. Impedit similique sed eius tenetur perferendis nisi eveniet cum. Quis aliquid et cupiditate voluptatibus neque eos voluptate dicta illo. Labore sit adipisci. Est ducimus dolor. Expedita exercitationem culpa.
<div class="min-vh-100">
<div class="py-3 container" id="panel-intro">
<nav class="navbar bg-primary rounded ">
<div class="container-fluid">
<a class="navbar-brand text-light" href="#">
<i class="fa-solid fa-fw fa-shield-cat"></i>
Side menu
</a>
<div class="d-flex">
<a href="#" class="me-3 btn btn-secondary rounded">
<i class="fa-solid fa-fw fa-user-astronaut"></i>
<span class="d-none d-md-inline">This is you</span>
</a>
<form class="d-flex" role="search">
<input class="form-control me-2 d-none d-md-inline" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">
<i class="fa-solid fa-fw fa-search"></i>
</button>
</form>
</div>
</div>
</nav>
</div>
<div class="py-3 container">
<h2>Intro</h2>
<p>
Hello there, this is a demo for a page. The entire idea is that we can use the offpanel for a menu. From
there it should not be hard to think out therest of the page. The mnu does not scroll like it should. But it
is an idea, a setup, an example. From there you can think about what you do want it to do.
</p>
<p>
With that as the basics, the setup is the same on desktop as it is on mobile. Why, most of us use mobile.
Lets just embrace the thinking.Also it makes the website usage easier as it is the same on mobile as it is
on desktop. At least the menu usage.
</p>
<p>
For now, lets just add some icons so it looks nice.
</p>
</div>
<div class="bg-light py-5">
<div class="container ">
<div class="row row-cols-2 row-cols-md-4 g-4">
<div class="col">
<div class="bg-success text-light text-center py-5 rounded shadow">
<i class="fa-solid fa-4x fa-dumpster-fire"></i>
</div>
</div>
<div class="col">
<div class="bg-warning text-light text-center py-5 rounded shadow">
<i class="fa-solid fa-4x fa-dice"></i>
</div>
</div>
<div class="col">
<div class="bg-danger text-light text-center py-5 rounded shadow">
<i class="fa-solid fa-4x fa-paint-roller"></i>
</div>
</div>
<div class="col">
<div class="bg-info text-light text-center py-5 rounded shadow">
<i class="fa-solid fa-4x fa-kiwi-bird"></i>
</div>
</div>
</div>
</div>
</div>
<div class="py-3 container">
<p>
Well actually, thats it. I also added a quick navbar on top, just to see what you can do.
</p>
<p>
If you want to see some more blocks, you can find them
<a href="/bootstrap-blocks/">
<i class="fas fa-box-tissue"></i> here
</a>
</p>
<p class="lead">
If you want to see more about this? The source code is on the bottom, and the packages used are the basic
packages.
</p>
</div>
</div>
<div class="min-vh-100 bg-dark text-light">
<div class="py-3 container" id="panel-text">
<h2>Page with text</h2>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam harum illum in inventore molestiae nobis,
officiis porro similique. Asperiores dolorem exercitationem facere inventore iste libero modi molestias
nobis, placeat sed!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam doloribus ea eaque, eligendi enim est
excepturi, fugiat harum impedit itaque laudantium mollitia natus nihil nobis nulla totam unde voluptatum.
</p>
</div>
</div>
<div class="min-vh-100 bg-light ">
<div class="py-3 container" id="panel-news">
<h2>News</h2>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Security withdrawal New</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 01:04:01 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Est quia eos excepturi alias et voluptatibus quasi accusantium enim. Qui similique ut. Veritatis provident aut. Veniam sit aliquid eos libero perferendis delectus.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Steel emulation</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 12:39:24 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Et voluptatem excepturi voluptatum repellendus sint voluptatem. Perspiciatis eveniet quia. Officia enim maxime necessitatibus ea quaerat. Accusantium at et ad non cupiditate ipsum modi expedita. Culpa corrupti optio.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Djibouti</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 21:09:19 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Aut et unde nesciunt hic et. Officia placeat exercitationem ducimus qui facere saepe explicabo et. Facilis dicta eaque ab alias et. Ut blanditiis est sed suscipit modi ab dolore. Expedita delectus mollitia debitis consequatur est ipsa voluptas nesciunt laudantium.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Savings</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 16:04:23 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Cumque architecto nesciunt quaerat sit voluptatum ea molestias. Qui molestiae omnis natus mollitia. Et laudantium repellat repellat ut voluptatem quibusdam quidem error sint. Et quia sunt. Enim nostrum aut sequi modi voluptatem deleniti quia nam. Incidunt autem temporibus minus odio vitae eum consectetur ipsam fuga.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">feed Rustic white</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 07:02:55 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Qui vel occaecati corrupti et odio. Facere magni cupiditate magni eos quia enim temporibus optio quam. Iste eaque est qui distinctio facilis quibusdam eum. Voluptas aut eos. Rerum odio et ipsa quidem laboriosam.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">hub Brazilian contingency</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 17:38:59 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Est quisquam sint sed veniam. Labore officiis voluptate aspernatur porro expedita ea. Sequi quis veniam nam ex nam repudiandae. Ipsam consequatur nobis labore suscipit maiores. Itaque rerum repellat fugiat reiciendis.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Extensions calculate California</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 10:41:56 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Eum qui ipsum illo similique. Et consequatur maxime sit omnis hic sit nostrum aliquam optio. Excepturi incidunt et blanditiis dolorem ea. Voluptas sed magni dolores neque.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h4 class="card-title">cross-platform users</h4>
<p class="card-subtitle mb-2 text-muted">
<small>Tue Oct 25 2022 18:24:30 GMT+0200 (Central European Summer Time)</small>
</p>
<div class="card-text flex-grow-1">
<p>Dicta voluptates aspernatur dolore veritatis repellat itaque voluptatum quod dolorem. Impedit similique sed eius tenetur perferendis nisi eveniet cum. Quis aliquid et cupiditate voluptatibus neque eos voluptate dicta illo. Labore sit adipisci. Est ducimus dolor. Expedita exercitationem culpa.</p>
</div>
<div>
<button class="btn btn-primary">More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="main-menu" aria-labelledby="main-menu-label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="main-menu-label">Main menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#main-menu" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="list-group list-group-flush" data-bs-dismiss="offcanvas" data-bs-target="#main-menu">
<a href="#panel-intro" class="list-group-item">
<i class="fa-solid fa-fw fa-shield-cat"></i>
Intro
</a>
<a href="#panel-text" class="list-group-item">
<i class="fa-solid fa-fw fa-align-justify"></i>
Page with text
</a>
<a href="#panel-news" class="list-group-item">
<i class="fa-solid fa-fw fa-newspaper"></i>
News
</a>
<a href="#" class="list-group-item">
<i class="fa-solid fa-fw fa-dice-one"></i>
More menu items?
</a>
<a href="#" class="list-group-item">
<i class="fa-solid fa-fw fa-dice-two"></i>
You can place
</a>
<a href="#" class="list-group-item">
<i class="fa-solid fa-fw fa-dice-three"></i>
them here
</a>
</div>
<div class="p-3 bg-light">
<h3>Aliquam corporis</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis est impedit ipsa magni maxime,
modi neque, obcaecati perspiciatis porro quaerat quos reiciendis suscipit totam voluptate voluptates
voluptatibus! Ducimus, quos.
</div>
<div class="p-3">
<h3>Ab aliquam</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias cupiditate delectus dolorum, enim eos est et
ex explicabo illum impedit incidunt itaque laborum neque nostrum possimus quis recusandae sunt
vel?
</div>
<div class="p-3">
<a href="https://github.com/disjfa/bootstrap-blocks" class="btn btn-outline-secondary">
<i class="fab fa-github"></i>
Github
</a>
</div>
</div>
</div>
<div class="fixed-bottom p-3 text-end">
<button class="btn btn-outline-secondary btn-lg " type="button" data-bs-toggle="offcanvas" data-bs-target="#main-menu" aria-controls="main-menu">
<i class="fa-solid fa-bars"></i>
</button>
</div>