Page Comparison

...

Code Block

<div class="container">
    <div class="row  align-items-start justify-content-lg-evenly">
        <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=     <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      <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      <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      <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      <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=     <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 justify-content-between">
        <div class="col col mx-3">-12 col-lg-6 col-xl-4">
        <div class="mb-43">
        <h4 class="visible"><a href="#">Chandler-Gilbert<br>Community Gilbert<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.<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 mx-3col-12 col-lg-6 col-xl-4">
        <div class="mb-43">
        <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>
 AZ 85225</p>      Avondale, <p classAZ 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">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 class="col mx-3">       <div class="mb-4">col col-12 col-lg-6 col-xl-4">
        <div class="mb-3">
        <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">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>
    href="#">Theatre</a></p>
      </div>
    </div>
  </div>
</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-center"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-4 justify-content-center5">
      <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-4 justify-content-center5">
      <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>

...

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>

...

Versions Compared

Old Version 36

New Version Current

Key

College Contact Design B