NES-UI Style Guide

Welcome to the NES-UI Style Guide. Here you will find example code for core and component styles to be used in NES products.

Header Examples

Examples.

Learn Homepage Header

Welcome to TURAS Learn

Turas Learn is NHS Education for Scotland's platform for learning and support resources. It provides NHS Scotland health and social care staff with access to learning and practice support resources produced by NHS Education for Scotland.

Show/Hide Learn Homepage Header HTML Code

                    

    Example code here

Learn Content page Header

NES-UI Style Guide

Show/Hide Learn Content Page Header HTML Code

                    

    Example code here

Learn Sub-sites page Header

Family Nurse Partnership

A programme which aims to support first-time young mothers to achieve their goals and give their children the best possible start in life.

Show/Hide Learn Sub-sites Header HTML Code

                    
                
                    Example code here

Header - Breadcrumb

Show/Hide Header Breadcrumb HTML Code

                    

<div class="breadcrumb-container">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>
    </div>
</div>

Example

Usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget condimentum odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Proin tincidunt, augue faucibus molestie fringilla, diam metus facilisis massa, sed ullamcorper sapien enim quis magna.

                    

<div class="panel">
    <div class="panel-heading">
        <div class="panel-title"></div>
    </div>
    <div class="panel-body leftnav">
        <ul>
        @if (Model.ParentResource != null)
        {
            <li>
                <a href=@Model.ParentResource.ViewUrl>
                    <i class="fa fa-arrow-circle-left"></i>
                    @Model.ParentResource.Title</a>
            </li>
            }
            else
            {
            <li><a href="/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            }
            @foreach (var modelChild in Model.ChildResources)
            {
            <li>
                <a href="@modelChild.ViewUrl">
                    <span>
                        <i class="@modelChild.IconCssClass"></i>
                        @modelChild.Title@*<i class="fa fa-2x fa-chevron-right pull-right" style="color: lightgray">
                        </i>
                        *@
                    </span>
                </a>
            </li>
        }
        </ul>
    </div>
</div>

Typography Back to top

Example

Headers

H1 Main Header

Wrapped Header: Lorem ipsum dolor sit amet, consectetur adipiscing 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.

H2 Section Header

Wrapped Header: Lorem ipsum dolor sit amet, consectetur adipiscing 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.

H3 Sub Section Header

H4 Main Header

H5 Section Header

H6 Sub Section Header

Body Text

Link Text

Bold Text

Example Paragraphs - Example STRONG text - ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies venenatis augue in tempus. Maecenas sagittis vestibulum pretium. Morbi sodales vel enim venenatis interdum. Nam porta ex ex, at accumsan diam placerat id. Cras volutpat fringilla magna vitae cursus. Aenean dolor neque, imperdiet eget leo et, elementum venenatis turpis. Vivamus ultrices orci quis arcu egestas consequat. Nullam rutrum nisi volutpat elit molestie, id viverra erat pretium.

Blockquotes

Single line blockquote example. Cras volutpat fringilla magna vitae cursus.

John Smith

Reversed blockquote example. Cras volutpat fringilla magna vitae cursus.

John Smith

Multiple line blockquote example. Duis aliquam nisl eu diam placerat interdum. Praesent placerat diam augue, eu fermentum odio dignissim sed. Aliquam erat volutpat. Fusce lectus libero, iaculis quis efficitur ut, consectetur id massa. Vestibulum a pulvinar arcu. Nulla gravida feugiat viverra. In consectetur eros sit amet finibus pretium. Aenean feugiat auctor egestas.

Extract from some publication.

Show/Hide Blockquote HTML Code

                    
Single Line Quote

<blockquote>
    <p>Single line blockquote example. Cras volutpat fringilla magna vitae cursus.</p>
    <footer>
        <cite title="Source Title">John Smith</cite>
    </footer>
</blockquote>

Right Aligned Quote

<blockquote class="blockquote-reverse">
    <p>Reversed blockquote example. Cras volutpat fringilla magna vitae cursus.</p>
    <footer>
        <cite title="Source Title">John Smith</cite>
    </footer>
</blockquote>

Multiple Line Quote

<blockquote>
    <p>Multiple line blockquote example. Duis aliquam nisl eu diam placerat interdum. Praesent placerat diam augue...</p>
    <footer>
        <cite title="Source Title">Extract from some publication.</cite>
    </footer>
</blockquote>

Wells

This is a standard well

A large well

And a small well

A well placed in a column

Well Theme Options:

Theme Default Grey

Maecenas sagittis vestibulum pretium. Morbi sodales vel enim venenatis interdum. Nam porta ex ex, at accumsan diam placerat id. Cras volutpat fringilla magna vitae cursus. Aenean dolor neque, imperdiet eget leo et, elementum venenatis turpis.

Theme Green

Theme Teal

Show/Hide Wells HTML Code

                    
Grey Theme Well

<div class="well well-theme-grey">
    <h4>Theme Default Grey</h4>
    <p>Maecenas sagittis vestibulum pretium. Morbi sodales vel enim venenatis interdum...</p>
</div>

Green Theme Well

<div class="well well-theme-green">
    <h4>Theme Green</h4>
    <p>Maecenas sagittis vestibulum pretium. Morbi sodales vel enim venenatis interdum...</p>
</div>

Teal Theme Well

<div class="well well-theme-teal">
    <h4>Theme Teal</h4>
    <p>Maecenas sagittis vestibulum pretium. Morbi sodales vel enim venenatis interdum...</p>
</div>

Paragraph Options:

Example LINK ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies venenatis augue in tempus. Maecenas sagittis vestibulum pretium. Morbi sodales vel enim venenatis interdum. Nam porta ex ex, at accumsan diam placerat id. Cras volutpat fringilla magna vitae cursus. Aenean dolor neque, imperdiet eget leo et, elementum venenatis turpis. Vivamus ultrices orci quis arcu egestas consequat. Nullam rutrum nisi volutpat elit molestie, id viverra erat pretium.

Show/Hide Paragraphs HTML Code

                    
Paragraph text

<p>onsectetur adipiscing elit. Ut ultricies venenatis augue</p>

Paragraph with Bold added 

<p>Example Paragraphs - <strong>Example STRONG text - ipsum dolor sit amet</strong> </p>

Paragraph with Hyperlink added

<p><a href="#">Example LINK ipsum dolor sit amet</a></p>

List Item Options:

Unordered List Item
Unordered List Item
Unordered List Item
Unordered List Item
Unordered List Item

Ordered List Item
Ordered List Item
Ordered List Item
Ordered List Item
Ordered List Item

Show/Hide List Item HTML Code

                    
Unordered List Item Code

<ul class="content-list">
<li>Unordered List Item</li>
<li>Unordered List Item</li>
<li>Unordered List Item</li>
<li>Unordered List Item</li>                                  
</ul>

Ordered List Item Code 

<ol class="content-list">
<li>Unordered List Item</li>
<li>Unordered List Item</li>
<li>Unordered List Item</li>
<li>Unordered List Item</li>                                  
</ol>

Form Labels

Usage

code goes here.

Panels Back to top

Example hellos

Standard Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta ante eget eros pharetra, a tempus mauris imperdiet. Morbi hendrerit ligula ante, eget tristique metus consectetur eu. Sed accumsan nisi vel pulvinar hendrerit. Aliquam auctor ut ante sed lobortis. Mauris vel scelerisque odio, a feugiat libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sodales sagittis leo, condimentum convallis elit porttitor a. Integer rhoncus maximus scelerisque. Morbi dui justo, malesuada a tellus quis, hendrerit imperdiet nisi. Sed condimentum facilisis felis eu mattis. Nunc eu pretium purus.

Vivamus sit amet pulvinar dolor. Nunc tempus lectus quis turpis consequat congue. Nullam ligula tellus, eleifend vel odio a, mollis facilisis mi.

Panel with Footer (Action area)

Vivamus sit amet pulvinar dolor. Nunc tempus lectus quis turpis consequat congue. Nullam ligula tellus, eleifend vel odio a, mollis facilisis mi.

Panel footer

Fixed Height Panel (200px)

Vivamus sit amet pulvinar dolor. Nunc tempus lectus quis turpis consequat congue. Nullam ligula tellus, eleifend vel odio a, mollis facilisis mi. Ut faucibus molestie facilisis. Quisque vestibulum, sem quis dictum placerat, ipsum nibh dictum leo, vitae laoreet augue neque vel purus. Nullam est lectus, eleifend nec ante vel, elementum feugiat neque. Nunc non est quis mi consectetur tempor at feugiat urna. Ut in fermentum nulla, sit amet elementum tellus. In hac habitasse platea dictumst. Phasellus dignissim ultrices efficitur. Aliquam vitae aliquet neque. Donec viverra sem eu metus lacinia, at efficitur urna maximus. Mauris accumsan elit at vulputate aliquam.

Fixed Height Panel with Footer

Usage

Standard Panel

                    
<div class="panel">
    <div class="panel-heading">
        <span class="panel-title">Standard Panel</span>
    </div>
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
        <p>Vivamus sit amet pulvinar dolor. Nunc tempus lectus quis...</p>
    </div>
</div>

Panel with Footer

                    
<div class="panel">
    <div class="panel-heading">
        <span class="panel-title">Panel with Footer &nbsp;&nbsp;
            <small>(Action area)</small>
        </span>
    </div>
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
        <p>Vivamus sit amet pulvinar dolor. Nunc tempus lectus quis...</p>
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>

Fixed Height Panel

                    
<div class="panel panel-scrolling ">
    <div class="panel-heading">
        <span class="panel-title">Fixed Height Panel &nbsp;&nbsp;<small> 200px</small></span>
    </div>
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
        <p>Vivamus sit amet pulvinar dolor. Nunc tempus lectus quis...</p>
    </div>
</div>

Fixed Height Panel with Footer

                    
<div class="panel panel-scrolling ">
    <div class="panel-heading">
        <span class="panel-title">Fixed Height Panel with Footer</span>
    </div>
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
        <p>Vivamus sit amet pulvinar dolor. Nunc tempus lectus quis...</p>
    </div>
    <div class="panel-footer clearfix">
        <div class="pull-right">
            <button type="button" class="btn btn-default">Apply</button>
        </div>
    </div>
</div>

Dashboard Panels Back to top

Example

Resource and demo content
SCORM Resource and demo content
Demo Task 2
SCORM Resource and demo content
Demo Task 2
SCORM Resource and demo content
SCORM Resource and demo content

Example

Resource and demo content	Data Type	Other Type
SCORM Resource and demo content	Here is a col	This is another Col
SCORM Resource and demo content	Here is a col	This is another Col
SCORM Resource and demo content	Here is a col	This is another Col
SCORM Resource and demo content	Here is a col	This is another Col

Programme/Project Area

Curriculum (11)
Demo Project (10)
Demo Page 1 (9)
Fiona INT FNP Project (9)
Learning in Foundation Training (Open to public) (9)
TR Task Test Project (9)
Test Project thur 28/07 (9)
Completion Report project (8)
Project Kiran (7)
TR Demo Page (7)

Course/Learning Programme

Type

Applied Filters Clear All Filters

Case study 3 Nurse 3 Published 3

Showing 1 to 3 of 3 Sort by: Relevance | Title (A-Z)

Document

Document updated (001)

Document

Type : Announcement, Case study, Guideline, Clinical guideline, Handbook

Download Edit Record

Web Link

WebResource

Type : Case study, Data capture form, Guideline

Link Edit Record

Page

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book....

Type : Case study

Edit Record

Page

Type : Case study

Edit Record

Page

Type : Case study

Edit Record

My Learning Record Panels Back to top

Showing 1 to 3 of 3 Sort by: Title | Programme | Status | Last Accessed | Date completed

Scorm

SCORM Module A

Programme: VLE 1.0 Sprint 27

Revalidation(s):

Date	Status	Attempts
27/02/2017	In Progress	1
17/02/2017	Completed Requires Revalidation	1
08/02/2017	Completed (Expired)	1

Score: 100%

CPD Points: 16 16 Points - very good!

Date completed: 27/02/2017

Feedback | Certificate

Launch

Completed

Scorm

SCORM Module B

Programme: VLE 1.0 Sprint 27

Revalidation(s):

Date	Status	Attempts
27/02/2017	In Progress	1
17/02/2017	Completed Requires Revalidation	1
08/02/2017	Completed (Expired)	1

Score: 100%

CPD Points: 16 16 Points - very good!

Date completed: 27/02/2017

Feedback | Certificate

Anticoagulant Therapies 1

Score:

100%

Registrations:

Date	Status
16/12/2016	Completed

Completed

Feedback

16/12/2016

Launch

Completed

Scorm

SCORM Module C

Programme: VLE 1.0 Sprint 27

Revalidation(s):

Date	Status	Attempts
27/02/2017	In Progress	1
17/02/2017	Completed Requires Revalidation	1
08/02/2017	Completed (Expired)	1

Score: 100%

CPD Points: 16 16 Points - very good!

Date completed: 27/02/2017

Feedback | Certificate

Launch

Completed

Tabs Back to top

Example

Tabs

Tab One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices nisi sed diam hendrerit, vitae vulputate lacus luctus. Proin tristique sit amet justo et consectetur. Vestibulum id odio ac nulla dapibus consectetur.

Tab Two

Tab Three

Tab Four

Justified Tabs

Tab One

Tab Two

Tab Three

Tab Four

Usage

code goes here.

Buttons Back to top

Example

Types

Sizes

Disabled State

Single Button Dropdowns

Split Button Dropdowns

Usage

Types

Show/Hide Button Types HTML Code

                                 

Default Button
<button type="button" class="btn btn-default">Default</button>
Primary Button
<button type="button" class="btn btn-primary">Primary</button>
Success Button
<button type="button" class="btn btn-success">Success</button>
Info Button
<button type="button" class="btn btn-info">Info</button>
Warning Button
<button type="button" class="btn btn-warning">Warning</button>
Danger Button
<button type="button" class="btn btn-danger">Danger</button>
Link Button
<button type="button" class="btn btn-link">Link</button>
Font Awesome
<button type="button" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i>Font Awesome</button>

Sizes

Show/Hide Button Sizes HTML Code

                                 

Block Level Button
<button type="button" class="btn btn-primary btn-block">Block Level Button</button>
Large Button
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
Default Button
<button type="button" class="btn btn-primary">Default Button</button>
Small Button
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
Extra Small Button
<button type="button" class="btn btn-primary btn-xs">Extra Small Button</button>

Disabled State

Show/Hide Disabled State HTML Code

                                 

Default Button
<button type="button" class="btn btn-default" disabled="disabled">Default</button>
Primary Button
<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
Success Button
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
Info Button
<button type="button" class="btn btn-info" disabled="disabled">Info</button>
Warning Button
<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
Danger Button
<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
Link Button
<button type="button" class="btn btn-link" disabled="disabled">Link</button>

Single Button Dropdowns

Show/Hide Single Button Dropdowns HTML Code

                                 

Default Single Button
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default <span class="caret"></span>
</button>
        <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
         </ul>
                        </div>    
                         
Primary Single Button
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary <span class="caret"></span>
</button>
        <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
         </ul>
                        </div>    
Success Single Button
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Success <span class="caret"></span>
</button>
        <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
         </ul>
                        </div>   
Info Single Button
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Info <span class="caret"></span>
</button>
        <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
         </ul>
                        </div>   
Warning Single Button
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Warning <span class="caret"></span>
</button>
        <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
         </ul>
                        </div>   
Danger Single Button
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Danger <span class="caret"></span>
</button>
        <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
         </ul>
                        </div>

Split Button Dropdowns

Show/Hide Split Button Dropdowns HTML Code

                                 

<div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">Default</button>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary">Primary</button>
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <p></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-success">Success</button>
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-info">Info</button>
                            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <p></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-warning">Warning</button>
                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger">Danger</button>
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>

                           

                        </div>
                    </div>
                </div>


            </div>

Tables Back to top

Example

Read Only Table

Table Header	Table Header	Table Header	Table Header
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data

Show/Hide HTML Code

                    
<table class="table table-bordered table-striped table-hover">
    <!-- The <colgroup> helps set the widths of the columns -->
    <colgroup>
        <col class="col-md-2">
        <col class="col-md-2">
        <col class="col-md-4">
        <col class="col-md-4">
    </colgroup>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>