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
<!-- START PAGE CONTENT -->
<div class="content">
    <!-- START PAGE COVER -->
    <div class="container-fluid container-fixed-lg ">
        <ul class="breadcrumb">
            <li>
                <p>home</p>
            </li>
            <li><a href="#" class="active">Plain template</a> 
            </li>
        </ul>
        <!-- END BREADCRUMB -->
        <h3 class="page-title">Page Title</h3>
    </div>
​
    <div class="container-fluid container-fixed-lg">
​
          <!-- CONTENT GOES HERE-->
​
    </div>
</div>
<!-- END PAGE CONTENT -->
Coverpage with parallax
<div class="content">
  <!-- START JUMBOTRON -->
  <div class="jumbotron page-cover" data-pages="parallax">
    <div class="container-fluid container-fixed-lg">
      <div class="inner">
        <!-- START BREADCRUMB -->
        <ul class="breadcrumb">
          <li>
            <p>Home</p>
          </li>
          <li>
            <a class="active" href="#">Parrallax</a>
          </li>
        </ul><!-- END BREADCRUMB -->
        <div class="container-md-height m-b-20">
          <div class="row row-md-height">
            <div class="col-lg-7 col-md-6 col-md-height col-middle bg-white">
              <!-- START PANEL -->
​
              <div class="full-height">
                <div class="panel-body text-center">
                
                </div>
              </div><!-- END PANEL -->
            </div>
​
            <div class="col-lg-5 col-md-height col-md-6 col-top">
              <!-- START PANEL -->
​
              <div class="panel panel-transparent">
                <div class="panel-heading">
                  <div class="panel-title">
                    Getting started
                  </div>
                </div>
​
                <div class="panel-body">
​
                </div>
              </div><!-- END PANEL -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- END JUMBOTRON -->
​
  <div class="container-fluid container-fixed-lg ">
​
  </div>
</div><!-- END PAGE CONTENT -->
Full height coverpage with parallax
<div class="page-content-wrapper content-builder full-height">
  <!-- START PAGE CONTENT -->
  <div class="content full-height">
    <!-- START JUMBOTRON -->
    <div class="jumbotron full-height no-padding" data-pages="parallax">
      <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20 full-height">
        <div class="inner full-height">
          <div class="container-xs-height full-height">
            <div class="col-xs-height col-middle text-center">
              <div class="col-md-6 col-md-offset-3 text-center">
                <h2 class="text-center"><img alt="logo" src="assets/img/logo.png"> makes it super-easy to create your
                dashboard Without a designer.</h2><button class="btn btn-success btn-rounded">Live Preview</button>
                <button class="btn btn-link text-white">Watch Video</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- END JUMBOTRON -->
​
    <div class="container-fluid container-fixed-lg">
    
    </div>
  </div>
</div><!-- END PAGE CONTENT -->
Page title parallax
<div class="content">
  <!-- START JUMBOTRON -->
  <div class="jumbotron no-margin" data-pages="parallax">
    <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
      <div class="inner">
        <h3 class="">Page Title</h3>
      </div>
    </div>
  </div><!-- END JUMBOTRON -->
  <div class="container-fluid container-fixed-lg demo-container">
    <!-- START BREADCRUMB -->
    <ul class="breadcrumb">
      <li>
        <p>home</p>
      </li>
      <li>
        <a class="active" href="#">Parallax for page title</a>
      </li>
    </ul><!-- END BREADCRUMB -->
    
  </div>
</div><!-- END PAGE CONTENT -->
Column view 3:9
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper content-builder full-height">  
    <!-- START PAGE CONTENT -->
    <div class="content full-height">
        <div class="container-fluid full-height no-padding">
            <div class="row full-height no-margin">
                <div class="col-md-3 no-padding b-r b-grey sm-b-b full-height">
                    <div class="bg-white full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
                <div class="col-md-9 no-padding full-height">
                    <div class="placeholder full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
            </div>
            </div>
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
Column view 9:3
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper content-builder full-height">  
    <!-- START PAGE CONTENT -->
    <div class="content full-height">
        <div class="container-fluid full-height no-padding">
            <div class="row full-height no-margin">
                <div class="col-md-9 no-padding b-r b-grey sm-b-b full-height">
                    <div class="bg-white full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
                <div class="col-md-3 no-padding full-height">
                    <div class="placeholder full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
            </div>
            </div>
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
Column view 6:6
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper content-builder full-height">  
    <!-- START PAGE CONTENT -->
    <div class="content full-height">
        <div class="container-fluid full-height no-padding">
            <div class="row full-height no-margin">
                <div class="col-md-6 no-padding b-r b-grey sm-b-b full-height">
                    <div class="bg-white full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
                <div class="col-md-6 no-padding full-height">
                    <div class="placeholder full-height">
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
                       EXAMPLE : bg-success
                     -->
                    </div>
                </div>
            </div>
            </div>
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
Introduction - Previous
Sass
Next - Apps
Calendar
Last updated 3 years ago