...
You can add/remove fields as needed. Replace the example content with the desired content. To hide/unhide specific elements, use either the .visible utility class to unhide or the .hidden utility class to hide.
College Contact Design A - with Sidebar Menu
...
| Code Block |
|---|
<div class="container">
<div class="row align-items-start">
<div class="col mx-3">
<div class="mb-4">
<h4 class="visible"><a href="#">Chandler-Gilbert<br>Community College</a></h4>
<p class="mb-0 visible">2626 E. Pecos Rd.<br>Chandler, AZ 85225</p>
<p class="mb-0">Mike Curtis</p>
<p class="mb-0"><a href="mailto:mike.curtis@cgc.edu">mike.curtis@cgc.edu</a></p>
<p class="mb-0">480-857-5188</p>
<p class="mb-0">Discord: [CGC] Advisor Mike#1872</p>
<p class="mb-0"><a href="#">Fine and Performing Arts</a></p>
<p class="mb-0"><a href="#">Arts</a> | <a href="#">Dance</a> | <a href="#">Music</a> | <a href="#">Theatre</a></p>
</div>
</div>
<div class="col mx-3">
<div class="mb-4">
<h4 class="visible"><a href="#">Chandler-Gilbert<br>Community College</a></h4>
<p class="mb-0 visible">2626 E. Pecos Rd.<br>Chandler, AZ 85225</p>
<p class="mb-0">Mike Curtis</p>
<p class="mb-0"><a href="mailto:mike.curtis@cgc.edu">mike.curtis@cgc.edu</a></p>
<p class="mb-0">480-857-5188</p>
<p class="mb-0">Discord: [CGC] Advisor Mike#1872</p>
<p class="mb-0"><a href="#">Fine and Performing Arts</a></p>
<p class="mb-0"><a href="#">Arts</a> | <a href="#">Dance</a> | <a href="#">Music</a> | <a href="#">Theatre</a></p>
</div>
</div>
<div class="col mx-3">
<div class="mb-4">
<h4 class="visible"><a href="#">Chandler-Gilbert<br>Community College</a></h4>
<p class="mb-0 visible">2626 E. Pecos Rd.<br>Chandler, AZ 85225</p>
<p class="mb-0">Mike Curtis</p>
<p class="mb-0"><a href="mailto:mike.curtis@cgc.edu">mike.curtis@cgc.edu</a></p>
<p class="mb-0">480-857-5188</p>
<p class="mb-0">Discord: [CGC] Advisor Mike#1872</p>
<p class="mb-0"><a href="#">Fine and Performing Arts</a></p>
<p class="mb-0"><a href="#">Arts</a> | <a href="#">Dance</a> | <a href="#">Music</a> | <a href="#">Theatre</a></p>
</div>
</div>
</div>
</div> |
College Contact Design B
...
| Code Block |
|---|
<div class="container">
<div class="row align-items-start justify-content-lg-evenly">
<div class="col col-sm-4 col-md-3 mx-3 d-flex align-self-center justify-content-center">
<div class="mb-4 justify-content-center">
<p><a href="#">
<img class="img-responsive" src="https://www.cgc.edu/themes/custom/cgc/images/logo.svg" width="250" alt="Chandler-Gilbert Community College" loading="lazy">
</a></p>
<p class="mb-0 d-flex justify-content-center"><a href="#">Download Logo</a></p>
</div>
</div>
<div class="col col-sm-4 col-md-3 mx-3 d-flex align-self-center justify-content-center">
<div class="mb-4 justify-content-center">
<p><a href="#">
<img class="img-responsive" src="https://www.cgc.edu/themes/custom/cgc/images/logo.svg" width="250" alt="Chandler-Gilbert Community College" loading="lazy">
</a></p>
<p class="mb-0 d-flex justify-content-center"><a href="#">Download Logo</a></p>
</div>
</div>
<div class="col col-sm-4 col-md-3 mx-3 d-flex align-self-center justify-content-center">
<div class="mb-4 justify-content-center">
<p><a href="#">
<img class="img-responsive" src="https://www.cgc.edu/themes/custom/cgc/images/logo.svg" width="250" alt="Chandler-Gilbert Community College" loading="lazy">
</a></p>
<p class="mb-0 d-flex justify-content-center"><a href="#">Download Logo</a></p>
</div>
</div>
</div>
</div> |
...