Helpers
Floats
Quickly float elements with .left or .right. Clear floats on a parent element with the .clearfix class.
Example: floats
_10<div class="clearfix">_10 <div class="left">Floated left</div>_10 <div class="right">Floated right</div>_10</div>
There is also a clearfix() SASS mixin for use with custom components:
_10.example {_10 @include clearfix;_10}
Center block
Set an element to display: block and center via margin: auto. Available as a mixin (@include center-block;) and class (.center-block).
Example: center block
_10<div_10 class="center-block text-center"_10 style="background: #eee; width: 200px"_10>_10 Center block_10</div>
Text alignment
Change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.
Example: text alignment
This is some left-aligned text
This is some right-aligned text
This is some center-aligned text
This is some justified text
_10<p class="text-left">This is some left-aligned text</p>_10<p class="text-right">This is some right-aligned text</p>_10<p class="text-center">This is some center-aligned text</p>_10<p class="text-justify">This is some justified text</p>
Text wrapping
Use .text-nowrap to keep text on one line and stop it from wrapping, and use .text-truncate to add an an ellipsis to text that overflows its container.
Example: text wrapping
This is some text that doesn't wrap
This is some truncated text
_10<div style="background: #eee; width: 80px">_10 <p class="text-nowrap">This is some text that doesn't wrap</p>_10 <p class="text-truncate">This is some truncated text</p>_10</div>
Text transformation
Transform the casing of text by adding .text-lowercase, .text-uppercase, or .text-capitalize to an element.
Example: text transformation
Lowercased text
Uppercased text
Capitalized text
_10<p class="text-lowercase">Lowercased text</p>_10<p class="text-uppercase">Uppercased text</p>_10<p class="text-capitalize">Capitalized text</p>
Maintain ratio
Use for enforcing an aspect ratio for iframes, videos and other embedded media, for example YouTube videos. Maintains a specific aspect ratio across a responsive site.
16 to 9 ratio
4 to 3 ratio
Help improve this page
To help make sure that this page is useful, relevant and up to date, you can:
Need help?
If you've got a question about the NICE Design System, contact the team.
- If you work for NICE, ask us a question in our Teams channel
- If you work outside of NICE, you can get in touch with us via Github discussions