BS4Start - Bootstrap 4 UI / Starter Kit

BS4Start is a responsive Bootstrap 4 UI / Starter Kit built for everyone who wants to create web-apps or websites on Bootstrap framework very fast; you don't have to be a web-developer or a designer to use this Starter Kit, it's very easy to use even for newbies. BS4Start helps you to create your next Bootstrap project much faster then before. BS4Start comes with a simple and elegant design with focus on content and readability. This template was built using SASS for faster customizations.

Features

 
aspect_ratio
Fully Responsive

Built on the latest Bootstrap version 4

visibility
Retina Ready

It looks great on retina displays

code
HTML5 / CSS3

Built on the latest technologies

description
Well Documented

Easy to follow documentation

style
SASS Files

Fast and easy customizations

email
24/7 Support

Fast & friendly email support

Files

 
  • folder css - this folder contains all css files
    • insert_drive_file animate.css
    • insert_drive_file bootstrap.min.css
    • insert_drive_file bootstrap.min.css.map
    • insert_drive_file font-awesome.min.css
    • insert_drive_file owl.carousel.min.css
    • insert_drive_file style.css
  • folder fonts - this folder contains all font files
    • insert_drive_file fontawesome-webfont.eot
    • insert_drive_file fontawesome-webfont.svg
    • insert_drive_file fontawesome-webfont.ttf
    • insert_drive_file fontawesome-webfont.woff
    • insert_drive_file fontawesome-webfont.woff2
    • insert_drive_file FontAwesome.otf
  • folder images - this folder contains all image files
    • insert_drive_file favicon.png
    • insert_drive_file logo-light.png
    • insert_drive_file logo-white.png
    • insert_drive_file logo.png
    • insert_drive_file marker.png
    • insert_drive_file menu.png
    • insert_drive_file menu-inverse.png
    • + other demo and placeholder images
  • folder js - this folder contains all javascript files
    • insert_drive_file bootstrap.min.js
    • insert_drive_file hide-nav.js
    • insert_drive_file jquery.countTo.js
    • insert_drive_file jquery.easing.min.js
    • insert_drive_file jquery.min.js
    • insert_drive_file jquery.shuffle.min.js
    • insert_drive_file map.js
    • insert_drive_file owl.carousel.min.js
    • insert_drive_file portfolio.js
    • insert_drive_file preloader.js
    • insert_drive_file smooth-scroll-sticky-nav.js
    • insert_drive_file smooth-scroll.js
  • folder scss - this folder contains all SASS files
    • insert_drive_file _alerts-badges.scss
    • insert_drive_file _buttons.scss
    • insert_drive_file _cards.scss
    • insert_drive_file _carousel.scss
    • insert_drive_file _collapse-dropdowns.scss
    • insert_drive_file _content-blocks.scss
    • insert_drive_file _custom.scss
    • insert_drive_file _footers.scss
    • insert_drive_file _forms-input.scss
    • insert_drive_file _headers.scss
    • insert_drive_file _media-screens.scss
    • insert_drive_file _mixins.scss
    • insert_drive_file _modals.scss
    • insert_drive_file _navigations.scss
    • insert_drive_file _popovers-tooltips.scss
    • insert_drive_file _progress.scss
    • insert_drive_file _sliders.scss
    • insert_drive_file _tables.scss
    • insert_drive_file _templates.scss
    • insert_drive_file _typography.scss
    • insert_drive_file _variables.scss
    • insert_drive_file styles.scss
  • insert_drive_file index.html
  • insert_drive_file 404.html
  • insert_drive_file alerts-badges.html
  • insert_drive_file buttons.html
  • insert_drive_file cards.html
  • insert_drive_file carousel.html
  • insert_drive_file collapse-dropdowns.html
  • insert_drive_file content-blocks.html
  • insert_drive_file footers.html
  • insert_drive_file forms-input.html
  • insert_drive_file grid-layouts.html
  • insert_drive_file headers.html
  • insert_drive_file media-objects.html
  • insert_drive_file modals.html
  • insert_drive_file navigations.html
  • insert_drive_file popovers-tooltips.html
  • insert_drive_file progress.htmlsliders.html
  • insert_drive_file sliders.html
  • insert_drive_file tables.html
  • insert_drive_file typography.html
  • insert_drive_file basic-template.html
  • insert_drive_file blog-template.html
  • insert_drive_file business-template.html
  • insert_drive_file landing-page-template.html
  • insert_drive_file portfolio-template.html
  • insert_drive_file shop-template.html
  • insert_drive_file page-template.html
  • insert_drive_file full-width-template.html

