Bootstrap & Evennia¶
The Layout System¶
<div class="container"> <!--- Your content here --> </div>
Full width containers take up the maximum width available to them - they’ll span across a wide-screen desktop or a smaller screen phone, edge-to-edge.
<div class="container-fluid"> <!--- This content will span the whole page --> </div>
The second part of the layout system is the grid. This is the bread-and-butter of the layout of Bootstrap - it allows you to change the size of elements depending on the size of the screen, without writing any media queries. We’ll briefly go over it - to learn more, please read the docs or look at the source code for Evennia’s home page in your browser.
Important! Grid elements should be in a .container or .container-fluid. This will center the contents of your site.
Bootstrap’s grid system allows you to create rows and columns by applying classes based on breakpoints. The default breakpoints are extra small, small, medium, large, and extra-large. If you’d like to know more about these breakpoints, please take a look at the documentation for them.
To use the grid system, first create a container for your content, then add your rows and columns like so:
<div class="container"> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 2 of 3 </div> <div class="col"> 3 of 3 </div> </div> </div>
This layout would create three equal-width columns.
To specify your sizes - for instance, Evennia’s default site has three columns on desktop and tablet, but reflows to single-column on smaller screens. Try it out!
<div class="container"> <div class="row"> <div class="col col-md-6 col-lg-3"> 1 of 4 </div> <div class="col col-md-6 col-lg-3"> 2 of 4 </div> <div class="col col-md-6 col-lg-3"> 3 of 4 </div> <div class="col col-md-6 col-lg-3"> 4 of 4 </div> </div> </div>
This layout would be 4 columns on large screens, 2 columns on medium screens, and 1 column on anything smaller.