istrap
Version:
iOS design system blends in with Bootstrap
1,073 lines (1,068 loc) • 59.8 kB
HTML
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="YooKits" />
<!-- Page Title -->
<title>Utilities - Text</title>
<!-- Favicon Icon -->
<link rel="icon" href="../assets/img/favicon.png">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/istrap.css" />
</head>
<body>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<header class="yoo-header yoo-style1 yoo-sticky-menu">
<div class="yoo-main-header">
<div class="yoo-main-header-in">
<div class="yoo-main-header-left">
<a href="../index.html" class="yoo-logo-link yoo-light-logo"><img src="../assets/img/logo.svg" alt="logo-light" /></a>
<!-- For Site Title -->
<!-- <span class="yoo-site-title">
<a href="../index.html">Logo</a>
</span> -->
</div>
<div class="yoo-main-header-right">
<div class="yoo-nav-wrap yoo-fade-up">
<div class="yoo-nav-toggle">
<ion-icon name="ellipsis-vertical"></ion-icon>
</div>
<nav class="yoo-nav yoo-desktop-nav">
<ul class="yoo-nav-list">
<li class="yoo-has-children">
<a href="#"><ion-icon name="albums"></ion-icon> Icons</a>
<ul class="yoo-dropdown yoo-style7">
<li>
<a href="material-icons.html">
<div class="yoo-desc-box yoo-icon-color1">
<ion-icon name="beer"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Airplane</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
<li>
<a href="font-awesome-icons.html">
<div class="yoo-desc-box yoo-icon-color2">
<ion-icon name="restaurant"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Local Dining</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
<li>
<a href="themify-icons.html">
<div class="yoo-desc-box yoo-icon-color3">
<ion-icon name="bonfire"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Fast Food</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
<li>
<a href="line-icons.html">
<div class="yoo-desc-box yoo-icon-color4">
<ion-icon name="pizza"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Local Pizza</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
</ul>
</li>
<li class="yoo-has-children">
<a href="#"><ion-icon name="folder-open"></ion-icon> Images</a>
<ul class="yoo-dropdown yoo-style6">
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img01.png" alt="img01" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Star Wars</div>
<span class="yoo-desc-cat">Action</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img02.png" alt="img02" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Friends</div>
<span class="yoo-desc-cat">American Sitcom</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img03.png" alt="img03" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Inception</div>
<span class="yoo-desc-cat">Thriller</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img04.png" alt="img04" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">FightClub</div>
<span class="yoo-desc-cat">Drama/Action</span>
</div>
</a>
</li>
</ul>
</li>
<li class="yoo-has-children yoo-megamenu yoo-style1">
<a href="#"><ion-icon name="layers"></ion-icon> Components</a>
<div class="yoo-megamenu-in">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 1</h2>
<ul class="yoo-megamenu-list">
<li><a href="../components/alerts.html">Alerts</a></li>
<li><a href="../components/badge.html">Badge</a></li>
<li><a href="../components/breadcrumb.html">Breadcrumb</a></li>
<li><a href="../components/button.html">Buttons</a></li>
<li><a href="../components/button-group.html">Button group</a></li>
<li><a href="../components/card.html">Card</a></li>
<li><a href="../components/carousel.html">Carousel</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 2</h2>
<ul class="yoo-megamenu-list">
<li><a href="../components/collapse.html">Collapse</a></li>
<li><a href="../components/dropdowns.html">Dropdowns</a></li>
<li><a href="../components/forms.html">Forms</a></li>
<li><a href="../components/forms-group.html">Input group</a></li>
<li><a href="../components/jumbotron.html">Jumbotron</a></li>
<li><a href="../components/list-group.html">List group</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 3</h2>
<ul class="yoo-megamenu-list">
<li><a href="../components/media-object.html">Media Object</a></li>
<li><a href="../components/modal.html">Modal</a></li>
<li><a href="../components/navs.html">Navs</a></li>
<li><a href="../components/navbar.html">Navbar</a></li>
<li><a href="../components/pagination.html">Pagination</a></li>
<li><a href="../components/popovers.html">Popovers</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 4</h2>
<ul class="yoo-megamenu-list">
<li><a href="../components/progress.html">Progress</a></li>
<li><a href="../components/scrollspy.html">Scrollspy</a></li>
<li><a href="../components/spinners.html">Spinners</a></li>
<li><a href="../content/table.html">Table</a></li>
<li><a href="../components/toasts.html">Toasts</a></li>
<li><a href="../components/tooltips.html">Tooltips</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
<!-- .yoo-nav -->
</div>
<!-- .yoo-nav-wrap -->
<ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0">
<li>
<div class="yoo-toggle-body yoo-search-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-search-btn">
<ion-icon name="search"></ion-icon>
</span>
<div class="yoo-dropdown yoo-search-dropdown">
<form action="#" class="yoo-search yoo-style1">
<input type="text" placeholder="Search..." class="yoo-search-input">
<div class="yoo-toggle-cross">
<ion-icon name="close"></ion-icon>
</div>
<button class="yoo-search-submit"><ion-icon name="search"></ion-icon></button>
</form>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-message-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn">
<ion-icon name="mail"></ion-icon>
<span class="yoo-ex-nav-label">9</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Messages</span>
<span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/1.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Bob Dylan
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">10:23</span>
</div>
</a>
</li>
<li>
<a href="#" class="active">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/2.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
David Gilmour
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/3.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Jeff Beck
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 05</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/4.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Guthrie Govan
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 10</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/5.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Eric Johnson
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 16</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <ion-icon name="chevron-forward"></ion-icon></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-notice-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn">
<ion-icon name="notifications"></ion-icon>
<span class="yoo-ex-nav-label">3</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Notification</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<ion-icon name="people"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3>
<span class="yoo-notify-time">5 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color4">
<ion-icon name="calendar"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3>
<span class="yoo-notify-time">6 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color3">
<ion-icon name="heart"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">7 People loved your activity.</h3>
<span class="yoo-notify-time">9 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<ion-icon name="chatbox"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">John commented on activity.</h3>
<span class="yoo-notify-time">1 day ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color1">
<img src="../assets/img/user/1.jpg" alt="msg1" />
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3>
<span class="yoo-notify-time">2 days ago</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <ion-icon name="chevron-forward"></ion-icon></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-app-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-app-btn">
<ion-icon name="apps"></ion-icon>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Quick Navigation</h2>
<ul class="yoo-nofify-list yoo-style2 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/gmail.png" alt="gmail">
</div>
<div class="yoo-nofify-text">
<h3>Gmail</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/hangout.png" alt="hangout">
</div>
<div class="yoo-nofify-text">
<h3>Hangout</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/google.png" alt="google">
</div>
<div class="yoo-nofify-text">
<h3>Google+</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/mail.png" alt="mail">
</div>
<div class="yoo-nofify-text">
<h3>Mail</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/message.png" alt="message">
</div>
<div class="yoo-nofify-text">
<h3>Message</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/more.png" alt="more">
</div>
<div class="yoo-nofify-text">
<h3>More</h3>
</div>
</a>
</li>
</ul>
<hr>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <ion-icon name="chevron-forward"></ion-icon></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-profile-nav yoo-style1">
<div class="yoo-toggle-btn yoo-profile-nav-btn">
<div class="yoo-profile-nav-text">
<span>Welcome,</span>
<h4>Thom Yorke</h4>
</div>
<div class="yoo-profile-nav-img">
<img src="../assets/img/profile-pic.png" alt="profile">
</div>
</div>
<ul class="yoo-dropdown yoo-style1">
<li>
<a href="#"><ion-icon name="person-circle"></ion-icon>My Profile</a>
</li>
<li>
<a href="#"><ion-icon name="cog"></ion-icon>Settings</a>
</li>
<li>
<a href="#"><ion-icon name="videocam"></ion-icon>Upload</a>
</li>
<li>
<a href="#"><ion-icon name="help-circle"></ion-icon>Help</a>
</li>
<li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</header><!-- .yoo-header -->
<div class="yoo-sidebarheader-toggle">
<div class="yoo-button-bar1"></div>
<div class="yoo-button-bar2"></div>
<div class="yoo-button-bar3"></div>
</div><!-- .yoo-sidebarheader-toggle -->
<div class="yoo-sidebarheader">
<div class="yoo-add">
<div class="yoo-add-in">
<a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/" class="yoo-add-thumb">
<img src="../assets/img/idashboard.jpg" alt="MaterialXPro">
</a>
<h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/">Go Pro & unlock 100+ more UI components & pages.</a></h2>
<a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/" class="yoo-add-btn btn btn-success btn-sm">Show Me</a>
</div>
</div>
<div class="yoo-sidebarheader-in" data-scrollbar>
<div class="yoo-sidebar-nav">
<ul class="yoo-sidebar-nav-list yoo-mp0">
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg1"><ion-icon name="person-circle"></ion-icon></span>
<span class="yoo-sidebar-link-text">Getting started</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../getting-started/introduction.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Introduction</span>
</span>
</a>
</li>
<li>
<a href="../getting-started/download.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Download</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg2"><ion-icon name="browsers"></ion-icon></span>
<span class="yoo-sidebar-link-text">Layout</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../layout/overview.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Overview</span>
</span>
</a>
</li>
<li>
<a href="../layout/grid.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Grid</span>
</span>
</a>
</li>
<li>
<a href="utilities-for-layout.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Utilities for layout</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg3"><ion-icon name="document"></ion-icon></span>
<span class="yoo-sidebar-link-text">Contents</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../content/typography.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Typography</span>
</span>
</a>
</li>
<li>
<a href="../content/code.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Code</span>
</span>
</a>
</li>
<li>
<a href="../content/images.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Images</span>
</span>
</a>
</li>
<li>
<a href="../content/tables.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Tables</span>
</span>
</a>
</li>
<li>
<a href="../content/figures.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Figures</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg5"><ion-icon name="folder-open"></ion-icon></span>
<span class="yoo-sidebar-link-text">Components</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../components/alerts.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Alerts</span>
</span>
</a>
</li>
<li>
<a href="../components/badge.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Badge</span>
</span>
</a>
</li>
<li>
<a href="../components/breadcrumb.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Breadcrumb</span>
</span>
</a>
</li>
<li>
<a href="../components/button.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Buttons</span>
</span>
</a>
</li>
<li>
<a href="../components/button-group.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Button group</span>
</span>
</a>
</li>
<li>
<a href="../components/card.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Card</span>
</span>
</a>
</li>
<li>
<a href="../components/carousel.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Carousel</span>
</span>
</a>
</li>
<li>
<a href="../components/collapse.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Collapse</span>
</span>
</a>
</li>
<li>
<a href="../components/dropdowns.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Dropdowns</span>
</span>
</a>
</li>
<li>
<a href="../components/forms.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Forms</span>
</span>
</a>
</li>
<li>
<a href="../components/forms-group.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Input group</span>
</span>
</a>
</li>
<li>
<a href="../components/jumbotron.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Jumbotron</span>
</span>
</a>
</li>
<li>
<a href="../components/list-group.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">List group</span>
</span>
</a>
</li>
<li>
<a href="../components/media-object.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Media object</span>
</span>
</a>
</li>
<li>
<a href="../components/modal.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Modal</span>
</span>
</a>
</li>
<li>
<a href="../components/navs.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Navs</span>
</span>
</a>
</li>
<li>
<a href="../components/navbar.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Navbar</span>
</span>
</a>
</li>
<li>
<a href="../components/pagination.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Pagination</span>
</span>
</a>
</li>
<li>
<a href="../components/popovers.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Popovers</span>
</span>
</a>
</li>
<li>
<a href="../components/progress.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Progress</span>
</span>
</a>
</li>
<li>
<a href="../components/scrollspy.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Scrollspy</span>
</span>
</a>
</li>
<li>
<a href="../components/spinners.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Spinners</span>
</span>
</a>
</li>
<li>
<a href="../components/toasts.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Toasts</span>
</span>
</a>
</li>
<li>
<a href="../components/tooltips.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Tooltips</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg4"><ion-icon name="folder-open"></ion-icon></span>
<span class="yoo-sidebar-link-text">Utilities</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="borders.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Borders</span>
</span>
</a>
</li>
<li>
<a href="close-icon.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Close icon</span>
</span>
</a>
</li>
<li>
<a href="colors.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Colors</span>
</span>
</a>
</li>
<li>
<a href="display.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Display</span>
</span>
</a>
</li>
<li>
<a href="embed.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Embed</span>
</span>
</a>
</li>
<li>
<a href="flex.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Flex</span>
</span>
</a>
</li>
<li>
<a href="overflow.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Overflow</span>
</span>
</a>
</li>
<li>
<a href="shadow.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Shadows</span>
</span>
</a>
</li>
<li>
<a href="sizing.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Sizing</span>
</span>
</a>
</li>
<li>
<a href="spacing.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Spacing</span>
</span>
</a>
</li>
<li>
<a href="stretched-link.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Stretched link</span>
</span>
</a>
</li>
<li class="active">
<a href="text.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Text</span>
</span>
</a>
</li>
<li>
<a href="vertical-align.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Vertical align</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="../analytics.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg6"><ion-icon name="cloud"></ion-icon></span>
<span class="yoo-sidebar-link-text">Extend</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../extend/approach.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Approach</span>
</span>
</a>
</li>
<li>
<a href="../extend/icons.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Icons Table</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
</ul><!-- .yoo-sidebar-nav-list -->
</div>
</div>
</div><!-- .yoo-sidebarheader -->
<div class="yoo-content yoo-style1">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
<div class="yoo-uikits-heading">
<h2 class="yoo-uikits-title">Text</h2>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Justify Text</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#JustifyText"><ion-icon name="code-working"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="JustifyText">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Justify Text</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-justify"</span><span class="nt">></span>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.<span class="nt"></p></span></code></pre></figure>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-20">
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="bd-example">
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
</div>
<div class="yoo-height-b5 yoo-height-lg-b5"></div>
</div>
</div>
</div><!-- .yoo-card -->
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Alined Text</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#AlinedText"><ion-icon name="code-working"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="AlinedText">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Alined Text</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"badge badge-primary text-wrap"</span> <span class="na">style=</span><span class="s">"width: 6rem;"</span><span class="nt">></span>
This text should wrap.
<span class="nt"></div></span></code></pre></figure>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"text-nowrap bd-highlight"</span> <span class="na">style=</span><span class="s">"width: 8rem;"</span><span class="nt">></span>
This text should overflow the parent.
<span class="nt"></div></span></code></pre></figure>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Block level --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-2 text-truncate"</span><span class="nt">></span>
Praeterea iter est quasdam res quas ex communi.
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Inline level --></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"d-inline-block text-truncate"</span> <span class="na">style=</span><span class="s">"max-width: 150px;"</span><span class="nt">></span>
Praeterea iter est quasdam res quas ex communi.
<span class="nt"></span></span></code></pre></figure>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-20">
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<p>Wrap text with a <code class="highlighter-rouge">.text-wrap</code> class.</p>
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<p>Prevent text from wrapping with a <code class="highlighter-rouge">.text-nowrap</code> class.</p>
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<p>For longer content, you can add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code class="highlighter-rouge">display: inline-block</code> or <code class="highlighter-rouge">display: block</code>.</strong></p>
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
<div class="yoo-height-b10 yoo-height-lg-b10"></div>
</div>
</div>
</div><!-- .yoo-card -->
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Word break</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#WordBreak"><ion-icon name="code-working"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="WordBreak">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Word break</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-break"</span><span class="nt">></span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm<span class="nt"></p></span></code></pre></figure>
</div>
<div class="