istrap
Version:
iOS design system blends in with Bootstrap
1,083 lines (1,055 loc) • 64.6 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>Layout - Overview</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 class="active">
<a href="overview.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Overview</span>
</span>
</a>
</li>
<li>
<a href="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="../utilities/borders.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Borders</span>
</span>
</a>
</li>
<li>
<a href="../utilities/close-icon.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Close icon</span>
</span>
</a>
</li>
<li>
<a href="../utilities/colors.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Colors</span>
</span>
</a>
</li>
<li>
<a href="../utilities/display.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Display</span>
</span>
</a>
</li>
<li>
<a href="../utilities/embed.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Embed</span>
</span>
</a>
</li>
<li>
<a href="../utilities/flex.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Flex</span>
</span>
</a>
</li>
<li>
<a href="../utilities/overflow.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Overflow</span>
</span>
</a>
</li>
<li>
<a href="../utilities/shadow.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Shadows</span>
</span>
</a>
</li>
<li>
<a href="../utilities/sizing.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Sizing</span>
</span>
</a>
</li>
<li>
<a href="../utilities/spacing.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Spacing</span>
</span>
</a>
</li>
<li>
<a href="../utilities/stretched-link.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Stretched link</span>
</span>
</a>
</li>
<li>
<a href="../utilities/text.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Text</span>
</span>
</a>
</li>
<li>
<a href="../utilities/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">Overview</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="bd-content" role="main">
<h2 id="containers"><span class="bd-content-title">Containers<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#containers" style="padding-left: 0.375em;"></a></span></h2>
<p>Containers are the most basic layout element in Bootstrap and are <strong>required when using our default grid system</strong>. Containers are used to contain, pad, and (sometimes) center the content within them. While containers <em>can</em> be nested, most layouts do not require a nested container.</p>
<p>Bootstrap comes with three different containers:</p>
<ul>
<li><code class="highlighter-rouge">.container</code>, which sets a <code class="highlighter-rouge">max-width</code> at each responsive breakpoint</li>
<li><code class="highlighter-rouge">.container-fluid</code>, which is <code class="highlighter-rouge">width: 100%</code> at all breakpoints</li>
<li><code class="highlighter-rouge">.container-{breakpoint}</code>, which is <code class="highlighter-rouge">width: 100%</code> until the specified breakpoint</li>
</ul>
<p>The table below illustrates how each container’s <code class="highlighter-rouge">max-width</code> compares to the original <code class="highlighter-rouge">.container</code> and <code class="highlighter-rouge">.container-fluid</code> across each breakpoint.</p>
<p>See them in action and compare them in our <a href="/docs/4.4/examples/grid/#containers">Grid example</a>.</p>
<table class="table text-left">
<thead>
<tr>
<th></th>
<th>
Extra small<br>
<span class="font-weight-normal"><576px</span>
</th>
<th>
Small<br>
<span class="font-weight-normal">≥576px</span>
</th>
<th>
Medium<br>
<span class="font-weight-normal">≥768px</span>
</th>
<th>
Large<br>
<span class="font-weight-normal">≥992px</span>
</th>
<th>
Extra large<br>
<span class="font-weight-normal">≥1200px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.container</code></td>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
<td><code>.container-sm</code></td>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
<td><code>.container-md</code></td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
<td><code>.container-lg</code></td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
<td><code>.container-xl</code></td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>1140px</td>
</tr>
<tr>
<td><code>.container-fluid</code></td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
</tr>
</tbody>
</table>
<h3 id="all-in-one"><span class="bd-content-title">All-in-one<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#all-in-one" style="padding-left: 0.375em;"></a></span></h3>
<p>Our default <code class="highlighter-rouge">.container</code> class is a responsive, fixed-width container, meaning its <code class="highlighter-rouge">max-width</code> changes at each breakpoint.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="c"><!-- Content here --></span>
<span class="nt"></div></span></code></pre></figure>
<h3 id="fluid"><span class="bd-content-title">Fluid<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#fluid" style="padding-left: 0.375em;"></a></span></h3>
<p>Use <code class="highlighter-rouge">.container-fluid</code> for a full width container, spanning the entire width of the viewport.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
...
<span class="nt"></div></span></code></pre></figure>
<h3 id="responsive"><span class="bd-content-title">Responsive<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#responsive" style="padding-left: 0.375em;"></a></span></h3>
<p>Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply <code class="highlighter-rouge">max-width</code>s for each of the higher breakpoints. For example, <code class="highlighter-rouge">.container-sm</code> is 100% wide to start until the <code class="highlighter-rouge">sm</code> breakpoint is reached, where it will scale up with <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-sm"</span><span class="nt">></span>100% wide until small breakpoint<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-md"</span><span class="nt">></span>100% wide until medium breakpoint<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-lg"</span><span class="nt">></span>100% wide until large breakpoint<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-xl"</span><span class="nt">></span>100% wide until extra large breakpoint<span class="nt"></div></span></code></pre></figure>
<h2 id="responsive-breakpoints"><span class="bd-content-title">Responsive breakpoints<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#responsive-breakpoints" style="padding-left: 0.375em;"></a></span></h2>
<p>Since Bootstrap is developed to be mobile first, we use a handful of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.</p>
<p>Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.</p>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)</span>
<span class="c1">// No media query for `xs` since this is the default in Bootstrap</span>
<span class="c1">// Small devices (landscape phones, 576px and up)</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
<span class="c1">// Medium devices (tablets, 768px and up)</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
<span class="c1">// Large devices (desktops, 992px and up)</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
<span class="c1">// Extra large devices (large desktops, 1200px and up)</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
<p>Since we write our source CSS in Sass, all our media queries are available via Sass mixins:</p>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// No media query necessary for xs b