Bootstrap Components and Utilities¶
Bootstrap provides many utilities and components you can use when customizing Evennia’s web presence. We’ll go over a few examples here that you might find useful.
Bootstrap provides base styles for your site. These can be customized through CSS, but the default styles are intended to provide a consistent, clean look for sites.
Most elements can be styled with default colors. Take a look at the documentation to learn more about these colors - suffice to say, adding a class of text-* or bg-*, for instance, text-primary, sets the text color or background color.
Simply adding a class of ‘border’ to an element adds a border to the element. For more in-depth info, please read the documentation on borders..
<span class="border border-dark"></span>
You can also easily round corners just by adding a class.
<img src="..." class="rounded" />
Cards provide a container for other elements that stands out from the rest of the page. The “Accounts”, “Recently Connected”, and “Database Stats” on the default webpage are all in cards. Cards provide quite a bit of formatting options - the following is a simple example, but read the documentation or look at the site’s source for more.
<div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Fancy, isn't it?</p> <a href="#" class="card-link">Card link</a> </div> </div>
Jumbotrons are useful for featuring an image or tagline for your game. They can flow with the rest of your content or take up the full width of the page - Evennia’s base site uses the former.
<div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-3">Full Width Jumbotron</h1> <p class="lead">Look at the source of the default Evennia page for a regular Jumbotron</p> </div> </div>