Theme Template

Classes


The following are common classes that we use on the site. Some are from Bootstrap 3 and others are from Porto:

  • For margins and padding use: .(p|m)(l|t|r|b)?-(none|xs|sm|md|lg|xl|xlg)
    • Examples:
      • .p-none
      • .pl-xs
      • .pr-sm
      • .mb-xlg
      • .m-xl
  • For white text, use: .white
  • To center text, use: .text-center
  • To center a block, use: .center-block
  • To float images, use: .pull-left or .pull-right
  • Use Bootstrap 3 grid classes for columns (e.g. .col-md-9, .col-md-3)
  • Put Bootstrap 3 columns inside .row
  • To display none, use: .hide
  • Usually don't use a button tag. Instead add .btn to the a tag

Text


Heading H1 for page titles

Heading H2 for sections within a page

Heading H3 for sub-sections

Heading H4 use for paragraph titles

Heading H5 only for action buttons

Heading with a line

<div class="heading heading-border heading-middle-border">
    <h1>Heading <strong>H1</strong></h1>
</div>
Only use a heading border for sections, not for a page title

Body Text


Body text should be Roboto 17px #777. Bacon ipsum dolor amet drumstick pork belly andouille ham jowl. Boudin flank hamburger brisket pig. Meatloaf salami brisket, alcatra fatback tri-tip pig boudin sausage beef ribs bresaola capicola sirloin. Pork chop turducken chicken drumstick shank chuck beef ribs alcatra cupim boudin tongue hamburger andouille jerky shoulder.



Links should be applied to the text

Don't tell someone that they can find a specific page if they click here! It's super tacky.

