Versions Compared

Old Version 32

changes.mady.by.user Matthew Gary Page

Saved on

compared with

New Version Current

changes.mady.by.user Matthew Gary Page

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

College Contact Design A - Full Width

...

Code Block
<div class="container">
    <div class="row  align-items-start justify-content-lg-evenly">
        <div class="col-12 col mx-3-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>CommunityGilbert<br>
            Community College</a></h4>
            <p class="mb-0 visible">2626 E. Pecos Rd.<br>Chandler<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 mx-3">-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>Estrella Mountain<br>
            Community College</a></h4>
            <p class="mb-0 visible">2626>3000 EN. PecosDysart Rd.<br>Chandler<br>
            Avondale, AZ 85225<85323</p>
            <p class="mb-0">Mike Curtis</p>
            <p class="mb-0"><a href="mailto:mike.curtis@cgc.edu<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 mx-3-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>GateWay<br>
            Community College</a></h4>
            <p class="mb-0 visible">2626>108 EN. Pecos40th Rd.<br>ChandlerSt.<br>
            Phoenix, AZ 85225<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

...

Code Block
<div class="container">
    <div class="row align-items-start justify-content-lg-evenly">
    -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-sm-4 col-md-312 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>
Info

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

...

Code Block
<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-4 justify-content-center5">
      <p><a href="#"><span class="max-width: 250px;">
      <img class="img-responsive" 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 col-sm-4 col-md-3 mx-3 d-flex align-self-center justify-content-center">
      <div class="mb-4 justify-content-center5">
      <p><a href="#"><span class="max-width: 250px;">
      <img class="img-responsive" 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 col-sm-4 col-md-3 mx-3 d-flex align-self-center justify-content-center">
      <div class="mb-4 justify-content-center5">
      <p><a href="#"><span class="max-width: 250px;">
      <img class="img-responsive" 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>

...

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>

...