...
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-smmd-46 col-md-3 mx-3lg-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-12 col-smmd-46 col-md-3 mx-3">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-12 col-smmd-46 col-md-3 mx-3lg-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-center"> -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-sm-4 col-md-3 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. |
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> |
...