Main container Beets Exclusive

About

It is in the #main-container you main page is going. It doesn't have any styling oher than setting a flexbox, height, width and spacing.

Inside of the #main-container you can insert a <div> width Bootstrap container classes to set the width of the page you would like. In the example below we use the .container-md to make the page width 100% on devices smaller than breakpoint medium. We also have .px-md-5 to have a gutter between the page content and the viewport/sidebar.

The max width of any .container{*} is by default 1200px. If you want another max width you can write your custom css for the <div> or have an inline style="max-width: 1234px;".

<main id="main-container">
    
    <div class="container-md px-md-5">
        ...
    </div>

</main>

Single page example

This is an example of a page that we think looks good but obviously you can go with whatever you like!

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Title of page</li>
    </ol>
</nav>

<h1 class="display-6 my-4">Title of page</h1>

<div class="card">
    <div class="card-body">	
    
        <h3 class="card-title">Section title</h3>
        
        <p class="card-text">Lorem ipsum dolor sit amet.</p>
        
        <h4 class="card-title">This is a title of a lower tier</h4>
        
        <p class="card-text">Lorem ipsum dolor sit amet.</p>
    
    </div>
</div>