If you want to link to a specific section of a different page (using the #hashtag in your href), make sure the destination tag is a header tag (<h1>,<h2>,<h3>, or <h4>) give it the id="hashtag" and the class="anchor". Here is an example below:

<a href="/to/page/destination#gotosection>Go to a section on another page</a>

<!-- On your destination page -->

<h2 id="gotosection" class="anchor">My Section</a>

Lists


  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.
  • Phasellus in risus quis lectus iaculis vulputate id quis nisl.
  • Fusce sit amet orci quis arcu vestibulum vestibulum sed.
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dui consectetur tellus ornare vehicula.</li>
    <li>Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
    <li>Fusce sit amet orci quis arcu vestibulum vestibulum sed.</li>
</ul>

Buttons

Primary Secondary Default Primary Secondary
<a href="#" class="btn btn-primary mr-xs mb-sm white">Primary</a> 
<a href="#" class="btn btn-secondary mr-xs mb-sm white">Secondary</a>
<a href="#" class="btn btn-borders btn-default mr-xs mb-sm">Default</a>
<a href="#" class="btn btn-borders btn-primary mr-xs mb-sm">Primary</a> 
<a href="#" class="btn btn-borders btn-secondary mr-xs mb-sm">Secondary</a>
Primary
<a href="#" class="btn btn-primary mr-xs mb-sm white"><h5>Primary</h5></a>
For quick action buttons wrap the text in an h5

Sidebar Buttons

Utah School Districts

<h3>Utah School Districts</h3>
<div class="btn-group-vertical btn-block">
    <p><a href="http://www.jordandistrict.org/" class="btn btn-lg btn-primary btn-borders btn-block" target="_blank">Jordan</a></p>
    <p><a href="http://www.wasatch.edu/site/default.aspx?PageID=1" class="btn btn-lg btn-primary btn-borders btn-block" target="_blank">Wasatch</a></p>
    <p><a href="http://alpineschools.org/" class="btn btn-lg btn-primary btn-borders btn-block" target="_blank">Alpine</a></p>
    <p><a href="http://www.provo.edu/" class="btn btn-lg btn-primary btn-borders btn-block" target="_blank">Provo</a></p>
    <p><a href="http://www.nebo.edu/" class="btn btn-lg btn-primary btn-borders btn-block" target="_blank">Nebo</a></p>
</div>
Set the sidebar title inside the block content with an h3 tag. In the block configuration, give the block a descriptive title that includes the department name and uncheck the show title button.

Accordion


Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Always add .table to the table element. Then depending on the contents of the table, add .table-hover and/or .table-bordered.
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Images

Banners

<img class="img-responsive mb-lg banner" src="/sites/default/files/inline-images/comd-banner-homepage_0.jpg">
    

Content Images

Device

.pull-left will left-align your images like so. Bacon ipsum dolor amet drumstick pork belly andouille ham jowl. Boudin flank hamburger brisket pig. Meatloaf salami brisket, alcatra fatback tri-tip pig boudin sausage beef ribs bresaola capicola sirloin. Pork chop turducken chicken drumstick shank chuck beef ribs alcatra cupim boudin tongue hamburger andouille jerky shoulder. Bacon ipsum dolor amet drumstick pork belly andouille ham jowl. Boudin flank hamburger brisket pig. Meatloaf salami brisket, alcatra fatback tri-tip pig boudin sausage beef ribs bresaola capicola sirloin. Pork chop turducken chicken drumstick shank chuck beef ribs alcatra cupim boudin tongue hamburger andouille jerky shoulder. Bacon ipsum dolor amet drumstick pork belly andouille ham jowl. Boudin flank hamburger brisket pig. Meatloaf salami brisket, alcatra fatback tri-tip pig boudin sausage beef ribs bresaola capicola sirloin. Pork chop turducken chicken drumstick shank chuck beef ribs alcatra cupim boudin tongue hamburger andouille jerky shoulder.

<img alt="Device" class="pull-left img-responsive" data-entity-type="file" data-entity-uuid="5683a590-f58f-4c50-bb58-c4dd7c6e1282" height="211" src="/sites/default/files/inline-images/device.png" width="300">
Device

.pull-right will right-align your images like so. Bacon ipsum dolor amet drumstick pork belly andouille ham jowl. Boudin flank hamburger brisket pig. Meatloaf salami brisket, alcatra fatback tri-tip pig boudin sausage beef ribs bresaola capicola sirloin. Pork chop turducken chicken drumstick shank chuck beef ribs alcatra cupim boudin tongue hamburger andouille jerky shoulder. Bacon ipsum dolor amet drumstick pork belly andouille ham jowl. Boudin flank hamburger brisket pig. Meatloaf salami brisket, alcatra fatback tri-tip pig boudin sausage beef ribs bresaola capicola sirloin. Pork chop turducken chicken drumstick shank chuck beef ribs alcatra cupim boudin tongue hamburger andouille jerky shoulder.

<img alt="Device" class="pull-right img-responsive" data-entity-type="file" data-entity-uuid="5683a590-f58f-4c50-bb58-c4dd7c6e1282" height="211" src="/sites/default/files/inline-images/device.png" width="300">

 


Cards


Round Images with Captions


Scholarships for
Student Teachers

Donate

Scholarships for Students
from Underserved Populations

Donate

Fellowships for Study of
CITES Programs

Donate

Scholarships for
EIME Doctoral Programs

Donate
<div class="col-md-3">
    <span class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-no-borders">
        <span class="thumb-info-wrapper">
            <img class="img-round img-responsive" data-entity-uuid="a7f63151-58af-4a10-9c07-91909d78f3c7" src="/sites/default/files/inline-images/alumni-donate-givingmsl.jpg" />
        </span>
    </span>
    <span class="thumb-info-caption">
        <span class="thumb-info-caption-text center">
            <p>Scholarships for<br />Student Teachers</p>
        </span>
        <span class="thumb-info-social-icons center ml-sm">
            <a href="https://www.ldsphilanthropies.org/donations/byu/mckay-school-education/scholarships.html" class="btn btn-primary white center"><h5>Donate</h5></a>
        </span>
    </span>
</div>
<div class="col-md-3">
    <span class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-no-borders">
        <span class="thumb-info-wrapper">
            <img class="img-round img-responsive" data-entity-uuid="690fa6ae-2213-4350-ba14-e0193f897446" src="/sites/default/files/inline-images/alumni-donate-givingss.jpg" />
        </span>
    </span>
    <span class="thumb-info-caption">
        <span class="thumb-info-caption-text center">
            <p>Scholarships for Students<br />from Underserved Populations</p>
        </span>
        <span class="thumb-info-social-icons center ml-sm">
            <a href="https://www.ldsphilanthropies.org/donations/byu/mckay-school-education/scholarships.html" class="btn btn-primary white center"><h5>Donate</h5></a>
        </span>
    </span>
</div>
<div class="col-md-3">
    <span class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-no-borders">
        <span class="thumb-info-wrapper">
            <img class="img-round img-responsive" data-entity-uuid="a487f935-2151-4afa-bbbd-cbe7d99adaa0" src="/sites/default/files/inline-images/alumni-donate-givingmsaf.jpg" />
        </span>
    </span>
    <span class="thumb-info-caption">
        <span class="thumb-info-caption-text center">
            <p>Fellowships for Study of<br /> CITES Programs</p>
        </span>
        <span class="thumb-info-social-icons center ml-sm">
            <a href="https://www.ldsphilanthropies.org/donations/byu/mckay-school-education/scholarships.html" class="btn btn-primary white center"><h5>Donate</h5></a>
        </span>
    </span>
</div>
<div class="col-md-3">
    <span class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-no-borders">
        <span class="thumb-info-wrapper">
            <img class="img-round img-responsive" data-entity-uuid="ae6229c4-13d0-45a9-a4b8-ff7998b1daff" src="/sites/default/files/inline-images/alumni-donate-graduation-2017-pic.jpg" />
        </span>
    </span>
    <span class="thumb-info-caption">
        <span class="thumb-info-caption-text center">
            <p>Scholarships for<br /> EIME Doctoral Programs</p>
        </span>
        <span class="thumb-info-social-icons center ml-sm">
            <a href="https://www.ldsphilanthropies.org/donations/byu/mckay-school-education/scholarships.html" class="btn btn-primary white center"><h5>Donate</h5></a>
        </span>
    </span>
</div>

Standard Cards


<div class="row mb-xl">    
    <div class="col-md-4">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders top-rad">
            <span class="thumb-info-wrapper">
                <img src="/sites/default/files/inline-images/bsswb-social-awareness.jpg" class="img-responsive" alt="">
                <span class="thumb-info-title">
                    <span class="thumb-info-inner">
                        <ul>
                            <li><a href="/buildingsocialskills/volunteering">Volunteering</a></li>
                            <li><a href="/buildingsocialskills/showing-respect">Showing Respect</a></li>
                            <li><a href="/buildingsocialskills/standing-others">Standing Up for Others</a></li>
                            <li><a href="/buildingsocialskills/being-kind">Being Kind</a></li>
                        </ul>
                    </span>
                </span>
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text lightgray bot-rad">
                <p><a href="/buildingsocialskills/lesson-plans#socialawareness">Social Awareness</a></p>
            </span>
        </span>
    </div>
    <div class="col-md-4">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders top-rad">
            <span class="thumb-info-wrapper">
                <img src="/sites/default/files/inline-images/bsswb-decision-making.jpg" class="img-responsive" alt="">
                <span class="thumb-info-title">
                    <span class="thumb-info-inner">
                        <ul>
                            <li><a href="/buildingsocialskills/accepting-responsibility">Accepting Responsibility</a></li>
                            <li><a href="/buildingsocialskills/resisting-peer-pressure">Resisting Peer Pressure</a></li>
                            <li><a href="/buildingsocialskills/being-honest">Being Honest</a></li>
                        </ul>
                    </span>
                </span>
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text lightgray">
                <p><a href="/buildingsocialskills/lesson-plans#responsibledecisionmaking">Responsible Decision-Making</a></p>
            </span>
        </span>
    </div>
    <div class="col-md-4">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders top-rad">
            <span class="thumb-info-wrapper">
                <img src="/sites/default/files/inline-images/bsswb-relationship-skills.jpg" class="img-responsive" alt="">
                <span class="thumb-info-title">
                    <span class="thumb-info-inner">
                        <ul>
                            <li><a href="/buildingsocialskills/working-together">Working Together</a></li>
                            <li><a href="/buildingsocialskills/joining-in-and-inviting-others-to-join-in">Joining In & Inviting Others to Join In</a></li>
                            <li><a href="/buildingsocialskills/showing-appreciation">Showing Appreciation</a></li>
                            <li><a href="/buildingsocialskills/making-a-compromise">Making a Compromise</a></li>
                        </ul>
                    </span>
                </span>
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text lightgray">
                <p><a href="/buildingsocialskills/lesson-plans#relationshipskills">Relationship Skills</a></p>
            </span>
        </span>
    </div>
</div>	


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.


Carousels


Here is just an example of what we were able to come up with:

There are some cool things about carousels. To make it look the way we want we can edit the data-plugin-options on the first <div>.

If you don't want the icons to show up when you hover over the images, just exclude the whole tag <span class="thumb-info-action"> and everything inside it.

<div class="owl-carousel owl-theme nav-bottom rounded-nav" data-plugin-options='{"loop": true, "nav": true, "dots": false, "responsive": {"0": {"items": 1}, "479": {"items": 1}, "768": {"items": 2}, "979": {"items": 3}, "1199": {"items": 3}}, "loop": false, "autoHeight": true, "margin": 2}'>
    <div>
		<span class="thumb-info thumb-info-centered-icons thumb-info-no-borders top-rad">
			<span class="thumb-info-wrapper">
				<img alt="" class="img-responsive" src="/sites/default/files/inline-images/bsswb-make-your-own-choices.png" /> 
				<span class="thumb-info-action"> 
					<a href="/sites/default/files/SOCIALLEARNING/documents/make-your-own-choices.pdf"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-plus"></i> 
						</span> 
					</a> 
					<a href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Feducation.byu.edu%2Fsociallearning%2Fvolunteering&media=http%3A%2F%2Feducation.byu.edu%2Fsites%2Fdefault%2Ffiles%2FSOCIALLEARNING%2Fposters%2Fmake-your-own-choices.png&description=Building%20Social%20Skills"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-pinterest"></i> 
						</span> 
					</a> 
				</span>
			</span> 
		</span>
		<span class="thumb-info-caption">
            <span class="thumb-info-caption-text lightgray">
                <p><a href="/sites/default/files/SOCIALLEARNING/documents/make-your-own-choices.pdf">Make Your Own Choices</a></p>
            </span>
        </span>
	</div>
    <div>
		<span class="thumb-info thumb-info-centered-icons thumb-info-no-borders top-rad">
			<span class="thumb-info-wrapper">
				<img alt="" class="img-responsive" src="/sites/default/files/inline-images/bsswb-jump-to-the-beat-of-your-own-rope.png" /> 
				<span class="thumb-info-action"> 
					<a href="/sites/default/files/SOCIALLEARNING/documents/jump-to-the-beat-of-your-own-rope.pdf"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-plus"></i> 
						</span> 
					</a> 
					<a href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Feducation.byu.edu%2Fsociallearning%2Fvolunteering&media=http%3A%2F%2Feducation.byu.edu%2Fsites%2Fdefault%2Ffiles%2FSOCIALLEARNING%2Fposters%2Fjump-to-the-beat-of-your-own-rope.png&description=Building%20Social%20Skills"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-pinterest"></i> 
						</span> 
					</a> 
				</span>
			</span> 
		</span>
		<span class="thumb-info-caption">
            <span class="thumb-info-caption-text lightgray">
                <p><a href="/sites/default/files/SOCIALLEARNING/documents/jump-to-the-beat-of-your-own-rope.pdf">Jump to the Beat of Your Own Rope</a></p>
            </span>
        </span>
	</div>

	<div>
		<span class="thumb-info thumb-info-centered-icons thumb-info-no-borders top-rad">
			<span class="thumb-info-wrapper">
				<img alt="" class="img-responsive" src="/sites/default/files/inline-images/bsswb-when-people-say-foolish-things.png" /> 
				<span class="thumb-info-action"> 
					<a href="/sites/default/files/SOCIALLEARNING/documents/when-people-say-foolish-things.pdf"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-plus"></i> 
						</span> 
					</a> 
					<a href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Feducation.byu.edu%2Fsociallearning%2Fvolunteering&media=http%3A%2F%2Feducation.byu.edu%2Fsites%2Fdefault%2Ffiles%2FSOCIALLEARNING%2Fposters%2Fwhen-people-say-foolish-things.png&description=Building%20Social%20Skills"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-pinterest"></i> 
						</span> 
					</a> 
				</span>
			</span> 
		</span>
		<span class="thumb-info-caption">
            <span class="thumb-info-caption-text lightgray">
                <p><a href="/sites/default/files/SOCIALLEARNING/documents/when-people-say-foolish-things.pdf">When People Say Foolish Things</a></p>
            </span>
        </span>
	</div>

	<div>
		<span class="thumb-info thumb-info-centered-icons thumb-info-no-borders top-rad">
			<span class="thumb-info-wrapper">
				<img alt="" class="img-responsive" src="/sites/default/files/inline-images/bsswb-born-to-stand-out.png" /> 
				<span class="thumb-info-action"> 
					<a href="/sites/default/files/SOCIALLEARNING/documents/born-to-stand-out.pdf"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-plus"></i> 
						</span> 
					</a> 
					<a href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Feducation.byu.edu%2Fsociallearning%2Fvolunteering&media=http%3A%2F%2Feducation.byu.edu%2Fsites%2Fdefault%2Ffiles%2FSOCIALLEARNING%2Fposters%2Fborn-to-stand-out.png&description=Building%20Social%20Skills"> 
						<span class="thumb-info-action-icon thumb-info-action-icon-light">
							<i class="fa fa-pinterest"></i> 
						</span> 
					</a> 
				</span>
			</span> 
		</span>
		<span class="thumb-info-caption">
            <span class="thumb-info-caption-text lightgray">
                <p><a href="/sites/default/files/SOCIALLEARNING/documents/born-to-stand-out.pdf">Born To Stand Out</a></p>
            </span>
        </span>
	</div>
</div>

News Blocks


The blocks look bad because its in a col-md-9. They look fine when they are full width.
<div class="owl-carousel owl-theme nav-bottom rounded-nav" data-plugin-options='{"loop": true, "nav": true, "dots": false, "responsive": {"0": {"items": 1}, "479": {"items": 1}, "768": {"items": 2}, "979": {"items": 3}, "1199": {"items": 3}}, "loop": false, "autoHeight": true, "margin": 2}'>
    <div class="news-block mb-xl">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders thumb-info-hide-wrapper-bg thumb-info-no-zoom">
            <span class="thumb-info-wrapper news-image">
                <img src="/sites/default/files/inline-images/bsswb-social-awareness.jpg" class="img-responsive" alt="">
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text news-text-box">
                <h3><a href="/buildingsocialskills/lesson-plans#socialawareness">Social Awareness</a></h3>
                <p>Turkey spare ribs prosciutto burgdoggen rump. Pancetta salami corned beef, landjaeger chicken capicola ball tip t-bone bacon jowl drumstick bresaola ham turkey strip steak. Short loin andouille boudin t-bone. Beef ribs fatback porchetta meatball frankfurter pork ham hock tongue brisket rump landjaeger.</p>
                <div class="news-read-more">
                    <p><a href="/buildingsocialskills/lesson-plans#relationshipskills">Read More</a></p>
                </div>
            </span>
        </span>
    </div>
    <div class="news-block mb-xl">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders thumb-info-hide-wrapper-bg thumb-info-no-zoom">
            <span class="thumb-info-wrapper news-image">
                <img src="/sites/default/files/inline-images/bsswb-decision-making.jpg" class="img-responsive" alt="">
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text news-text-box">
                <h3><a href="/buildingsocialskills/lesson-plans#responsibledecisionmaking">Responsible Decision-Making</a></h3>
                <p>Bacon ipsum dolor amet t-bone meatball spare ribs salami shankle venison ham hock shank chicken. Jowl pastrami porchetta capicola picanha tenderloin kielbasa ball tip salami flank. Pork chop pork alcatra bresaola spare ribs corned beef jowl frankfurter biltong meatloaf. </p>
                <div class="news-read-more">
                    <p><a href="/buildingsocialskills/lesson-plans#relationshipskills">Read More</a></p>
                </div>
            </span>
        </span>
    </div>
    <div class="news-block mb-xl">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders thumb-info-hide-wrapper-bg thumb-info-no-zoom">
            <span class="thumb-info-wrapper news-image">
                <img src="/sites/default/files/inline-images/bsswb-relationship-skills.jpg" class="img-responsive" alt="">
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text news-text-box">
                <h3><a href="/buildingsocialskills/lesson-plans#relationshipskills">Relationship Skills</a></h3>
                <p>Bacon ball tip ground round cow. Pork shankle fatback sausage, leberkas tongue tri-tip frankfurter biltong doner spare ribs ground round ball tip burgdoggen. Tail cow bacon capicola beef ribs alcatra drumstick pork. Pig strip steak drumstick meatloaf landjaeger jowl. Alcatra tri-tip shank boudin salami flank, short ribs hamburger pork.</p>
                <div class="news-read-more">
                    <p><a href="/buildingsocialskills/lesson-plans#relationshipskills">Read More</a></p>
                </div>
            </span>
        </span>
    </div>
    <div class="news-block mb-xl">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders thumb-info-hide-wrapper-bg thumb-info-no-zoom">
            <span class="thumb-info-wrapper news-image">
                <img src="/sites/default/files/inline-images/bsswb-social-awareness.jpg" class="img-responsive" alt="">
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text news-text-box">
                <h3><a href="/buildingsocialskills/lesson-plans#socialawareness">Social Awareness</a></h3>
                <p>Turkey spare ribs prosciutto burgdoggen rump. Pancetta salami corned beef, landjaeger chicken capicola ball tip t-bone bacon jowl drumstick bresaola ham turkey strip steak. Short loin andouille boudin t-bone. Beef ribs fatback porchetta meatball frankfurter pork ham hock tongue brisket rump landjaeger.</p>
                <div class="news-read-more">
                    <p><a href="/buildingsocialskills/lesson-plans#relationshipskills">Read More</a></p>
                </div>
            </span>
        </span>
    </div>
    <div class="news-block mb-xl">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders thumb-info-hide-wrapper-bg thumb-info-no-zoom">
            <span class="thumb-info-wrapper news-image">
                <img src="/sites/default/files/inline-images/bsswb-decision-making.jpg" class="img-responsive" alt="">
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text news-text-box">
                <h3><a href="/buildingsocialskills/lesson-plans#responsibledecisionmaking">Responsible Decision-Making</a></h3>
                <p>Bacon ipsum dolor amet t-bone meatball spare ribs salami shankle venison ham hock shank chicken. Jowl pastrami porchetta capicola picanha tenderloin kielbasa ball tip salami flank. Pork chop pork alcatra bresaola spare ribs corned beef jowl frankfurter biltong meatloaf. </p>
                <div class="news-read-more">
                    <p><a href="/buildingsocialskills/lesson-plans#relationshipskills">Read More</a></p>
                </div>
            </span>
        </span>
    </div>
    <div class="news-block mb-xl">
        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders thumb-info-hide-wrapper-bg thumb-info-no-zoom">
            <span class="thumb-info-wrapper news-image">
                <img src="/sites/default/files/inline-images/bsswb-relationship-skills.jpg" class="img-responsive" alt="">
            </span>
        </span>
        <span class="thumb-info-caption">
            <span class="thumb-info-caption-text news-text-box">
                <h3><a href="/buildingsocialskills/lesson-plans#relationshipskills">Relationship Skills</a></h3>
                <p>Bacon ball tip ground round cow. Pork shankle fatback sausage, leberkas tongue tri-tip frankfurter biltong doner spare ribs ground round ball tip burgdoggen. Tail cow bacon capicola beef ribs alcatra drumstick pork. Pig strip steak drumstick meatloaf landjaeger jowl. Alcatra tri-tip shank boudin salami flank, short ribs hamburger pork.</p>
                <div class="news-read-more">
                    <p><a href="/buildingsocialskills/lesson-plans#relationshipskills">Read More</a></p>
                </div>
            </span>
        </span>
    </div>
</div>