Responsive Bootstrap One Page HTML Template

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

HTML structure


This theme is a fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.
                
                
---- Content Here ----

Page head


Page head contains metadata and css files:
                
                    
                    BooSign | Responsive Bootstrap One Page HTML Template
                    
                    
                    

                    
                    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
                    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
                    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
                    <link href="assets/css/animate.min.css" rel="stylesheet">
                    <link href="assets/css/style.css" rel="stylesheet">
                    <link href="assets/css/panel.min.css" rel="stylesheet">
                    <link href="assets/css/style-responsive.min.css" rel="stylesheet">
                    <link href="assets/css/theme/default.css" id="theme" rel="stylesheet">
                    
                
            

Header


Content Structure

For example, "About Us" block


                
                

--- Title ---

--- Description ---

--- Title ---

--- Some text ---

--- Title ---

--- Some text ---

Footer


                
                
                

                

            

JS Part


                <!-- BEGIN JS  -->
                <script src="assets/plugins/jquery/jquery-1.12.4.min.js"></script>
                <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
                <!--[if lt IE 9]>
                <script src="assets/crossbrowserjs/html5shiv.js"></script>
                <script src="assets/crossbrowserjs/respond.min.js"></script>
                <script src="assets/crossbrowserjs/excanvas.min.js"></script>
                <![endif]-->
                <script src="assets/plugins/scrollMonitor/scrollMonitor.js"></script>
                <script src="assets/plugins/parallax/parallax.min.js"></script>
                <script src="assets/plugins/imagesloaded/imagesloaded.min.js"></script>
                <script src="assets/plugins/filterizr/dist/jquery.filterizr.min.js"></script>
                <script src="assets/js/apps.min.js"></script>
                <!--  END JS  -->
            

Color Options


Select the css theme from the assets/css/theme/ folder.

                <!-- default (green) -->

                <link href="assets/css/theme/default.css" rel="stylesheet">

                <!-- red -->

                <link href="assets/css/theme/red.css" rel="stylesheet">

                <!-- orange -->

                <link href="assets/css/theme/orange.css" rel="stylesheet">

                <!-- blue -->

                <link href="assets/css/theme/blue.css" rel="stylesheet">

                <!-- purple -->

                <link href="assets/css/theme/purple.css" rel="stylesheet">
            

Block animation


  1. Add data-attribute data-animation="true".
  2. Add data-attribute data-animation-type=" _ANIMATION-TYPE_ ".
  3. Choose _ANIMATION-TYPE_ from Animate.css
                <!-- begin #about -->
                <div id="about" class="content" data-scrollview="true">
                    <!-- begin container -->
                    <div class="container" data-animation="true" data-animation-type="fadeInDown">
                        <h2 class="content-title" data-animation="true" data-animation-type="fadeInDown">About Us</h2>
                        <p class="content-desc" data-animation="true" data-animation-type="fadeInDown">
                            ...
                        </p>
                        <!-- begin row -->
                        <div class="row">
                            <!-- begin col-6 -->
                            <div class="col-md-6" data-animation="true" data-animation-type="fadeInLeft">
                                <!-- begin about -->
                                <div class="about">
                                    ...
                                </div>
                                <!-- end about -->
                            </div>
                            <!-- end col-6 -->
                            <!-- begin col-6 -->
                            <div class="col-md-5 col-md-offset-1" data-animation="true" data-animation-type="fadeInRight">
                                <h3>Our Skills</h3>
                                <!-- begin skills -->
                                <div class="skills">
                                    ...
                                </div>
                                <!-- end skills -->
                            </div>
                            <!-- end col-6 -->
                        </div>
                        <!-- end row -->
                    </div>
                    <!-- end container -->
                </div>
                <!-- end #about -->
            

CSS - Table of contents

                /*

                    Project: BooSign | Responsive Bootstrap One Page HTML Template
                    Author : Alex Ashihmin

                    [Table of contents]

                        1.  General
                        2.  Header
                            2.1 Logo

                        3.  Content
                        4.  Home
                        5.  About Us
                        6.  Achievements
                        7.  Services
                        8.  Quote
                        9.  Team
                        10. Advertising
                        11. Portfolio
                        12. Testimonials
                        13. Pricing tables
                        14. Contacts
                        15. Footer

                        Media queries - /assets/css/style-responsive.css

                        Color Options - /assets/css/theme/

                */
            

Plugins

Name Files
Bootstrap v.3.3.7
                                <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
                            
                                <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
                            
jQuery v.1-12-4
                                <script src="assets/plugins/jquery/jquery-1.12.4.min.js"></script>
                            
Font Awesome Icons
                                <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
                            
Animate.css
                                <link href="assets/css/animate.min.css" rel="stylesheet">
                            
scrollMonitor
                                <script src="assets/plugins/scrollMonitor/scrollMonitor.js"></script>
                            
parallax.js
                                <script src="assets/plugins/parallax/parallax.min.js"></script>
                            
imagesLoaded
                                <script src="assets/plugins/imagesloaded/imagesloaded.min.js"></script>
                            
Filterizr
                                <script src="assets/plugins/filterizr/dist/jquery.filterizr.min.js"></script>
                            
Masonry (blog.html)
                                <script src="assets/plugins/masonry/masonry.min.js"></script>
                            

Once again

Thank you so much for purchasing this theme.

As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.

No guarantees, but I'll do my best to assist.

© 2017 AlexWerst