Typography

 

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Large Paragraph (lead). Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames.

Regular Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Extra Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempus luctus tempus.


  • Aliquam molestie quam in tincidunt
  • Morbi quis neque non nisl egestas
  • Vestibulum nisi nibh, pulvinar sit amet
  • Mauris pretium elit ac facilisis mollis
  • Mauris vitae magna in dolor porta
  1. Aliquam molestie quam in tincidunt
  2. Morbi quis neque non nisl egestas
  3. Vestibulum nisi nibh, pulvinar amet
  4. Mauris pretium elit ac facilisis mollis
  5. Mauris vitae magna in dolor porta

Primary. Morbi quis neque non nisl egestas laoreet

Muted. Aliquam molestie quam in tincidunt

Success. Vestibulum nisi nibh, pulvinar sit amet lacinia

Info. Mauris pretium elit ac facilisis mollis posuere

Warning. Mauris vitae magna in dolor porta aliquam

Danger. Mauris vitae magna in dolor porta aliquam


Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H6 Heading</h5>
<h6>H6 Heading</h6>

<p class="lead"><strong>Large Paragraph (lead)</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames.</p>
<p><strong>Regular Paragraph</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="text-sm"><strong>Small Paragraph</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="text-xs"><strong>Extra Small Paragraph</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempus luctus tempus.</p>

<ul class="list-featured space-bottom-20">
    <li>Aliquam molestie quam in tincidunt</li>
    <li>Morbi quis neque non nisl egestas</li>
    <li>Vestibulum nisi nibh, pulvinar sit amet</li>
    <li>Mauris pretium elit ac facilisis mollis</li>
    <li>Mauris vitae magna in dolor porta</li>
</ul>
<ol>
    <li>Aliquam molestie quam in tincidunt</li>
    <li>Morbi quis neque non nisl egestas</li>
    <li>Vestibulum nisi nibh, pulvinar amet</li>
    <li>Mauris pretium elit ac facilisis mollis</li>
    <li>Mauris vitae magna in dolor porta</li>
</ol>

<p class="text-primary"><strong>Primary</strong>. Morbi quis neque non nisl egestas laoreet</p>
<p class="text-muted"><strong>Muted</strong>. Aliquam molestie quam in tincidunt</p>
<p class="text-success"><strong>Success</strong>. Vestibulum nisi nibh, pulvinar sit amet lacinia</p>
<p class="text-info"><strong>Info</strong>. Mauris pretium elit ac facilisis mollis posuere</p>
<p class="text-warning"><strong>Warning</strong>. Mauris vitae magna in dolor porta aliquam</p>
<p class="text-danger"><strong>Danger</strong>. Mauris vitae magna in dolor porta aliquam</p>

<blockquote class="blockquote">
    <p class="mb-0">Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote blockquote-reverse">
    <p class="mb-0">Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alerts

 
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">check_circle</i><strong>Well done!</strong> You successfully read this important alert message.
</div><!-- / alert -->

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">info</i><strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div><!-- / alert -->

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">warning</i><strong>Warning!</strong> Better check yourself, you're not looking too good.
</div><!-- / alert -->

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">error</i><strong>Oh snap! </strong>Change a few things up and try submitting again.
</div><!-- / alert -->

Badges

 

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Default Primary Success Info Warning Danger 
<h1>Example heading <span class="badge badge-default mb-2">New</span></h1>
<h2>Example heading <span class="badge badge-primary mb-2">New</span></h2>
<h3>Example heading <span class="badge badge-success m-2">New</span></h3>
<h4>Example heading <span class="badge badge-info mb-2">New</span></h4>
<h5>Example heading <span class="badge badge-warning mb-2">New</span></h5>
<h6>Example heading <span class="badge badge-danger mb-2">New</span></h6>

<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Buttons

 


<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>

<button type="button" class="btn btn-outline-primary">Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Outline Button</button>
<button type="button" class="btn btn-outline-success">Outline Button</button>
<button type="button" class="btn btn-outline-info">Outline Button</button>
<button type="button" class="btn btn-outline-warning">Outline Button</button>
<button type="button" class="btn btn-outline-danger">Outline Button</button>

Cards

 
This is some text and button within a card block.Button

Card title

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
Text Aligned-center

Card Title

With supporting text below as a natural lead-in to additional content.

