Below are code templates for adding college contacts throughout your CFW3 college site. These code templates will work with both basic and landing pages. Copy and Paste the below code into the CKEditor screen to create the below code templates.
| Info |
|---|
Make sure CKEditor is currently set to Full HTML text format and the View Source button is selected before copying and pasting the below code. |
| Code Block |
|---|
<div class="container">
<div class="row align-items-start justify-content-lg-evenly">
<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> |
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.
| 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> |
| 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> |
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 justify-content-center">
<div class="col col-sm-4 col-md-3 mx-3"><!-- column 1 --></div>
<div class="col col-sm-4 col-md-3 mx-3"><!-- column 2 --></div>
<div class="col col-sm-4 col-md-3 mx-3"><!-- column 3 --></div>
</div>
</div> |
| Info |
|---|
For more information on Flexbox Utilities or creating Grid Layouts, please visit the Bootstrap 5 website for further documentation. |