...
| Code Block |
|---|
<div class="mb-4"> <h4 class="visible"><a href="<!-- college url -->"><!-- college name --></a></h4> <p class="mb-0 visible"><!-- college address --></p> <p class="mb-0"><!-- blank field --></p> <p class="mb-0"><a href="mailto:<!-- blank field -->"><!-- blank field --></a></p> <p class="mb-0"><!-- blank field --></p> <p class="mb-0"><!-- blank field --></p> <p class="mb-0"><a href="<!-- blank url -->"><!-- blank field --></a></p> <p class="mb-0"><a href="<!-- blank url -->"><!-- blank field --></a> | <a href="<!-- blank url -->"><!-- blank field --></a> | <a href="<!-- blank url -->"><!-- blank field --></a> | <a href="<!-- blank url -->"><!-- blank field --></a></p> </div> |
You can add/remove fields as needed. Replace <!-- blank field --> with the desired content. To hide/unhide specific elements, use either the .visible utility class to unhide or the .hidden utility class to hide.
To create a grid, use the below code snippet. Add or remove as many columns as needed. Use flexbox alignment utilities to vertically and horizontally align columns. Below is an example of a three column grid layout.
| Code Block |
|---|
<div class="container">
<div class="row align-items-start">
<div class="col"><!-- column 1 --></div>
<div class="col"><!-- column 2 --></div>
<div class="col"><!-- column 3 --></div>
</div>
</div> |
College Contact Design B
...
| Code Block |
|---|
<div class="mb-4"> <p><a href="<!-- blank field -->"> <img src="<!-- blank field -->" width="<!-- blank field -->" alt="<!-- blank field -->" loading="lazy"> </a></p> <p class="mb-0"><a href="<!-- blank field -->">Download Logo</a></p> </div> |
...