uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Bootstrap 24 Grid - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>24 Columns Grid for Bootstrap</h3> <p>For more usage, please refer directly to the official website of Bootstrap, and only need to add the prefix <code>ex-</code> before the classname</p> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="ex-row"> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> </div>  </div>  </section>  <section> <div class="container"> <div class="ex-row"> <div class="ex-col-12"> <h3>Column (No gutters)</h3> <p>The class <code>.ex-g-0</code> used here will be applied <code>.ex-row</code></p> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="ex-row ex-g-0"> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> <div class="ex-col"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h6 class="uix-spacing--no">1/24</h6> </div> </div> </div>   </section>  <section> <div class="container"> <div class="ex-row"> <div class="ex-col-12"> <h3>Center Column</h3> <p>The class <code>.align-items-center</code> or <code>.justify-content-center</code> used here will be applied <code>.ex-row</code></p> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="ex-row justify-content-center"> <div class="ex-col-24 ex-col-md-15"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h4 class="uix-spacing--no">15/24</h4> <span>ex-col-24 ex-col-md-15</span> </div> </div> <div class="ex-col-24 ex-col-md-9"> <div style="background: #f8f9fa; box-shadow: inset 0px 0px 0px 1px #999;"> <h4 class="uix-spacing--no">9/24</h4> <span>ex-col-24 ex-col-md-9</span> </div> </div> </div>  </div>  </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')