Bootstrap grid layout
[Unsupported Content]
[Unsupported Content]
<aside> (lowercase!) is just an HTML5 semantic tag – like <header>, <footer>, <main>, etc.
It’s used for content that is related but not the main flow of the page. Typical examples:
- Sidebars
- Pull quotes
- Extra info boxes
- Related links / “See also” sections
So in your case, your right-hand “secondary” block (commissioner, shows, credits) is perfect for an <aside>.
Example:
<div class="row"> <div class="col-md" id="main-content"> <!-- main project content --> </div>
<aside class="col-md-auto" id="side-info"> <!-- secondary info: commissioner, shows, credits --> </aside></div>If you prefer, you can absolutely just use a <div>:
<div class="col-md-auto" id="side-info"> ...</div>Functionally in the browser they behave almost the same; <aside> just tells browsers, screen readers, and other tools: “this is secondary/side content.”
i want to keep the li but remove the indent
To keep the <li> elements but remove the left indent, you should apply Bootstrap’s list-unstyled and optionally reset margin/padding.
✅ Easiest solution (Bootstrap way)
Section titled “✅ Easiest solution (Bootstrap way)”<ul class="list-unstyled mb-0"> <li>Item</li> <li>Another</li></ul>list-unstyled removes:
- bullets
- left padding
- indentation
This is usually enough.
✅ If you still see indentation (some themes override it)
Section titled “✅ If you still see indentation (some themes override it)”Add Bootstrap utilities for margin/padding reset:
<ul class="list-unstyled m-0 p-0"> <li class="mb-2"> {{ item.role }} </li></ul>✅ If you want only li indent removed, but keep bullets
Section titled “✅ If you want only li indent removed, but keep bullets”You can keep bullets but remove indent like this:
<ul class="ps-0"> <li class="ms-0">Keep bullets, no indent</li></ul>ps-0→ remove left padding on the<ul>ms-0→ remove left margin on<li>
Summary
Section titled “Summary”| Want | Use |
|---|---|
| remove bullets + indent | class="list-unstyled" |
| remove indent only | class="ps-0" (and ms-0 on li if needed) |
| remove all spacing | class="m-0 p-0" |
If you paste one list (commissioner, shows, or credits), I can give you the exact cleaned-up line.