Knowstack Bootstrap Templates

This is Bootstrap Jumbotron. The div class is jumbotron

In this template the Navigation bar used is fixed and thus on scrolling the Navigation Bar continues to stay at the top

navbar navbar-default navbar-fixed-top is used in the this example
use navbar navbar-default navbar-static-top to make the navigation bar scroll along with the page

col-lg-12

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

col-lg-6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

col-lg-6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

col-lg-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

col-lg-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

col-lg-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Class used below is form-signin .
For email address type text is used and for password type"password is used"

The Navigation bars given below are NOT navbar-fixed-top, if they are set to fixed-top they will stick to the header

Success! This is a success message
Alert Message! This is an Alert Message
Warning Message! This is a warning message
Alert Danger! This is a danger message

The following are the different button styles

The button given below are disabled using class="btn btn-default disabled"

Different button sizes

btn-group-justified

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Emphasis classes

This is muted text class = "text-muted".

This is muted text.. class = "text-primary".

class = text-warning.

class = text-danger.

class = text-success.

class = text-info

The following is a basic table

Emp # First Name Last Name Email
10001 John Doe jdoe@knowstack.com
10002 Mary Jane mjane@knowstack.com
10003 Jane Doe jane.doe@knowstack.com

The following is a table with row highlights

# Column 1 Column 2 Column 3
1 td class="success" td class="success" td class="success"
2 td class="danger" td class="danger" td class="danger"
3 td class="warning" td class="warning" td class="warning"
4 td class="active" td class="active" td class="active"
Form 1
$
Form 2
The above block is resizable.

Multiselect control. select multiple

The below carousel implementation has three slides with three background images and contents overlayed on top of it

progress-alternatives is used for color fill and progress-striped is used for stripped progress bar visualization
Basic Progress Bar
60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)


progress-striped active is used for animated progress bar
45% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Default Panel title

This is a default panel uses the class "panel panel-default and panel-title and panel-body"

Primary Panel title

Primary Panel uses the class "panel panel-primary"

Success Panel title

Primary Panel uses the class "panel panel-success"

Info Panel title

Primary Panel uses the class "panel panel-info"

Warning Panel Title

Primary Panel uses the class "panel panel-warning"

Danger Panel Title

