The main section
All of the admin pages are going to be split in two columns. The left column will contain the sidebar menu that will be common across all pages, while the right column’s content will be specific to the current page.
Following the navbar
, you can use Bulma’s section
element to wrap your main content:
<section
class=
"section"
>
<!-- The main content of the page -->
</section>
This provides the main content of the page some space, preventing it from reaching the edges of the viewport. You can now define your two-column layout.
Within this section
, add the following:
<div
class=
"columns"
>
<div
class=
"column is-4-tablet is-3-desktop is-2-widescreen"
>
<!-- The sidebar -->
</div>
<div
class=
"column"
>
<!-- The right part, specific to each page -->
</div>
</div>
Just like the login page, the first column will have a different size for each...