College Contacts

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.

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.

College Contact Design A - Full Width

<div class="container">
    <div class="row  align-items-start justify-content-evenly">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="mb-4 mx-5 mx-md-3 mx-xl-5 mx-xxl-5">
            <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 hidden">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-12 col-md-6 col-lg-4">
            <div class="mb-4 mx-5 mx-md-3 mx-xl-5 mx-xxl-5">
            <h4 class="visible"><a href="#">Estrella Mountain<br>
            Community College</a></h4>
            <p class="mb-0 visible">3000 N. Dysart Rd.<br>
            Avondale, AZ 85323</p>
            <p class="mb-0">Mike Curtis</p>
            <p class="mb-0"><a href="<front>">mike.curtis@cgc.edu</a></p>
            <p class="mb-0">480-857-5188</p>
            <p class="mb-0 hidden">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-12 col-md-6 col-lg-4">
            <div class="mb-4 mx-5 mx-md-3 mx-xl-5 mx-xxl-5">
            <h4 class="visible"><a href="#">GateWay<br>
            Community College</a></h4>
            <p class="mb-0 visible">108 N. 40th St.<br>
            Phoenix, AZ 85034</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 hidden">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.

College Contact Design A - with Sidebar Menu

<div class="container">
    <div class="row align-items-start justify-content-between">
        <div class="col col-12 col-lg-6 col-xl-4">
        <div class="mb-3">
        <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="<front>">finaid@estrellamountain.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 col-12 col-lg-6 col-xl-4">
        <div class="mb-3">
        <h4 class="visible"><a href="#">Estrella Mountain<br>
        Community College</a></h4>
        <p class="mb-0 visible">3000 N. Dysart Rd.<br>
        Avondale, AZ 85323</p>
        <p class="mb-0">Mike Curtis</p>
        <p class="mb-0"><a href="<front>">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 col-12 col-lg-6 col-xl-4">
        <div class="mb-3">
        <h4 class="visible"><a href="#">GateWay<br>
        Community College</a></h4>
        <p class="mb-0 visible">108 N. 40th St.<br>
        Phoenix, AZ 85034</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>

If text starts to overflow its content box. Use the word-break css property. See below for an example.
<a style="word-break: break-all;" href="mailto:thomas.washington@domail.maricopa.edu">thomas.washington@domail.maricopa.edu</a>

College Contact Design B

<div class="container">
  <div class="row align-items-start justify-content-lg-evenly">
    <div class="col mx-3 d-flex align-self-center justify-content-center">
      <div class="mb-5">
      <p><a href="#"><span class="max-width: 250px;">
      <img src="https://www.cgc.edu/themes/custom/cgc/images/logo.svg" width="250" alt="Chandler-Gilbert Community College" loading="lazy">
      </span></a></p>
      <p class="mb-0 d-flex justify-content-center"><a href="#">Download Logo</a></p>
      </div>
    </div>
    <div class="col mx-3 d-flex align-self-center justify-content-center">
      <div class="mb-5">
      <p><a href="#"><span class="max-width: 250px;">
      <img src="https://www.cgc.edu/themes/custom/cgc/images/logo.svg" width="250" alt="Chandler-Gilbert Community College" loading="lazy">
      </span></a></p>
      <p class="mb-0 d-flex justify-content-center"><a href="#">Download Logo</a></p>
      </div>
    </div>
    <div class="col mx-3 d-flex align-self-center justify-content-center">
      <div class="mb-5">
      <p><a href="#"><span class="max-width: 250px;">
      <img src="https://www.cgc.edu/themes/custom/cgc/images/logo.svg" width="250" alt="Chandler-Gilbert Community College" loading="lazy">
      </span></a></p>
      <p class="mb-0 d-flex justify-content-center"><a href="#">Download Logo</a></p>
      </div>
    </div>
  </div>
</div>

Create a Grid Layout

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.

For more information on Flexbox Utilities or creating Grid Layouts, please visit the Bootstrap 5 website for further documentation.