Pages UI
Search…
Content
Contents are referred to as inner layout structure. We have pre-build different inner content structures that are widely used for different web apps or even mobiles apps
Layouts:
    Plain
    Coverpage with parallax
    Full height coverpage with parallax
    Page title parallax
    Column view 3:9
    Column view 9:3
    Column view 6:6

Plain

1
<!-- START PAGE CONTENT -->
2
<div class="content">
3
<!-- START PAGE COVER -->
4
<div class="container-fluid container-fixed-lg ">
5
<ul class="breadcrumb">
6
<li>
7
<p>home</p>
8
</li>
9
<li><a href="#" class="active">Plain template</a>
10
</li>
11
</ul>
12
<!-- END BREADCRUMB -->
13
<h3 class="page-title">Page Title</h3>
14
</div>
15
16
<div class="container-fluid container-fixed-lg">
17
18
<!-- CONTENT GOES HERE-->
19
20
</div>
21
</div>
22
<!-- END PAGE CONTENT -->
Copied!

Coverpage with parallax

1
<div class="content">
2
<!-- START JUMBOTRON -->
3
<div class="jumbotron page-cover" data-pages="parallax">
4
<div class="container-fluid container-fixed-lg">
5
<div class="inner">
6
<!-- START BREADCRUMB -->
7
<ul class="breadcrumb">
8
<li>
9
<p>Home</p>
10
</li>
11
<li>
12
<a class="active" href="#">Parrallax</a>
13
</li>
14
</ul><!-- END BREADCRUMB -->
15
<div class="container-md-height m-b-20">
16
<div class="row row-md-height">
17
<div class="col-lg-7 col-md-6 col-md-height col-middle bg-white">
18
<!-- START PANEL -->
19
20
<div class="full-height">
21
<div class="panel-body text-center">
22
23
</div>
24
</div><!-- END PANEL -->
25
</div>
26
27
<div class="col-lg-5 col-md-height col-md-6 col-top">
28
<!-- START PANEL -->
29
30
<div class="panel panel-transparent">
31
<div class="panel-heading">
32
<div class="panel-title">
33
Getting started
34
</div>
35
</div>
36
37
<div class="panel-body">
38
39
</div>
40
</div><!-- END PANEL -->
41
</div>
42
</div>
43
</div>
44
</div>
45
</div>
46
</div><!-- END JUMBOTRON -->
47
48
<div class="container-fluid container-fixed-lg ">
49
50
</div>
51
</div><!-- END PAGE CONTENT -->
Copied!

Full height coverpage with parallax

1
<div class="page-content-wrapper content-builder full-height">
2
<!-- START PAGE CONTENT -->
3
<div class="content full-height">
4
<!-- START JUMBOTRON -->
5
<div class="jumbotron full-height no-padding" data-pages="parallax">
6
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20 full-height">
7
<div class="inner full-height">
8
<div class="container-xs-height full-height">
9
<div class="col-xs-height col-middle text-center">
10
<div class="col-md-6 col-md-offset-3 text-center">
11
<h2 class="text-center"><img alt="logo" src="assets/img/logo.png"> makes it super-easy to create your
12
dashboard Without a designer.</h2><button class="btn btn-success btn-rounded">Live Preview</button>
13
<button class="btn btn-link text-white">Watch Video</button>
14
</div>
15
</div>
16
</div>
17
</div>
18
</div>
19
</div><!-- END JUMBOTRON -->
20
21
<div class="container-fluid container-fixed-lg">
22
23
</div>
24
</div>
25
</div><!-- END PAGE CONTENT -->
Copied!

Page title parallax

1
<div class="content">
2
<!-- START JUMBOTRON -->
3
<div class="jumbotron no-margin" data-pages="parallax">
4
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
5
<div class="inner">
6
<h3 class="">Page Title</h3>
7
</div>
8
</div>
9
</div><!-- END JUMBOTRON -->
10
<div class="container-fluid container-fixed-lg demo-container">
11
<!-- START BREADCRUMB -->
12
<ul class="breadcrumb">
13
<li>
14
<p>home</p>
15
</li>
16
<li>
17
<a class="active" href="#">Parallax for page title</a>
18
</li>
19
</ul><!-- END BREADCRUMB -->
20
21
</div>
22
</div><!-- END PAGE CONTENT -->
Copied!

Column view 3:9

1
<!-- START PAGE CONTENT WRAPPER -->
2
<div class="page-content-wrapper content-builder full-height">
3
<!-- START PAGE CONTENT -->
4
<div class="content full-height">
5
<div class="container-fluid full-height no-padding">
6
<div class="row full-height no-margin">
7
<div class="col-md-3 no-padding b-r b-grey sm-b-b full-height">
8
<div class="bg-white full-height">
9
<!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
10
YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
11
EXAMPLE : bg-success
12
-->
13
</div>
14
</div>
15
<div class="col-md-9 no-padding full-height">
16
<div class="placeholder full-height">
17
<!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
18
YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
19
EXAMPLE : bg-success
20
-->
21
</div>
22
</div>
23
</div>
24
</div>
25
</div>
26
<!-- END PAGE CONTENT -->
27
</div>
28
<!-- END PAGE CONTENT WRAPPER -->
Copied!
Column view 9:3
1
<!-- START PAGE CONTENT WRAPPER -->
2
<div class="page-content-wrapper content-builder full-height">
3
<!-- START PAGE CONTENT -->
4
<div class="content full-height">
5
<div class="container-fluid full-height no-padding">
6
<div class="row full-height no-margin">
7
<div class="col-md-9 no-padding b-r b-grey sm-b-b full-height">
8
<div class="bg-white full-height">
9
<!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
10
YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
11
EXAMPLE : bg-success
12
-->
13
</div>
14
</div>
15
<div class="col-md-3 no-padding full-height">
16
<div class="placeholder full-height">
17
<!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
18
YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
19
EXAMPLE : bg-success
20
-->
21
</div>
22
</div>
23
</div>
24
</div>
25
</div>
26
<!-- END PAGE CONTENT -->
27
</div>
28
<!-- END PAGE CONTENT WRAPPER -->
Copied!
Column view 6:6
1
<!-- START PAGE CONTENT WRAPPER -->
2
<div class="page-content-wrapper content-builder full-height">
3
<!-- START PAGE CONTENT -->
4
<div class="content full-height">
5
<div class="container-fluid full-height no-padding">
6
<div class="row full-height no-margin">
7
<div class="col-md-6 no-padding b-r b-grey sm-b-b full-height">
8
<div class="bg-white full-height">
9
<!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
10
YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
11
EXAMPLE : bg-success
12
-->
13
</div>
14
</div>
15
<div class="col-md-6 no-padding full-height">
16
<div class="placeholder full-height">
17
<!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
18
YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
19
EXAMPLE : bg-success
20
-->
21
</div>
22
</div>
23
</div>
24
</div>
25
</div>
26
<!-- END PAGE CONTENT -->
27
</div>
28
<!-- END PAGE CONTENT WRAPPER -->
Copied!
Last modified 3yr ago