We have easy to use classes to help you align your content.

Vertical Align

You can easily vertically center things by adding the class valign-wrapper to the container holding the items you want to vertically align.

This should be vertically aligned


<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>

Text Align

These classes are for horizontally aligning content: .left-align, .right-align and .center-align.

This should be left aligned

This should be right aligned

This should be center aligned


  <div>
    <h5 class="left-align">This should be left aligned</h5>
  </div>
  <div>
    <h5 class="right-align">This should be right aligned</h5>
  </div>
  <div>
    <h5 class="center-align">This should be center aligned</h5>
  </div>

Quick Floats

Quickly float things by adding the class left or right to the element. !important is used to avoid specificity issues.


<div class="left">...</div>
<div class="right">...</div>

We provide easy to use classes to hide/show content on specific screen sizes.

Class	Screen Range
`.hide`	Hidden for all Devices
`.hide-on-small-only`	Hidden for Mobile Only
`.hide-on-med-only`	Hidden for Tablet Only
`.hide-on-med-and-down`	Hidden for Tablet and Below
`.hide-on-med-and-up`	Hidden for Tablet and Above
`.hide-on-large-only`	Hidden for Desktop Only
`.show-on-small`	Show for Mobile Only
`.show-on-medium`	Show for Tablet Only
`.show-on-large`	Show for Desktop Only
`.show-on-medium-and-up`	Show for Tablet and Above
`.show-on-medium-and-down`	Show for Tablet and Below

Usage


  <div class="hide-on-small-only"></div>

These classes help format various content on your site.

Truncation

To truncate long lines of text in an ellipsis, add the class truncate to the tag which contains the text. See an example below of a header being truncated inside a card. You can also adjust the number of lines until the ellipses show by using this class truncate-<1|2|3|4|5>.

This is an extremely long title that will be truncated


  <h4 class="truncate">This is an extremely long title that will be truncated</h4>

Hover

The hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards. Please note that shadows are not that visible on dark mode.

You can also use your primary or secondary color by using primary-hoverable or secondary-hoverable. Or by semantic purpose like success-hoverable, info-hoverable, etc...

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link


  <div class="card-panel hoverable"> Hoverable Card Panel</div>

Add the scrollbar class to beautify any container's scrollbar. If you only want to use the scrollbar to show on y-axis, use scrollbar-y and scrollbar-x for x-axis.

If you want to apply this to all the elements with scrollbar, add the scrollbar class to the <body> tag.

Note: Beautified scrollbars will only show if the container has overflow: auto|scroll or with content that overflows. Also, this will only show on large screen (1201px) and up, to overide, use .scrollbar.force instead.

This is a very long content, I guess

              Copied!
              content_copy
              
<div class="scrollbar force">
  <!-- overflowing contents -->
</div>

If you want an element to stick on the page while scrolling and leave when the container is out of view, you can try using sticky content.

On your container, just add sticky-container class, this will make it as the basis where the element will stick. And on the child, add element or container add the sticky-content class to make it stick at the page view within the container's area. Optionally, you can add this style attribute --sticky-content-top: 1px; to specify on where to stick the content relative to the container, the default value for this is 0.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro temporibus aut numquam excepturi dolore eius placeat, dolor sit incidunt itaque ad dolores aperiam, vero tempora? Dignissimos voluptatibus deleniti numquam molestias.

              Copied!
              content_copy
              
  <div class="col s12 sticky-container">
    <nav class="compact sticky-content">Sticky Nav</nav>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro temporibus aut numquam excepturi dolore eius placeat, dolor sit incidunt itaque ad dolores aperiam, vero tempora? Dignissimos voluptatibus deleniti numquam molestias.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro temporibus aut numquam excepturi dolore eius placeat, dolor sit incidunt itaque ad dolores aperiam, vero tempora? Dignissimos voluptatibus deleniti numquam molestias.</p>
  </div>

Because we override many of the default browser styles and elements, we provide the .browser-default class to revert these elements to their original state.

Name of Element	Reverted Style
UL	Bullet points
SELECT	Browser default select element
INPUT	Browser default input

More helper class.

Class	Description	Usage
`.no-select`	Make text in the element not highlightable	Copied! `<p class="no-select"> Not Selectable </p>`
`.center-block`	Make block/container centered using margin	Copied! `<div class="center-block"> Some content </div>`
`.no-text-decoration`	Remove text underline on links (a)	Copied! `<a href="#!" class="no-text-decoration"> Link </a>`
`.no-padding`	Remove all padding	Copied! `<h1 class="no-padding"> Some content </h1>`
`.no-padding-<t\|r\|b\|l\|x\|y>`	Remove specific padding (top, right, bottom, left, x-axis or left right, y-axis or top bottom)	Copied! `<h1 class="no-padding-t"> Some content </h1>`
`.no-margin`	Remove all margin	Copied! `<h1 class="no-margin"> Some content </h1>`
`.no-margin-<t\|r\|b\|l\|x\|y>`	Remove specific margin (top, right, bottom, left, x-axis or left right, y-axis or top bottom)	Copied! `<h1 class="no-margin-r"> Some content </h1>`
`.no-br`	Remove all border radius	Copied! `<div class="no-br"> Some content </div>`
`.no-br-<tl\|tr\|bl\|br\|t\|r\|b\|l>`	Remove specific border radius (top-left, top-right, bottom-left, bottom-right, top or top-left and top-right, right or top-right and bottom-right, bottom or bottom-right and bottom-left, left or top-left and bottom-left)	Copied! `<div class="no-br-tl"> Some content </div>`
`.br-<s\|m\|l\|xl>`	Add border radius	Copied! `<div class="br-s"> Some content </div>`
`.border-<1x-5px>`	Set border width to 1x, 2x,.. 5x. Note: This will only set the border-width, to take effect, please set the border-style.	Copied! `<div class="border-1x"> Some content </div>`
`.border-<solid\|dashed\|dotted\|double>`	Set border style to solid, dashed, dotted or double. 3D border styles like ridge, groove, etc... are not supported.	Copied! `<div class="border-solid"> Some content </div>`
`.border-<color>`	Set border colors. You can refer to CSS > Colors on how to set the border colors.	Copied! `<div class="border-red border-darken-4 ondark-border-primary"> Some content </div>`
`.no-border`	Remove all borders.	Copied! `<div class="no-border"> Some content </div>`
`.no-border-<t\|r\|b\|l\|x\|y>`	Remove specific border (top, right, bottom, left, x-axis or left right, y-axis or top bottom)	Copied! `<div class="no-border-t"> Some content </div>`
`.responsive-container`	Make container responsive. Shows scrollbar for overflowing contents. Typically used with tables.	Copied! `<div class="responsive-container"> <table> <!-- Overflowing Contents --> </table> </div>`

Alignment

Vertical Align

This should be vertically aligned

Text Align

This should be left aligned

This should be right aligned

This should be center aligned

Quick Floats

Hiding/Showing Content

Usage

Formatting

Truncation

This is an extremely long title that will be truncated

Hover

Scrollbar

This is a very long content, I guess

This is a very long content, I guess

This is a very long content, I guess

This is a very long content, I guess

Sticky Content

Browser Defaults

Other classes