Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
masonstrap
Commits
77828cc9
Verified
Commit
77828cc9
authored
Sep 14, 2017
by
David Haynes
🙆
Browse files
Drop docker, cleanup html
- I have ideas..
parent
f800f936
Pipeline
#1565
passed with stage
in 53 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Dockerfile
deleted
100644 → 0
View file @
f800f936
# Grab the node image from the store
FROM
node:latest
# Define a working directory to place things in
WORKDIR
/usr/masonstrap
# Copy over everything
COPY
. .
# Install all dependecies
RUN
yarn
docker-compose.yml
deleted
100644 → 0
View file @
f800f936
version
:
'
2'
services
:
masonstrap
:
# Build the base image
build
:
.
# Run the dev server
command
:
npm run dev
# Mount the masonstrap working directory
volumes
:
-
.:/usr/masonstrap/
-
/usr/masonstrap/node_modules
# Associate the dev server port with localhost:8000
ports
:
-
"
8000:8000"
public/demo.html
deleted
100644 → 0
View file @
f800f936
<!-- HTML5 definition -->
<!DOCTYPE html>
<html
lang=
"en"
>
<!-- Header content -->
<head>
<!-- Metatags -->
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
/>
<!-- Chrome on Android navbar color -->
<meta
name=
"theme-color"
content=
"#006633"
>
<!-- Opengraph tags -->
<meta
property=
"og:url"
content=
"http://srct.gmu.io/masonstrap/"
>
<meta
property=
"og:type"
content=
"website"
>
<meta
property=
"og:title"
content=
"SRCT Masonstrap"
>
<!--<meta property="og:image" content="http://srct.gmu.io/masonstrap/assets/img/masonstrap.png">-->
<meta
property=
"og:description"
content=
"Easily provide any web project with Mason branding."
>
<meta
property=
"og:site_name"
content=
"SRCT Masonstrap"
>
<meta
property=
"og:locale"
content=
"en_US"
>
<meta
property=
"article:author"
content=
"SRCT"
>
<!-- Twitter card tags -->
<meta
name=
"twitter:card"
content=
"summary"
>
<meta
name=
"twitter:site"
content=
"@MasonSRCT"
>
<meta
name=
"twitter:creator"
content=
"@MasonSRCT"
>
<meta
name=
"twitter:url"
content=
"http://srct.gmu.io/masonstrap/"
>
<meta
name=
"twitter:title"
content=
"SRCT Masonstrap"
>
<meta
name=
"twitter:description"
content=
"Easily provide any web project with Mason branding."
>
<!--<meta name="twitter:image" content="http://srct.gmu.io/masonstrap/assets/img/masonstrap.png">-->
<!-- Title -->
<title>
Masonstrap
•
Demo
</title>
<!-- Load in static content -->
<link
rel=
"icon"
href=
"assets/img/favicon.ico"
sizes=
"16x16"
>
<link
rel=
"stylesheet"
href=
"assets/css/masonstrap.min.css"
media=
"screen"
>
</head>
<!-- Body content -->
<body>
<!-- Define the navbar with the primary background color -->
<nav
class=
"navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top"
>
<!-- Responsive toggle button -->
<button
class=
"navbar-toggler navbar-toggler-right"
type=
"button"
data-toggle=
"collapse"
data-target=
".dual-collapse"
>
<span
class=
"navbar-toggler-icon"
></span>
</button>
<!-- Containter for main navbar content -->
<div
class=
"container"
>
<!-- Brand logo + title -->
<a
class=
"navbar-brand d-flex mx-auto"
href=
"#"
>
<img
src=
"assets/img/SRCT_square.svg"
width=
"30"
height=
"30"
class=
"d-inline-block align-top"
>
Masonstrap
</a>
<!-- Elements that will be collapsed in responsive mode -->
<div
class=
"navbar-collapse collapse dual-collapse"
>
<!-- Unordered list of elements -->
<ul
class=
"navbar-nav mr-auto"
>
<!-- Example dropdown including links to source files -->
<li
class=
"nav-item dropdown"
>
<!-- Dropdown for source files -->
<a
class=
"nav-link dropdown-toggle"
data-toggle=
"dropdown"
href=
"#"
id=
"download"
>
Source files
<span
class=
"caret"
></span>
</a>
<!-- Rounded dropdown-menu -->
<div
class=
"rounded dropdown-menu"
>
<!-- Example dropdown-item -->
<a
class=
"dropdown-item"
href=
"#"
>
Open in JSFiddle (TODO)
</a>
<!-- Divider divides content in the dropdown-menu -->
<div
class=
"dropdown-divider"
></div>
<!-- Example dropdown-item -->
<a
class=
"dropdown-item"
href=
"masonstrap/masonstrap.min.css"
target=
"_blank"
>
masonstrap.min.css
</a>
<!-- Example dropdown-item -->
<a
class=
"dropdown-item"
href=
"masonstrap/masonstrap.css"
target=
"_blank"
>
masonstrap.css
</a>
<!-- Divider divides content in the dropdown-menu -->
<div
class=
"dropdown-divider"
></div>
<!-- Example dropdown-item -->
<a
class=
"dropdown-item"
href=
"masonstrap/_variables.scss"
target=
"_blank"
>
_variables.scss
</a>
<!-- Example dropdown-item -->
<a
class=
"dropdown-item"
href=
"masonstrap/_masonstrap.scss"
target=
"_blank"
>
_masonstrap.scss
</a>
</div>
</li>
<!-- Example nav-item -->
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Link
</a>
</li>
</ul>
<!-- Unordered list of elements, with margin-left: auto -->
<ul
class=
"navbar-nav ml-auto"
>
<!-- Example nav-item -->
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Link
</a>
</li>
<!-- Example nav-item -->
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Link
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Begin giant container for the entirety of the page content -->
<div
class=
"container"
>
<div
class=
"row row-offcanvas row-offcanvas-right"
>
<div
class=
"col-12 col-md-9"
>
<br
/>
<h1>
Masonstrap
</h1>
<!-- dynamic version number -->
<h4
id=
"version"
></h4>
<br
/>
<p
class=
"lead"
>
Easily provide any web project with Mason branding.
</p>
<!-- Navbar
================================================== -->
<div
class=
"bs-docs-section clearfix"
>
<div
class=
"row"
>
<div
class=
"col-lg-12"
>
<!-- Header title -->
<div
class=
"page-header"
>
<h1
id=
"navbars"
>
Navbars
<hr
/>
</h1>
</div>
<div
class=
"bs-component"
>
<!-- Example navbar 1 -->
<nav
class=
"navbar navbar-toggleable-md navbar-inverse bg-primary"
>
<div
class=
"container"
>
<button
class=
"navbar-toggler navbar-toggler-right"
type=
"button"
data-toggle=
"collapse"
data-target=
"#navbarColor01"
aria-controls=
"navbarColor01"
aria-expanded=
"false"
aria-label=
"Toggle navigation"
>
<span
class=
"navbar-toggler-icon"
></span>
</button>
<a
class=
"navbar-brand"
href=
"#"
>
Navbar
</a>
<div
class=
"collapse navbar-collapse"
id=
"navbarColor01"
>
<ul
class=
"navbar-nav mr-auto"
>
<li
class=
"nav-item active"
>
<a
class=
"nav-link"
href=
"#"
>
Home
<span
class=
"sr-only"
>
(current)
</span></a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Features
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Pricing
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
About
</a>
</li>
</ul>
<form
class=
"form-inline"
>
<input
class=
"form-control mr-sm-2"
type=
"text"
placeholder=
"Search"
>
<button
class=
"btn btn-secondary my-2 my-sm-0"
type=
"submit"
>
Search
</button>
</form>
</div>
</div>
</nav>
</div>
<div
class=
"bs-component"
>
<!-- Example navbar 2 -->
<nav
class=
"navbar navbar-toggleable-md navbar-inverse bg-classic"
>
<div
class=
"container"
>
<button
class=
"navbar-toggler navbar-toggler-right"
type=
"button"
data-toggle=
"collapse"
data-target=
"#navbarColor02"
aria-controls=
"navbarColor02"
aria-expanded=
"false"
aria-label=
"Toggle navigation"
>
<span
class=
"navbar-toggler-icon"
></span>
</button>
<a
class=
"navbar-brand"
href=
"#"
>
Navbar
</a>
<div
class=
"collapse navbar-collapse"
id=
"navbarColor02"
>
<ul
class=
"navbar-nav mr-auto"
>
<li
class=
"nav-item active"
>
<a
class=
"nav-link"
href=
"#"
>
Home
<span
class=
"sr-only"
>
(current)
</span></a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Features
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
Pricing
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"#"
>
About
</a>
</li>
</ul>
<form
class=
"form-inline"
>
<input
class=
"form-control mr-sm-2"
type=
"text"
placeholder=
"Search"
>
<button
class=
"btn btn-secondary my-2 my-sm-0"
type=
"submit"
>
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Buttons ======================================================= -->
<div
class=
"bs-docs-section"
>
<div
class=
"page-header"
>
<div
class=
"row"
>
<div
class=
"col-lg-12"
>
<h1
id=
"buttons"
>
Buttons
<hr
/>
</h1>
</div>
</div>
</div>
<p
class=
"bs-component"
>
<button
type=
"button"
class=
"btn btn-primary"
>
Primary
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
Secondary
</button>
<button
type=
"button"
class=
"btn btn-success"
>
Success
</button>
<button
type=
"button"
class=
"btn btn-info"
>
Info
</button>
<button
type=
"button"
class=
"btn btn-warning"
>
Warning
</button>
<button
type=
"button"
class=
"btn btn-danger"
>
Danger
</button>
<button
type=
"button"
class=
"btn btn-link"
>
Link
</button>
</p>
<p
class=
"bs-component"
>
<button
type=
"button"
class=
"btn btn-primary disabled"
>
Primary
</button>
<button
type=
"button"
class=
"btn btn-secondary disabled"
>
Secondary
</button>
<button
type=
"button"
class=
"btn btn-success disabled"
>
Success
</button>
<button
type=
"button"
class=
"btn btn-info disabled"
>
Info
</button>
<button
type=
"button"
class=
"btn btn-warning disabled"
>
Warning
</button>
<button
type=
"button"
class=
"btn btn-danger disabled"
>
Danger
</button>
<button
type=
"button"
class=
"btn btn-link disabled"
>
Link
</button>
</p>
<p
class=
"bs-component"
>
<button
type=
"button"
class=
"btn btn-outline-primary"
>
Primary
</button>
<button
type=
"button"
class=
"btn btn-outline-secondary"
>
Secondary
</button>
<button
type=
"button"
class=
"btn btn-outline-success"
>
Success
</button>
<button
type=
"button"
class=
"btn btn-outline-info"
>
Info
</button>
<button
type=
"button"
class=
"btn btn-outline-warning"
>
Warning
</button>
<button
type=
"button"
class=
"btn btn-outline-danger"
>
Danger
</button>
</p>
<div
class=
"bs-component"
>
<div
class=
"btn-group"
role=
"group"
aria-label=
"Button group with nested dropdown"
>
<button
type=
"button"
class=
"btn btn-primary"
>
Primary
</button>
<div
class=
"btn-group"
role=
"group"
>
<button
id=
"btnGroupDrop1"
type=
"button"
class=
"btn btn-primary dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
></button>
<div
class=
"rounded dropdown-menu"
aria-labelledby=
"btnGroupDrop1"
>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
</div>
</div>
</div>
<div
class=
"btn-group"
role=
"group"
aria-label=
"Button group with nested dropdown"
>
<button
type=
"button"
class=
"btn btn-success"
>
Success
</button>
<div
class=
"btn-group"
role=
"group"
>
<button
id=
"btnGroupDrop2"
type=
"button"
class=
"btn btn-success dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
></button>
<div
class=
"rounded dropdown-menu"
aria-labelledby=
"btnGroupDrop2"
>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
</div>
</div>
</div>
<div
class=
"btn-group"
role=
"group"
aria-label=
"Button group with nested dropdown"
>
<button
type=
"button"
class=
"btn btn-info"
>
Info
</button>
<div
class=
"btn-group"
role=
"group"
>
<button
id=
"btnGroupDrop3"
type=
"button"
class=
"btn btn-info dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
></button>
<div
class=
"rounded dropdown-menu"
aria-labelledby=
"btnGroupDrop3"
>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
</div>
</div>
</div>
<div
class=
"btn-group"
role=
"group"
aria-label=
"Button group with nested dropdown"
>
<button
type=
"button"
class=
"btn btn-danger"
>
Danger
</button>
<div
class=
"btn-group"
role=
"group"
>
<button
id=
"btnGroupDrop4"
type=
"button"
class=
"btn btn-danger dropdown-toggle"
data-toggle=
"dropdown"
aria-haspopup=
"true"
aria-expanded=
"false"
></button>
<div
class=
"rounded dropdown-menu"
aria-labelledby=
"btnGroupDrop4"
>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
<a
class=
"dropdown-item"
href=
"#"
>
Dropdown link
</a>
</div>
</div>
</div>
</div>
<div
class=
"bs-component"
>
<button
type=
"button"
class=
"btn btn-primary btn-sm"
>
Small button
</button>
<button
type=
"button"
class=
"btn btn-primary"
>
Default button
</button>
<button
type=
"button"
class=
"btn btn-primary btn-lg"
>
Large button
</button>
</div>
<p
class=
"bs-component"
>
<button
type=
"button"
class=
"btn btn-primary btn-lg btn-block"
>
Block level button
</button>
</p>
<div
class=
"bs-component"
style=
"margin-bottom: 15px;"
>
<div
class=
"btn-group"
data-toggle=
"buttons"
>
<label
class=
"btn btn-primary active"
>
<input
type=
"checkbox"
checked
>
Checkbox 1
</label>
<label
class=
"btn btn-primary"
>
<input
type=
"checkbox"
>
Checkbox 2
</label>
<label
class=
"btn btn-primary"
>
<input
type=
"checkbox"
>
Checkbox 3
</label>
</div>
</div>
<div
class=
"bs-component"
style=
"margin-bottom: 15px;"
>
<div
class=
"btn-group"
data-toggle=
"buttons"
>
<label
class=
"btn btn-primary active"
>
<input
type=
"radio"
name=
"options"
id=
"option1"
checked
>
Radio 1
</label>
<label
class=
"btn btn-primary"
>
<input
type=
"radio"
name=
"options"
id=
"option2"
>
Radio 2
</label>
<label
class=
"btn btn-primary"
>
<input
type=
"radio"
name=
"options"
id=
"option3"
>
Radio 3
</label>
</div>
</div>
<div
class=
"bs-component"
>
<div
class=
"btn-group-vertical"
data-toggle=
"buttons"
>
<button
type=
"button"
class=
"btn btn-primary"
>
Button
</button>
<button
type=
"button"
class=
"btn btn-primary"
>
Button
</button>
<button
type=
"button"
class=
"btn btn-primary"
>
Button
</button>
<button
type=
"button"
class=
"btn btn-primary"
>
Button
</button>
<button
type=
"button"
class=
"btn btn-primary"
>
Button
</button>
<button
type=
"button"
class=
"btn btn-primary"
>
Button
</button>
</div>
</div>
<div
class=
"bs-component"
style=
"margin-bottom: 15px;"
>
<div
class=
"btn-group"
role=
"group"
aria-label=
"Basic example"
>
<button
type=
"button"
class=
"btn btn-secondary"
>
Left
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
Middle
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
Right
</button>
</div>
</div>
<div
class=
"bs-component"
style=
"margin-bottom: 15px;"
>
<div
class=
"btn-toolbar"
role=
"toolbar"
aria-label=
"Toolbar with button groups"
>
<div
class=
"btn-group mr-2"
role=
"group"
aria-label=
"First group"
>
<button
type=
"button"
class=
"btn btn-secondary"
>
1
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
2
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
3
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
4
</button>
</div>
<div
class=
"btn-group mr-2"
role=
"group"
aria-label=
"Second group"
>
<button
type=
"button"
class=
"btn btn-secondary"
>
5
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
6
</button>
<button
type=
"button"
class=
"btn btn-secondary"
>
7
</button>
</div>
<div
class=
"btn-group"
role=
"group"
aria-label=
"Third group"
>
<button
type=
"button"
class=
"btn btn-secondary"
>
8
</button>
</div>
</div>
</div>
</div>
<!-- Typography ================================================== -->
<div
class=
"bs-docs-section"
>
<div
class=
"row"
>
<div
class=
"col-lg-12"
>
<div
class=
"page-header"
>
<h1
id=
"typography"
>
Typography
<hr
/>
</h1>
</div>
</div>
</div>
<!-- Headings -->
<div
class=
"row"
>
<div
class=
"col-lg-4"
>
<div
class=
"bs-component"
>
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<h4>
Heading 4
</h4>
<h5>
Heading 5
</h5>
<h6>
Heading 6
</h6>
<h3>
Heading
<small
class=
"text-muted"
>
with muted text
</small>
</h3>
<p
class=
"lead"
>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
</div>
</div>
<div
class=
"col-lg-4"
>
<div
class=
"bs-component"
>
<h2>
Example body text
</h2>
<p>
Nullam quis risus eget
<a
href=
"#"
>
urna mollis ornare
</a>
vel eu
leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</p>
<p><small>
This line of text is meant to be treated as fine print.
</small></p>
<p>
The following is
<strong>
rendered as bold text
</strong>
.
</p>
<p>
The following is
<em>
rendered as italicized text
</em>
.
</p>
<p>
An abbreviation of the word attribute is
<abbr
title=
"attribute"
>
attr
</abbr>
.
</p>
</div>
</div>
<div
class=
"col-lg-4"
>
<div
class=
"bs-component"
>
<h2>
Emphasis classes
</h2>
<p
class=
"text-muted"
>
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
</p>
<p
class=
"text-primary"
>
Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p
class=
"text-warning"
>
Etiam porta sem malesuada magna mollis euismod.
</p>
<p
class=
"text-danger"
>
Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p
class=
"text-success"
>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<p
class=
"text-info"
>
Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>
</div>
</div>
</div>
<!-- Blockquotes -->
<div
class=
"row"
>
<div
class=
"col-lg-12"
>
<h2
id=
"type-blockquotes"
>
Blockquotes
</h2>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-lg-6"
>
<div
class=
"bs-component"
>
<blockquote
class=
"blockquote"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
<footer
class=
"blockquote-footer"
>
Someone famous in
<cite
title=
"Source Title"
>
Source Title
</cite></footer>
</blockquote>
</div>
</div>
<div
class=
"col-lg-6"
>
<div
class=
"bs-component"
>
<blockquote
class=
"blockquote blockquote-reverse"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
<footer
class=
"blockquote-footer"
>
Someone famous in
<cite
title=
"Source Title"
>
Source Title
</cite></footer>
</blockquote>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-lg-12"
>
<h2>
Display Sizing
</h2>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-lg-8"
>
<div
class=
"bs-component"
>
<h1
class=
"display-1"
>
Display 1
</h1>
<h1
class=
"display-2"
>
Display 2
</h1>
<h1
class=
"display-3"
>
Display 3
</h1>
<h1
class=
"display-4"
>
Display 4
</h1>
</div>
</div>
</div>
</div>
<!-- Tables ================================================== -->
<div
class=
"bs-docs-section"
>
<div
class=
"row"
>
<div
class=
"col-lg-12"
>
<div
class=
"page-header"
>
<h1
id=
"tables"
>
Tables
<hr
/>
</h1>
</div>
<h3>
Non Responsive Table
</h3>
<div
class=
"bs-component"
>
<table
class=
"table table-striped table-hover table-bordered"
>
<thead
class=
"thead-inverse"
>
<tr>
<th>
#
</th>
<th>
Column heading
</th>
<th>
Column heading
</th>
<th>
Column heading
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
<tr
class=
"table-info"
>
<td>
3
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
<tr
class=
"table-success"
>
<td>
4
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
<tr
class=
"table-danger"
>
<td>
5
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
<tr
class=
"table-warning"
>
<td>
6
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
<tr
class=
"table-active"
>
<td>
7
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
</tbody>
</table>
</div>
<h3>
Responsive Table
</h3>
<div
class=
"bs-component"
>
<table
class=
"table table-responsive table-striped table-hover table-bordered"
>
<thead
class=
"thead-inverse"
>
<tr>
<th>
#
</th>
<th>
Column heading
</th>
<th>
Column heading
</th>
<th>
Column heading
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Column content
</td>
<td>
Column content
</td>