materialx-yoo

<!DOCTYPE html> <html class="no-js" lang="en"> <head>  <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" />  <title>UI Kits- Button Group</title>  <link rel="icon" href="../assets/img/favicon.png">  <link rel="stylesheet" type="text/css" href="../assets/css/material-icons.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/materialX.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>   </div> <div class="yoo-main-header-right"> <div class="yoo-nav-wrap yoo-fade-up"> <div class="yoo-nav-toggle"> <i class="material-icons-outlined">more_vert</i> </div> <nav class="yoo-nav yoo-desktop-nav"> <ul class="yoo-nav-list"> <li class="yoo-has-children"> <a href="#"><i class="material-icons">subscriptions</i> Icons</a> <ul class="yoo-dropdown yoo-style7"> <li> <a href="material-icons.html"> <div class="yoo-desc-box yoo-indigo-box"> <i class="material-icons">flight</i> </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-purple-box"> <i class="material-icons">local_dining</i> </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-blue-box"> <i class="material-icons">fastfood</i> </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-green-box"> <i class="material-icons">local_pizza</i> </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="#"><i class="material-icons">folder</i> 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="#"><i class="material-icons">layers</i>UI 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="alerts.html">Alerts</a></li> <li><a href="badge.html">Badge</a></li> <li><a href="breadcrumb.html">Breadcrumb</a></li> <li><a href="button.html">Buttons</a></li> <li><a href="button-group.html">Button group</a></li> <li><a href="card.html">Card</a></li> <li><a href="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="collapse.html">Collapse</a></li> <li><a href="dropdowns.html">Dropdowns</a></li> <li><a href="forms.html">Forms</a></li> <li><a href="forms-group.html">Input group</a></li> <li><a href="jumbotron.html">Jumbotron</a></li> <li><a href="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="media-object.html">Media Object</a></li> <li><a href="modal.html">Modal</a></li> <li><a href="navs.html">Navs</a></li> <li><a href="navbar.html">Navbar</a></li> <li><a href="pagination.html">Pagination</a></li> <li><a href="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="progress.html">Progress</a></li> <li><a href="scrollspy.html">Scrollspy</a></li> <li><a href="spinners.html">Spinners</a></li> <li><a href="../content/table.html">Table</a></li> <li><a href="toasts.html">Toasts</a></li> <li><a href="tooltips.html">Tooltips</a></li> </ul> </div> </div> </div> </div> </div> </li> </ul> </nav>  </div>  <ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0"> <li> <div class="yoo-search-wrap"> <form action="#" class="yoo-search yoo-style1"> <input type="text" placeholder="Search people & places" class="yoo-search-input"> <button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button> </form> <span class="yoo-search-toggle-mb yoo-ex-nav-btn"><i class="material-icons-outlined">search</i></span> </div> </li> <li> <div class="yoo-toggle-body yoo-language-nav"> <div class="yoo-toggle-btn yoo-ex-nav-btn" data-ripple="ripple" data-ripple-color="#fff"> <i class="material-icons">translate</i> <span class="yoo-selected-language">English</span> <span class="yoo-language-arrow"><i class="material-icons">keyboard_arrow_down</i></span> </div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#">English</a> </li> <li> <a href="#">Русский</a> </li> <li> <a href="#">Español</a> </li> <li> <a href="#">日本語</a> </li> </ul> </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"> <i class="material-icons">email</i> <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 <i class="material-icons-outlined">navigate_next</i></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"> <i class="material-icons">notifications</i> <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-purple-box"> <i class="material-icons-outlined">supervisor_account</i> </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-green-box"> <i class="material-icons-outlined">calendar_today</i> </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-blue-box"> <i class="material-icons-outlined">favorite_border</i> </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-purple-box"> <i class="material-icons-outlined">chat_bubble_outline</i> </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-indigo-box"> <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 <i class="material-icons-outlined">navigate_next</i></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"> <i class="material-icons-outlined">apps</i> </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 <i class="material-icons-outlined">navigate_next</i></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="#"><i class="material-icons">account_circle</i>My Profile</a> </li> <li> <a href="#"><i class="material-icons">settings</i>Settings</a> </li> <li> <a href="#"><i class="material-icons">videocam</i>Upload</a> </li> <li> <a href="#"><i class="material-icons">help</i>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li> </ul> </div> </li> </ul> </div> </div> </div> </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> <div class="yoo-sidebarheader"> <div class="yoo-sidebarheader-in" data-scrollbar> <div class="yoo-sidebar-nav"> <div class="yoo-sidebar-nav-title"> <span class="yoo-sidebar-nav-title-text">DASHBOARD</span> <span class="yoo-sidebar-nav-title-dotline"><i class="material-icons-outlined">more_horiz</i></span> </div> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li> <a href="../index.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">dashboard</i></span> <span class="yoo-sidebar-link-text">Default</span> </span> </a> </li> <li> <a href="../boxed-dashboard.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">inbox</i></span> <span class="yoo-sidebar-link-text">Boxed</span> </span> </a> </li> <li> <a href="../accent-sidebar.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">layers</i></span> <span class="yoo-sidebar-link-text">Accent Sidebar</span> </span> </a> </li> <li> <a href="../sidebar-image.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">view_quilt</i></span> <span class="yoo-sidebar-link-text">Sidebar Image</span> </span> </a> </li> <li> <a href="../light-dashboard.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">web_asset</i></span> <span class="yoo-sidebar-link-text">Light</span> </span> </a> </li> <li> <a href="../full-width.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">calendar_view_day</i></span> <span class="yoo-sidebar-link-text">Full Width</span> </span> </a> </li> <li> <a href="../condense.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">view_array</i></span> <span class="yoo-sidebar-link-text">Condense</span> </span> </a> </li> </ul> <div class="yoo-sidebar-nav-title"> <span class="yoo-sidebar-nav-title-text">WEB APPS</span> <span class="yoo-sidebar-nav-title-dotline"><i class="material-icons-outlined">more_horiz</i></span> </div> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li> <a href="../web-apps/email.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">email</i></span> <span class="yoo-sidebar-link-text">Email</span> </span> </a> </li> <li> <a href="../web-apps/calender.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">event_note</i></span> <span class="yoo-sidebar-link-text">Calender</span> </span> </a> </li> <li> <a href="../web-apps/messenger.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">offline_bolt</i></span> <span class="yoo-sidebar-link-text">Messenger</span> </span> </a> </li> <li> <a href="../web-apps/live-chat.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">chat</i></span> <span class="yoo-sidebar-link-text">Live Chat</span> </span> </a> </li> <li> <a href="../web-apps/contact.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">contacts</i></span> <span class="yoo-sidebar-link-text">Contact</span> </span> </a> </li> <li> <a href="../web-apps/settings.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">settings</i></span> <span class="yoo-sidebar-link-text">Form Wizard</span> </span> </a> </li> </ul> <div class="yoo-sidebar-nav-title"> <span class="yoo-sidebar-nav-title-text">Pages</span> <span class="yoo-sidebar-nav-title-dotline"><i class="material-icons-outlined">more_horiz</i></span> </div> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li> <a href="../pages/faq.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">library_add</i></span> <span class="yoo-sidebar-link-text">FAQ</span> </span> </a> </li> <li> <a href="../pages/pricing-table.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">table_chart</i></span> <span class="yoo-sidebar-link-text">Pricing Table</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">account_circle</i></span> <span class="yoo-sidebar-link-text">Sign In/Sign Up</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="../pages/login1.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In 1</span> </span> </a> </li> <li> <a href="../pages/login2.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In 2</span> </span> </a> </li> <li> <a href="../pages/login3.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In 3</span> </span> </a> </li> <li> <a href="../pages/login4.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In 4</span> </span> </a> </li> <li> <a href="../pages/signup1.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up 1</span> </span> </a> </li> <li> <a href="../pages/signup2.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up 2</span> </span> </a> </li> <li> <a href="../pages/signup3.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up 3</span> </span> </a> </li> <li> <a href="../pages/signup4.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up 4</span> </span> </a> </li> </ul> </li> <li class="yoo-sidebar-has-children"> <a> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">error</i></span> <span class="yoo-sidebar-link-text">Error 404</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="../pages/error1.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Error 1</span> </span> </a> </li> <li> <a href="../pages/error2.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Error 2</span> </span> </a> </li> <li> <a href="../pages/error3.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Error 3</span> </span> </a> </li> <li> <a href="../pages/error4.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Error 4</span> </span> </a> </li> </ul> </li> </ul> <div class="yoo-sidebar-nav-title"> <span class="yoo-sidebar-nav-title-text">Basic Elements</span> <span class="yoo-sidebar-nav-title-dotline"><i class="material-icons-outlined">more_horiz</i></span> </div> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li class="yoo-sidebar-has-children"> <a href="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">cloud</i></span> <span class="yoo-sidebar-link-text">UI Components</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="alerts.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Alerts</span> </span> </a> </li> <li> <a href="badge.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Badge</span> </span> </a> </li> <li> <a href="breadcrumb.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Breadcrumb</span> </span> </a> </li> <li> <a href="button.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Buttons</span> </span> </a> </li> <li class="active"> <a href="button-group.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Button group</span> </span> </a> </li> <li> <a href="card.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Card</span> </span> </a> </li> <li> <a href="carousel.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Carousel</span> </span> </a> </li> <li> <a href="collapse.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Collapse</span> </span> </a> </li> <li> <a href="dropdowns.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Dropdowns</span> </span> </a> </li> <li> <a href="forms.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Forms</span> </span> </a> </li> <li> <a href="forms-group.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Input group</span> </span> </a> </li> <li> <a href="jumbotron.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Jumbotron</span> </span> </a> </li> <li> <a href="list-group.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">List group</span> </span> </a> </li> <li> <a href="media-object.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Media object</span> </span> </a> </li> <li> <a href="modal.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Modal</span> </span> </a> </li> <li> <a href="navs.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Navs</span> </span> </a> </li> <li> <a href="navbar.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Navbar</span> </span> </a> </li> <li> <a href="pagination.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Pagination</span> </span> </a> </li> <li> <a href="popovers.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Popovers</span> </span> </a> </li> <li> <a href="progress.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Progress</span> </span> </a> </li> <li> <a href="scrollspy.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Scrollspy</span> </span> </a> </li> <li> <a href="spinners.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Spinners</span> </span> </a> </li> <li> <a href="toasts.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Toasts</span> </span> </a> </li> <li> <a href="tooltips.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <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="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">flag</i></span> <span class="yoo-sidebar-link-text">Layout</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="../layout/overview.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Overview</span> </span> </a> </li> <li> <a href="../layout/grid.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Grid</span> </span> </a> </li> <li> <a href="../layout/utilities-for-layout.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <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="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">insert_drive_file</i></span> <span class="yoo-sidebar-link-text">Contents</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="../content/typography.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Typography</span> </span> </a> </li> <li> <a href="../content/code.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Code</span> </span> </a> </li> <li> <a href="../content/images.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Images</span> </span> </a> </li> <li> <a href="../content/tables.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Tables</span> </span> </a> </li> <li> <a href="../content/figures.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <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="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">folder</i></span> <span class="yoo-sidebar-link-text">Utilities</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="../utilities/borders.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Borders</span> </span> </a> </li> <li> <a href="../utilities/close-icon.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Close icon</span> </span> </a> </li> <li> <a href="../utilities/colors.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Colors</span> </span> </a> </li> <li> <a href="../utilities/display.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Display</span> </span> </a> </li> <li> <a href="../utilities/embed.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Embed</span> </span> </a> </li> <li> <a href="../utilities/flex.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Flex</span> </span> </a> </li> <li> <a href="../utilities/overflow.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Overflow</span> </span> </a> </li> <li> <a href="../utilities/shadow.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Shadows</span> </span> </a> </li> <li> <a href="../utilities/sizing.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sideba