Button
card-footer 
<div class="card">
    <div class="card-block">
        This is some text and button within a card block.<a href="#x" class="btn btn-xs btn-primary ml-2">Button</a>
    </div>
</div><!-- / card -->

<div class="card">
    <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#x" class="btn btn-primary">Button</a>
    </div><!-- / card-block -->
</div><!-- / card -->

<div class="card text-center">
    <div class="card-header">
        Text Aligned-center
    </div><!-- / card-header -->
    <div class="card-block">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#x" class="btn btn-primary">Button</a>
    </div><!-- / card-block -->
    <div class="card-footer text-muted">
        card-footer
    </div><!-- / card-footer -->
</div><!-- / card -->

Modals

 
Modal Example

Modal body text goes here.

<div class="example-modal">
    <div class="modal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal Example</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div><!-- / modal-header -->
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div><!-- / modal-body -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div><!-- / modal-footer -->
            </div><!-- / modal-content -->
        </div><!-- / modal-dialog -->
    </div><!-- / modal -->
</div><!-- / example-modal -->

<!-- small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".small-modal-example">Small Modal</button>

<div class="modal fade small-modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Example</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / small modal -->

<!-- medium modal -->
<button type="button" class="btn btn-primary mr-1" data-toggle="modal" data-target=".medium-modal-example">Medium Modal</button>

<div class="modal fade medium-modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Example</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- modal-dialog -->
</div><!-- / modal -->
<!-- / medium modal -->

<!-- large modal -->
<button type="button" class="btn btn-primary mr-1" data-toggle="modal" data-target=".large-modal-example">Large Modal</button>

<div class="modal fade large-modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Example</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- modal-dialog -->
</div><!-- / modal -->
<!-- / large modal -->

Progress

 
25%
40%
55%
70%
85%



<div class="progress">
    <div class="progress-bar animated fadeInLeft" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-success animated fadeInLeft" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-info animated fadeInLeft" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">55%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-warning animated fadeInLeft" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-danger animated fadeInLeft" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div><!-- / progress -->


<div class="progress">
    <div class="progress-bar progress-bar-striped animated fadeInLeft" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-success animated fadeInLeft" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info animated fadeInLeft" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-warning animated fadeInLeft" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger animated fadeInLeft" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->


<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->


<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

Tables

 
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<!-- default table -->
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
<!-- / default table -->

<!-- table inverse -->
<table class="table table-inverse">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
<!-- / table inverse -->

Please note! the above components are just the basic ones, we do have much more components, please check index.html file to see all components and premade templates this UI / Starter Kit can offer.

Getting Started

 

Edit colors & styles

You can change the theme's colors and styles using SASS in scss folder. In order to use SASS you must install a SASS processor app like Scout. All of the theme colors and fonts can be changed in _variables.scss:

// Typography

$primary-font: 'Rubik', sans-serif;
$regular: 400;
$bold: 500;
$letter-spacing: 0.03rem;
$letter-spacing-2x: 0.06rem;
$letter-spacing-big: 0.1rem;

// Color Palette

$primary: #c1996b;
$primary-hover: #ad8b60;
$primary-transparent: rgba(195,157,109,0.95);
$primary-transparent-2: rgba(195,157,109,0.75);
$secondary: #efebe8;
$secondary-hover: #d6d1cc;
$success: #8ac148;
$success-hover: #599014;
$info: #00a9f4;
$info-hover: #007ac1;
$warning: #ff9800;
$warning-hover: #c66900;
$danger: #e53635;
$danger-hover: #ab000e;
$title-color: #222;
$text-color: #666;
$light-bg-color: #f7f7f7;
$dark-bg-color: #222;
$body-bg: #fefefe;
$dark-body-bg: #111;
$white: #fff;
$light-grey: #ebebeb;
$grey: #ccc;
$mid-grey: #777;
$dark-grey: #333;
$black: #000;

The components of the template can also be modified in the scss folder, every component has it's own .scss file, just pick the one you want to edit and open the file in a code or text editor to modify it.

Setting up Google Maps

To make your Google Maps to work you must create a Google Maps API KEY and add it to the html file where you use a Google Maps, for example on our demo we used the Google Maps in content-blocks.html, basic-template.html, business-template.html and shop-template.html there you must have the below javascript:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

please replace the YOUR_API_KEY text with the API KEY you've created.

Credits

 

Bootstrap

JQuery

JQuery Easing

Animate CSS

Material Icons

Font Awesome

Owl Carousel

jQuery countTo

Shuffle JS

Pixabay

StockSnap