uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
274 lines (160 loc) • 8.62 kB
HTML
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
<meta charset="@@{website_charset}" />
<title>Full Width Column to Edge - @@{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 Area
============================================= -->
<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>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Full Width Column to Edge</h3>
<p>You also have a choice of whether the row's content is full width or fixed width.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="row js-uix-common-height">
<div class="col-lg-6 col-md-6">
<div class="uix-filter-hover--color">
<img src="assets/images/demo/test-img-big-1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-v-align--table">
<div>
<!-- /// -->
<h4 class="uix-t-c">Heading</h4>
<p class="uix-t-c">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
<!-- /// -->
</div>
</div>
</div>
</div>
<!-- /.row -->
<br><br>
<div class="row js-uix-common-height">
<div class="col-lg-6 col-md-6">
<div class="uix-v-align--table">
<div>
<!-- /// -->
<h4 class="uix-t-c">Heading</h4>
<p class="uix-t-c">Duis nisi orci, pretium eu tincidunt vitae, tincidunt sed augue.</p>
<!-- /// -->
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-filter-hover--color">
<img src="assets/images/demo/test-img-big-2.jpg" alt="">
</div>
</div>
</div>
<!-- /.row -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Full Width Column to Edge Inside Container</h3>
<p>Add this class <code>.js-uix-fullwidth-column-to-edge--extend-right</code> or <code>.js-uix-fullwidth-column-to-edge--extend-left</code> to the <code>.row</code> of Bootstrap Grid system to create the column to edge.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row js-uix-fullwidth-column-to-edge--extend-left">
<div class="col-sm-8">
<img src="assets/images/demo/cool-slider-2.jpg" alt="">
</div>
<div class="col-sm-4">
<br><br>
<h4>Heading</h4>
<p>Duis nisi orci, pretium eu tincidunt vitae, tincidunt sed augue.</p>
</div>
</div>
<!-- .row end -->
<br><br>
<div class="row js-uix-fullwidth-column-to-edge--extend-right">
<div class="col-sm-4">
<br><br>
<h4>Heading</h4>
<p>Duis nisi orci, pretium eu tincidunt vitae, tincidunt sed augue.</p>
</div>
<div class="col-sm-8">
<img src="assets/images/demo/cool-slider-1.jpg" alt="">
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Full Width (Fixed & Variable) Column to Edge</h3>
<p>The goal is to have a fixed width column and a variable width column but to be able to define at what size the variable-width column breaks down to the next line.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="uix-fullwidth-column-to-edge--fixed-and-variable">
<div class="uix-fullwidth-column-to-edge--fixed-and-variable__fixed uix-outer-shadow--regular">
<h4>250 Width Fixed</h4>
</div>
<div class="uix-fullwidth-column-to-edge--fixed-and-variable__variable uix-outer-shadow--regular">
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>
</section>
</main>
@@include('./src/components/_global/include-copyright.html')
</div>
<!-- .uix-wrapper end -->
@@include('./src/components/_global/include-footer.html')