Primary Panel uses the class "panel panel-danger"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
class = glyphicon glyphicon-star class = glyphicon glyphicon-arrow-up class = glyphicon-adjust class = glyphicon-align-justify class = glyphicon-align-left class = glyphicon-align-right class = glyphicon-arrow-down class = glyphicon-arrow-left class = glyphicon-arrow-right class = glyphicon-arrow-up class = glyphicon-asterisk class = glyphicon-backward class = glyphicon-ban-circle class = glyphicon-barcode class = glyphicon-bell class = glyphicon-bold class = glyphicon-book class = glyphicon-bookmark class = glyphicon-briefcase class = glyphicon-bullhorn class = glyphicon-calendar class = glyphicon-camera class = glyphicon-certificate class = glyphicon-check class = glyphicon-chevron-down class = glyphicon-chevron-left class = glyphicon-chevron-right class = glyphicon-chevron-up class = glyphicon-circle-arrow-down class = glyphicon-circle-arrow-left class = glyphicon-circle-arrow-right class = glyphicon-circle-arrow-up class = glyphicon-cloud class = glyphicon-cloud-download class = glyphicon-cloud-upload class = glyphicon-cog class = glyphicon-collapse-down class = glyphicon-collapse-up class = glyphicon-comment class = glyphicon-compressed class = glyphicon-copyright-mark class = glyphicon-credit-card class = glyphicon-cutlery class = glyphicon-dashboard class = glyphicon-download class = glyphicon-download-alt class = glyphicon-earphone class = glyphicon-edit class = glyphicon-eject class = glyphicon-envelope class = glyphicon-euro class = glyphicon-exclamation-sign class = glyphicon-expand class = glyphicon-export class = glyphicon-eye-close class = glyphicon-eye-open class = glyphicon-facetime-video class = glyphicon-fast-backward class = glyphicon-fast-forward class = glyphicon-file class = glyphicon-film class = glyphicon-filter class = glyphicon-fire class = glyphicon-flag class = glyphicon-flash class = glyphicon-floppy-disk class = glyphicon-floppy-open
class = glyphicon-floppy-remove class = glyphicon-floppy-save class = glyphicon-floppy-saved class = glyphicon-folder-close class = glyphicon-folder-open class = glyphicon-font class = glyphicon-forward class = glyphicon-fullscreen class = glyphicon-gbp class = glyphicon-gift class = glyphicon-glass class = glyphicon-globe class = glyphicon-hand-down class = glyphicon-hand-left class = glyphicon-hand-right class = glyphicon-hand-up class = glyphicon-hd-video class = glyphicon-hdd class = glyphicon-header class = glyphicon-headphones class = glyphicon-heart class = glyphicon-heart-empty class = glyphicon-home class = glyphicon-import class = glyphicon-inbox class = glyphicon-indent-left class = glyphicon-indent-right class = glyphicon-info-sign class = glyphicon-italic class = glyphicon-leaf class = glyphicon-link class = glyphicon-list class = glyphicon-list-alt class = glyphicon-lock class = glyphicon-log-out class = glyphicon-magnet class = glyphicon-map-marker class = glyphicon-minus class = glyphicon-minus-sign class = glyphicon-move class = glyphicon-music class = glyphicon-new-window class = glyphicon-off class = glyphicon-ok class = glyphicon-ok-circle class = glyphicon-ok-sign class = glyphicon-open class = glyphicon-paperclip class = glyphicon-pause class = glyphicon-pencil class = glyphicon-phone class = glyphicon-phone-alt class = glyphicon-picture class = glyphicon-plane class = glyphicon-play class = glyphicon-play-circle class = glyphicon-plus class = glyphicon-plus-sign class = glyphicon-print class = glyphicon-pushpin class = glyphicon-qrcode class = glyphicon-question-sign class = glyphicon-random class = glyphicon-record class = glyphicon-refresh class = glyphicon-registration-mark class = glyphicon-remove
class = glyphicon-remove-circle class = glyphicon-remove-sign class = glyphicon-repeat class = glyphicon-resize-full class = glyphicon-resize-horizontal class = glyphicon-resize-small class = glyphicon-resize-vertical class = glyphicon-retweet class = glyphicon-road class = glyphicon-save class = glyphicon-saved class = glyphicon-screenshot class = glyphicon-sd-video class = glyphicon-search class = glyphicon-send class = glyphicon-share class = glyphicon-share-alt class = glyphicon-shopping-cart class = glyphicon-signal class = glyphicon-sort class = glyphicon-sort-by-alphabet class = glyphicon-sort-by-alphabet-alt class = glyphicon-sort-by-attributes class = glyphicon-sort-by-attributes-alt class = glyphicon-sort-by-order class = glyphicon-sort-by-order-alt class = glyphicon-sound-5-1 class = glyphicon-sound-6-1 class = glyphicon-sound-7-1 class = glyphicon-sound-dolby class = glyphicon-sound-stereo class = glyphicon-star class = glyphicon-star-empty class = glyphicon-stats class = glyphicon-step-backward class = glyphicon-step-forward class = glyphicon-stop class = glyphicon-subtitles class = glyphicon-tag class = glyphicon-tags class = glyphicon-tasks class = glyphicon-text-height class = glyphicon-text-width class = glyphicon-th class = glyphicon-th-large class = glyphicon-th-list class = glyphicon-thumbs-down class = glyphicon-thumbs-up class = glyphicon-time class = glyphicon-tint class = glyphicon-tower class = glyphicon-transfer class = glyphicon-trash class = glyphicon-tree-conifer class = glyphicon-tree-deciduous class = glyphicon-unchecked class = glyphicon-upload class = glyphicon-usd class = glyphicon-user class = glyphicon-volume-down class = glyphicon-volume-off class = glyphicon-volume-up class = glyphicon-warning-sign class = glyphicon-wrench class = glyphicon-zoom-in class = glyphicon-zoom-out