Staging Environment
Good to Great Schools Australia Logo

Typography Overview

  • The primary typeface we are using is the font family Calibri Sans and is available in 3 variations:
Calibri Sans Light AaBbCcDd
Calibri Sans Regular AaBbCcDd
Calibri Sans Black AaBbCcDd

Typography
Desktop settings

Headings

Example Settings

Heading 1

 h1 {
color: #000000;
font-family: Calibri Bold;
font-size: 36px;
font-weight: 700;
}

Heading 1 - Link

 h1 a:hover {
color: #0A5C71;
font-family: Calibri Bold;
font-size: 36px;
font-weight: 700;
text-decoration: underline;
}

Heading 2

 h2 {
color: #000000;
font-family: Calibri Bold;
font-size: 28px;
font-weight: 700;
}

Heading 2 - Link

 h2 a:hover {
color: #0A5C71;
font-family: Calibri Bold;
font-size: 28px;
font-weight: 700;
text-decoration: underline;
}

Heading 3

 h3 {
color: #000000;
font-family: Calibri Bold;
font-size: 24px;
font-weight: 700;
}

Heading 3 - Link

 h3 a:hover {
color: #0A5C71;
font-family: Calibri Bold;
font-size: 24px;
font-weight: 700;
text-decoration: underline;
}

Heading 4

 h4 {
color: #000000;
font-family: Calibri Bold;
font-size: 20px;
font-weight: 700;
}

Heading 4 - Link

 h4 a:hover {
color: #0A5C71;
font-family: Calibri Bold;
font-size: 20px;
font-weight: 700;
text-decoration: underline;
}

Typography
Desktop settings

Paragraphs

Example Settings

Large Paragraph

 .large {
color: #000000;
font-family: Calibri Regular;
font-size: 18px;
font-weight: 400;
}

Large Paragraph - Link

 a.large:hover {
color: #0A5C71;
font-family: Calibri Regular;
font-size: 18px;
font-weight: 400;
text-decoration: underline;
}

Medium Paragraph

 .medium {
color: #000000;
font-family: Calibri Regular;
font-size: 16px;
font-weight: 400;
}

Medium Paragraph - Link

 a.medium:hover {
color: #0A5C71;
font-family: Calibri Regular;
font-size: 16px;
font-weight: 400;
text-decoration: underline;
}

Small Paragraph

 .small {
color: #000000;
font-family: Calibri Regular;
font-size: 14px;
font-weight: 400;
}

Small Paragraph - Link

 a.small:hover {
color: #0A5C71;
font-family: Calibri Regular;
font-size: 14px;
font-weight: 400;
text-decoration: underline;
}

Extra Small Paragraph

 .xs-small {
color: #000000;
font-family: Calibri Regular;
font-size: 13px;
font-weight: 400;
}

Extra Small Paragraph - Link

 a.xs-small:hover {
color: #0A5C71;
font-family: Calibri Regular;
font-size: 13px;
font-weight: 400;
text-decoration: underline;
}

Typography
Desktop settings

Lists

Quicklinks

Example Settings
ul li a {
margin-top: 0;
margin-bottom: 1rem;
padding-left: 2rem;
text-decoration: underline;
}

ul li a:hover {
color: #0A5C71;
}

Default/Bulleted

Example Settings
  • This is a bulleted list item.
  • This is another bulleted list item.
  • This is another bulleted list item again for measure.
 ul {
margin-top: 0;
margin-bottom: 1rem;
padding-left: 2rem;
}

Unstyled

Example Settings
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
 .list-unstyled {
list-style: none;
padding-left: 0;
}

Inline

Example Settings
  • This is a list item.
  • And another one.
  • But they're displayed inline.
 .list-inline-item:not(:last-child) {
margin-right: 0.5rem;
}

.list-inline-item {
display: inline-block;
}

Typography
Desktop settings

Interactions

Interactive text and Icons

Interactive text will be underlined and on hover the text/links will highlight Primary 90.

  • Primary 90
  • #0A5C71
  • rgb(10, 92, 113)
Example Icon Interaction Settings
i:hover {
color: #0A5C71;
}
Example Text Interaction Settings

Heading 1 - Link

 h1:hover {
color: #0A5C71;
text-decoration: underline;
}

Heading 2 - Link

 h2:hover {
color: #0A5C71;
text-decoration: underline;
}

Heading 3 - Link

 h3:hover {
color: #0A5C71;
text-decoration: underline;
}

Heading 4 - Link

 h4:hover {
color: #0A5C71;
text-decoration: underline;
}

Large Paragraph - Link

 .large:hover {
color: #0A5C71;
text-decoration: underline;
}

Medium Paragraph - Link

 .medium:hover {
color: #0A5C71;
text-decoration: underline;
}

Small Paragraph - Link

 .small:hover {
color: #0A5C71;
text-decoration: underline;
}

Extra Small Paragraph - Link

 .xs-small:hover {
color: #0A5C71;
text-decoration: underline;
}
Example Text selection Settings

This paragraph will be entirely selected when clicked by the user.

 ::selection / .user-select-all {
color: #fff;
background: #063F4D;
}

This paragraph has default select behavior.

 .user-select-auto {
color: #fff;
background: #063F4D;
}

This paragraph will not be selectable when clicked by the user.

 .user-select-none {
color: #000000;
background: #fff;
}
Pointer events Settings

This link can not be clicked.

 .pe-none {
pointer-events: none !important;
}

This link can be clicked (this is default behavior).

 .pe-auto {
pointer-events: auto !important;
}

This link can not be clicked because the pointer-events property is inherited from its parent.

 .pe-none {
pointer-events: none !important;
}

This link has a pe-auto class and can be clicked.

 .pe-auto {
pointer-events: auto !important;
}

Typography
Desktop settings

Icons

We are using Hugeicons for our icon package.

Example icon Font setting
i {
font-size: 32px;
}
Example icon on Hover Font setting
i:hover {
color: #0A5C71;
}

These are just some of the icons in use.

For a full list of available icons vist Hugeicons

Typography
Mobile settings

Headings

Example Font setting

Heading 1

 h1 {
color: #000000;
font-family: Open Sans;
font-size: 28px;
font-weight: 700;
}

Heading 1 - Link

 h1 a:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 28px;
font-weight: 700;
text-decoration: underline;
}

Heading 2

 h2 {
color: #000000;
font-family: Open Sans;
font-size: 24px;
font-weight: 700;
}

Heading 2 - Link

 h2 a:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 24px;
font-weight: 700;
text-decoration: underline;
}

Heading 3

 h3 {
color: #000000;
font-family: Open Sans;
font-size: 20px;
font-weight: 700;
}

Heading 3 - Link

 h3 a:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 20px;
font-weight: 700;
text-decoration: underline;
}

Heading 4

 h4 {
color: #000000;
font-family: Open Sans;
font-size: 18px;
font-weight: 700;
}

Heading 4 - Link

 h4 a:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 18px;
font-weight: 700;
text-decoration: underline;
}

Typography
Mobile settings

Paragraphs

Example Font setting

Large Paragraph

 .large {
color: #000000;
font-family: Open Sans;
font-size: 16px;
font-weight: 400;
}

Large Paragraph - Link

 a.large:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 16px;
font-weight: 400;
text-decoration: underline;
}

Medium Paragraph

 .medium {
color: #000000;
font-family: Open Sans;
font-size: 14px;
font-weight: 400;
}

Medium Paragraph - Link

 a.medium:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 14px;
font-weight: 400;
text-decoration: underline;
}

Small Paragraph

 .small {
color: #000000;
font-family: Open Sans;
font-size: 13px;
font-weight: 400;
}

Small Paragraph - Link

 a.small:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 13px;
font-weight: 400;
text-decoration: underline;
}

Extra Small Paragraph

 .xs-small {
color: #000000;
font-family: Open Sans;
font-size: 1px;
font-weight: 400;
}

Extra Small Paragraph - Link

 a.xs-small:hover {
color: #0A5C71;
font-family: Open Sans;
font-size: 1px;
font-weight: 400;
text-decoration: underline;
}

Theme

Primary

  • 05
  • #F3F8FA
  • rgb(243, 248, 250)
  • 10
  • #E7F2F5
  • rgb(231, 242, 245)
  • 15
  • #DCECF0
  • rgb(220, 236, 240)
  • 20
  • #D1E5EB
  • rgb(209, 229, 235)
  • 25
  • #C5DFE5
  • rgb(197, 223, 229)
  • 30
  • #B9D8E0
  • rgb(185, 216, 224)
  • 35
  • #A2CCD6
  • rgb(162, 204, 214)
  • 40
  • #A2CCD6
  • rgb(162, 204, 214)
  • 45
  • #96C5D1
  • rgb(150, 197, 209)
  • 50
  • #8BBFCC
  • rgb(139, 191, 204)
  • 55
  • #80B9C7
  • rgb(128, 185, 199)
  • 60
  • #68ACBD
  • rgb(104, 172, 189)
  • 65
  • #519FB3
  • rgb(81, 159, 179)
  • 70
  • #4599AD
  • rgb(69, 153, 173)
  • 75
  • #3A92A8
  • rgb(58, 146, 168)
  • 80
  • #2E8CA3
  • rgb(46, 140, 163)
  • 85
  • #0C6B83
  • rgb(12, 107, 131)
  • 90
  • #0A5C71
  • rgb(10, 92, 113)
  • 95
  • #084D5F
  • rgb(8, 77, 95)
  • 100
  • #063F4D
  • rgb(6, 63, 77)

Theme

Secondary

  • 05
  • #FFFFFF
  • rgb(255, 255, 255)
  • 10
  • #F7F7F7
  • rgb(247, 247, 247)
  • 15
  • #EFEFEF
  • rgb(239, 239, 239)
  • 20
  • #E5E5E5
  • rgb(229, 229, 229)
  • 25
  • #E0E0E0
  • rgb(224, 224, 224)
  • 30
  • #C6C6C6
  • rgb(198, 198, 198)
  • 35
  • #B5B5B5
  • rgb(181, 181, 181)
  • 40
  • #999999
  • rgb(153, 153, 153)
  • 45
  • #8C8C8C
  • rgb(140, 140, 140)
  • 50
  • #7F7F7F
  • rgb(127, 127, 127)
  • 55
  • #737373
  • rgb(115, 115, 115)
  • 60
  • #666666
  • rgb(102, 102, 102)
  • 65
  • #595959
  • rgb(89, 89, 89)
  • 70
  • #4C4C4C
  • rgb(76, 76, 76)
  • 75
  • #404040
  • rgb(64, 64, 64)
  • 80
  • #333333
  • rgb(51, 51, 51)
  • 85
  • #262626
  • rgb(38, 38, 38)
  • 90
  • #191919
  • rgb(25, 25, 25)
  • 95
  • #0D0D0D
  • rgb(13, 13, 13)
  • 100
  • #000000
  • rgb(0, 0, 0)

Theme

Success

  • 05
  • #F2FAF3
  • rgb(242, 250, 243)
  • 10
  • #E5F5E8
  • rgb(229, 245, 232)
  • 15
  • #D9F1DD
  • rgb(217, 241, 221)
  • 20
  • #CCECD1
  • rgb(204, 236, 209)
  • 25
  • #BFE7C6
  • rgb(191, 231, 198)
  • 30
  • #B2E3BA
  • rgb(178, 227, 186)
  • 35
  • #A6DEAF
  • rgb(166, 222, 175)
  • 40
  • #99D9A3
  • rgb(153, 217, 163)
  • 45
  • #8CD598
  • rgb(140, 213, 152)
  • 50
  • #7FD08C
  • rgb(127, 208, 140)
  • 55
  • #73CB81
  • rgb(115, 203, 129)
  • 60
  • #66C776
  • rgb(102, 199, 118)
  • 65
  • #59C26A
  • rgb(89, 194, 106)
  • 70
  • #4CBD5E
  • rgb(76, 189, 94)
  • 75
  • #40B953
  • rgb(64, 185, 83)
  • 80
  • #33B448
  • rgb(51, 180, 72)
  • 85
  • #26AF3C
  • rgb(38, 175, 60)
  • 90
  • #19AA30
  • rgb(25, 170, 48)
  • 95
  • #0DA626
  • rgb(13, 166, 38)
  • 100
  • #00A11A
  • rgb(0, 161, 26)

Theme

Warning

  • 05
  • #FEFCF6
  • rgb(254, 252, 246)
  • 10
  • #FEF9ED
  • rgb(254, 249, 237)
  • 15
  • #FDF7E4
  • rgb(253, 247, 228)
  • 20
  • #FCF4DB
  • rgb(252, 244, 219)
  • 25
  • #FCF1D2
  • rgb(252, 241, 210)
  • 30
  • #FBEFC9
  • rgb(251, 239, 201)
  • 35
  • #FAECC1
  • rgb(250, 236, 193)
  • 40
  • #FAE9B7
  • rgb(250, 233, 183)
  • 45
  • #F9E7AE
  • rgb(249, 231, 174)
  • 50
  • #F8E4A5
  • rgb(248, 228, 165)
  • 55
  • #F8E19D
  • rgb(248, 225, 157)
  • 60
  • #F7DF94
  • rgb(247, 223, 148)
  • 65
  • #F7DC8A
  • rgb(247, 220, 138)
  • 70
  • #F6D981
  • rgb(246, 217, 129)
  • 75
  • #F5D779
  • rgb(245, 215, 121)
  • 80
  • #F5D470
  • rgb(245, 212, 112)
  • 85
  • #F4D167
  • rgb(244, 209, 103)
  • 90
  • #F3CE5E
  • rgb(243, 206, 94)
  • 95
  • #F3CC55
  • rgb(243, 204, 85)
  • 100
  • #F2C94C
  • rgb(242, 201, 76)

Theme

Danger

  • 05
  • #FAF2F2
  • rgb(250, 242, 242)
  • 10
  • #F5E5E5
  • rgb(245, 229, 229)
  • 15
  • #F1D9D9
  • rgb(241, 217, 217)
  • 20
  • #ECCCCC
  • rgb(236, 204, 204)
  • 25
  • #E7BFBF
  • rgb(231, 191, 191)
  • 30
  • #E3B2B2
  • rgb(227, 178, 178)
  • 35
  • #DEA6A6
  • rgb(222, 166, 166)
  • 40
  • #D99999
  • rgb(217, 153, 153)
  • 45
  • #D58C8C
  • rgb(213, 140, 140)
  • 50
  • #D07F7F
  • rgb(208, 127, 127)
  • 55
  • #CB7373
  • rgb(203, 115, 115)
  • 60
  • #C76666
  • rgb(199, 102, 102)
  • 65
  • #C25959
  • rgb(194, 89, 89)
  • 70
  • #BD4C4C
  • rgb(189, 76, 76)
  • 75
  • #B94040
  • rgb(185, 64, 64)
  • 80
  • #B43333
  • rgb(180, 51, 51)
  • 85
  • #AF2626
  • rgb(175, 38, 38)
  • 90
  • #AA1919
  • rgb(170, 25, 25)
  • 95
  • #A60D0D
  • rgb(166, 13, 13)
  • 100
  • #A10000
  • rgb(161, 0, 0)

Theme

Info

  • 05
  • #F5FAFD
  • rgb(245, 250, 253)
  • 10
  • #EAF4FB
  • rgb(234, 244, 251)
  • 15
  • #E1F0FA
  • rgb(225, 240, 250)
  • 20
  • #D6EAF8
  • rgb(214, 234, 248)
  • 25
  • #CCE5F6
  • rgb(204, 229, 246)
  • 30
  • #C2E0F4
  • rgb(194, 224, 244)
  • 35
  • #B8DBF2
  • rgb(184, 219, 242)
  • 40
  • #AED6F1
  • rgb(174, 214, 241)
  • 45
  • #A3D1EF
  • rgb(163, 209, 239)
  • 50
  • #90C6EB
  • rgb(144, 198, 235)
  • 55
  • #90C6EB
  • rgb(144, 198, 235)
  • 60
  • #85C1E9
  • rgb(133, 193, 233)
  • 65
  • #7BBCE8
  • rgb(123, 188, 232)
  • 70
  • #71B7E6
  • rgb(113, 183, 230)
  • 75
  • #67B2E4
  • rgb(103, 178, 228)
  • 80
  • #5DADE2
  • rgb(93, 173, 226)
  • 85
  • #52A7E0
  • rgb(82, 167, 224)
  • 90
  • #48A2DF
  • rgb(72, 162, 223)
  • 95
  • #3E9DDD
  • rgb(62, 157, 221)
  • 100
  • #3498DB
  • rgb(52, 152, 219)

Theme
Utilities

Backgrounds

Example Settings
.bg-primary
 .bg-primary {
background-color: #063F4D;
}
.bg-secondary
 .bg-secondary {
background-color: #333333;
}
.bg-success
 .bg-success {
background-color: #0DA626;
}
.bg-danger
 .bg-danger {
background-color: #A10000;
}
.bg-info
 .bg-info {
background-color: #3498DB;
}
.bg-warning
 .bg-warning {
background-color: #F2C94C;
}
.bg-light
 .bg-light {
background-color: #F7F7F7;
}
.bg-dark
 .bg-dark {
background-color: #212529;
}

Theme
Utilities

Borders

Example Settings
.border .border {
border-color: #D1D1D1;
}
.border-primary .border-primary {
border-color: #063F4D;
}
.border-success .border-success {
border-color: #40B953;
}
.border-secondary .border-secondary {
border-color: #000000;
}
.border-danger .border-danger {
border-color: #A10000;
}
.border-info .border-info {
border-color: #3498DB;
}
.border-warning .border-warning {
border-color: #f99b27;
}
.border-light .border-light {
border-color: #F7F7F7;
}
.border-dark .border-dark {
border-color: #000000;
}

Theme
Utilities

Border Radius

Example Settings
... .rounded-0 {
border-radius: 0;
}
... .rounded-1 {
border-radius: 0.25rem;
}
... .rounded-2 {
border-radius: 0.375rem;
}
... .rounded-3 {
border-radius: 0.5rem;
}
... .rounded-4 {
border-radius: 1rem;
}
... .rounded-5 {
border-radius: 2rem;
}
... .rounded-circle {
border-radius: 50%;
}
... .rounded-pill {
border-radius: 50rem;
}

Theme
Utilities

Shadows

Example Settings
.shadow-none
 .shadow-none {
box-shadow: none;
}
.shadow-sm
 .shadow-sm {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.shadow
 .shadow {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.shadow-lg
 .shadow-lg {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

Theme
Utilities

Text Colours

Example Settings
This text is the default text colour .text-dark {
color: #000000;
}
This text is using the class primary .text-primary {
color: #063F4D;
}
This text is using the class secondary .text-secondary {
color: #333333;
}
This text is using the class success .text-success {
color: #0DA626;
}
This text is using the class info .text-info {
color: #3498DB;
}
This text is using the class danger .text-danger {
color: #A10000;
}
This text is using the class warning .text-warning {
color: #F2C94C;
}

Content

Tables

Default Table

# English Science Languages
Unit 1 Narrative Biology Nganhthanun Bayan
Unit 2 Persuasive Physics Nganhthanun Bubu
Unit 3 Informative Earth and Space Nganhthanun Guugu
Unit 4 Narrative Chemistry Nganhthanun Bama

Striped Table

# English Science Languages
Unit 1 Narrative Biology Nganhthanun Bayan
Unit 2 Persuasive Physics Nganhthanun Bubu
Unit 3 Informative Earth and Space Nganhthanun Guugu
Unit 4 Narrative Chemistry Nganhthanun Bama

Hover Table

# English Science Languages
Unit 1 Narrative Biology Nganhthanun Bayan
Unit 2 Persuasive Physics Nganhthanun Bubu
Unit 3 Informative Earth and Space Nganhthanun Guugu
Unit 4 Narrative Chemistry Nganhthanun Bama

Content

Images

Full width Image Example Setting
Placeholderimage-fluid
.img-fluid {
max-width: 100%;
height: auto;
}
Thumbnail Image Example Setting
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
max-width: 100%;
height: auto;
}
Figure Image Example Setting
A caption for the above image.
 .figure {
display: inline-block;
}

Forms

Overview

We have a few different forms such as the contact us form and the newsletter sign up.
The sign in and sign up form is a part of Auth0 so any updates to the sign in and sign up forms will need to be done via the Auth0 Dashboard.

Forms

Inputs

Example Setting
Please enter a valid email address
 .form-control {
border: 1px solid #999999;
border-radius: 6px;
color: #000000;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
color: #000000;
background-color: #ffffff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
Your comments will be appreciated
 .form-control {
border: 1px solid #999999;
border-radius: 6px;
color: #000000;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
color: #000000;
background-color: #ffffff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
Upload file size must not exceed 100mb
 .form-control {
border: 1px solid #999999;
border-radius: 6px;
color: #000000;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
color: #000000;
background-color: #ffffff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

Forms

Select

Example Setting
.form-control {
border: 1px solid #999999;
border-radius: 6px;
color: #000000;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
color: #000000;
background-color: #ffffff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

Forms

Checks and Radios

Example Setting
.form-check-input[type="checkbox"] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
border-radius: 0.25em;
}

.form-check-input {
width: 1em;
height: 1em;
margin-top: 0.25em;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
border: 1px solid #dee2e6;
}

.form-check-input:checked {
background-color: #063F4D;
border-color: #063F4D;
}

.form-control:focus {
color: #000000;
background-color: #ffffff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check-input[type=radio] {
border-radius: 50%;
}

.form-check-input:checked {
background-color: #063F4D;
border-color: #063F4D;
}

.form-control:focus {
color: #000000;
background-color: #ffffff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-switch .form-check-input:checked {
background-position: right center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="checkbox"] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked {
background-color: #063F4D;
border-color: #063F4D;
}
.form-check-input:disabled {
pointer-events: none;
filter: none;
opacity: 0.5;
}

Forms

Range Slider

Example Setting
.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
background-color: #063F4D;
}
.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
background-color: #063F4D;
}

#rangeValue {
font-weight: 700;
}

Forms

Labels

Example Setting
This is some for helper text
 .form-label, .form-check-label {
font-weight: 700;
}

.form-text {
color: #000000;
font-size: 13px;
}
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
.form-label, .form-check-label {
font-weight: 700;
}

.form-text {
color: #000000;
font-size: 13px;
}

Forms

Datepicker

Forms

Buttons

Example Setting
.btn-primary {
color: #fff;
background-color: #084D5F;
border: 1px solid #084D5F;
}

.btn-primary:hover {
background-color: #063F4D;
border: 1px solid #063F4D;
}
.btn-outline-secondary {
color: #333333;
background-color: #fff;
border: 1px solid #333333;
}

.btn-outline-secondary:hover {
color: #fff;
background-color: #333333;
border: 1px solid #333333;
}
Example Setting
See Above
Example Setting
.btn:disabled {
background-color: #68ACBD;
border-color: #68ACBD;
color: #B5B5B5;
}

Forms

Validation

Example Setting

Register Today

Fill in the data below.

Full name is valid!
Full name cannot be blank!
Email is valid!
Email cannot be blank!
You selected a position!
Please select a position!
Password is valid!
Password cannot be blank!

You selected a role!
Please select a role!
Please confirm that the entered data is correct!
 .form-control:invalid {
border: 1px solid #A10000;
background-image: none;
}

.invalid-feedback {
color: #A10000;
font-size: 0.875em;
margin-top: 0.25rem;
width: 100%;
}

.was-validated .form-check-input:invalid {
border: 1px solid #A10000;
background-image: none;
}

Forms

WYSIWYG

Example Setting

Components

Accordion

Example Setting

Sed ut perspiciatis

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. 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.

Sed ut perspiciatis

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. 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.

Sed ut perspiciatis

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. 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.

 h2.accordion-header {
margin-bottom: 0;
font-size: 2rem;
}

.accordion-button[aria-expanded="false"] {
background-color: #084D5F;
color: #fff;
}

.accordion-button[aria-expanded="true"] {
background-color: #0C6B83;
color: #fff;
}

.accordion-button[aria-expanded="false"]:hover {
background-color: #0C6B83
}

Components

Alerts

Default Setting
.alert-primary {
color: #063F4D;
background: #B9D8E0;
border-color: #A2CCD6;
}

.alert-primary a {
color: #063F4D;
}

.alert-primary a:hover {
color: #000000;
}
.alert-secondary {
color: #063F4D;
background: #EFEFEF;
border-color: #E5E5E5;
}

.alert-secondary a {
color: #404040;
}

.alert-secondary a:hover {
color: #000000;
}
.alert-success {
color: #063F4D;
background: #D9F1DD;
border-color: #BFE7C6;
}

.alert-success a {
color: #0A5C71;
}

.alert-success a:hover {
color: #000000;
}
.alert-danger {
color: #063F4D;
background: #F1D9D9;
border-color: #E7BFBF;
}

.alert-danger a {
color: #A10000;
}

.alert-danger a:hover {
color: #000000;
}
.alert-warning {
color: #063F4D;
background-color: #fcd19d;
border-color: #f99b27;
}

.alert-warning a {
color: #a25900
}

.alert-warning a:hover {
color: #000000;
}
.alert-info {
color: #063F4D;
background: #E1F0FA;
border-color: #CCE5F6;
}

.alert-info a {
color: #3498DB;
}

.alert-info a:hover {
color: #000000;
}
.alert-light {
color: #063F4D;
background-color: #F7F7F7;
border-color: #E5E5E5;
}

.alert-light a {
color: #063F4D;
}

.alert-light a:hover {
color: #000000;
}
.alert-dark {
color: #fff;
background: #000000;
border-color: #000000;
}

.alert-dark a {
color: #F3F8FA;
}

.alert-dark a:hover {
color: #B5B5B5;
}
Alert with icon Setting
Dismissible Alert Setting
N/A

Components

Badge

Button with Badge Setting
.btn-primary {
color: #fff;
background-color: #084D5F;
border: 1px solid #084D5F;
}

.btn-primary:hover {
background-color: #063F4D;
border: 1px solid #063F4D;
}

.bg-danger {
background-color: #A10000 ;
}
Default Setting
Primary .text-bg-primary {
color: #fff;
background-color: #084D5F;
}
Secondary .text-bg-secondary {
background-color: #333333;
color: #fff;
}
Success .text-bg-success {
background-color: #0DA626;
color: #fff;
}
Danger .text-bg-danger {
background-color: #A10000;
color: #fff;
}
Warning .text-bg-warning {
background-color: #f99b27;
color: #000000;
}
Info .text-bg-info {
background-color: #3498DB;
color: #000000;
}
Light .text-bg-light {
background-color: #F7F7F7;
color: #000000;
}
Dark .text-bg-dark {
background-color: #000000;
color: #fff;
}
Pill Badges Setting
Primary .rounded-pill {
border-radius: 800px/50rem;
}
Secondary .rounded-pill {
border-radius: 800px/50rem;
}
Success .rounded-pill {
border-radius: 800px/50rem;
}
Danger .rounded-pill {
border-radius: 800px/50rem;
}
Warning .rounded-pill {
border-radius: 800px/50rem;
}
Info .rounded-pill {
border-radius: 800px/50rem;
}
Light .rounded-pill {
border-radius: 800px/50rem;
}
Dark .rounded-pill {
border-radius: 800px/50rem;
}

Components

Blockquote

Example Setting

Left Aligned Blockquote

Someone famous in Source Title
.blockquote {
font-size: 1.25rem;
}

.blockquote-footer {
margin-top: -1rem;
margin-bottom: 1rem;
font-size: 0.875em;
color: #999999;
}

Right Aligned Blockquote

Someone famous in Source Title
.blockquote {
font-size: 1.25rem;
}

.blockquote-footer {
margin-top: -1rem;
margin-bottom: 1rem;
font-size: 0.875em;
color: #999999;
text-align: right
}

Centered Blockquote

Someone famous in Source Title
.blockquote {
font-size: 1.25rem;
}

.blockquote-footer {
margin-top: -1rem;
margin-bottom: 1rem;
font-size: 0.875em;
color: #999999;
text-align: center
}

Components

Breadcrumb

Example Setting
.breadcrumb {
color: #000000;
font-size: 16px;
list-style: none;
}

.breadcrumb-item + .breadcrumb-item::before {
color: #000000;
content: "/";
}

.breadcrumb-item.active {
color: #212529;
}

Components

Buttons

Button Sizes Setting
.btn-lg {
font-size: 20px;
padding: 8px 16px 8px 16px;
}
.btn {
font-size: 16px;
padding: 6px 12px 6px 12px;
}
.btn-sm {
font-size: 14px;
font-weight: 400;
padding: 4px 8px 4px 8px;
}
Solid Button Examples Setting
.btn-primary {
color: #fffff;
background-color: #084D5F;
border: 1px solid #084D5F;
}

.btn-primary:hover {
color: #fffff;
background-color: #063F4D;
border: 1px solid #063F4D;
}
.btn-tertiary {
color: #0C6B83;
background-color: #D1E5EB;
border: 1px solid #D1E5EB;
}

.btn-tertiary:hover {
color: #000000;
background-color: #C5DFE5;
border: 1px solid #C5DFE5;
}
.btn-subtle {
color: #000;
background-color: #F7F7F7;
border: 1px solid #F7F7F7;
}

.btn-subtle:hover {
color: #000;
background-color: #EFEFEF;
border: 1px solid #EFEFEF;
}
.btn-secondary {
color: #ffffff;
background-color: #333333;
border: 1px solid #333333;
}

.btn-secondary:hover {
color: #ffffff;
background-color: #000000;
border: 1px solid #000000;
}
.btn-success {
color: #ffffff;
background-color: #40B953;
border: 1px solid #40B953;
}

.btn-success:hover {
color: #ffffff;
background-color: #0DA626;
border: 1px solid #0DA626;
}
.btn-danger {
color: #ffffff;
background-color: #B43333;
border: 1px solid #B43333;
}

.btn-danger:hover {
color: #ffffff;
background-color: #A10000;
border: 1px solid #A10000;
}
.btn-warning {
color: #ffffff;
background-color: #ffc107;
border: 1px solid #ffc107;
}

.btn-warning:hover {
color: #000000;
background-color: #ffca2c;
border: 1px solid #ffca2c;
}
.btn-info {
color: #ffffff;
background-color: #5DADE2;
border: 1px solid #5DADE2;
}

.btn-info:hover {
color: #ffffff;
background-color: #3498DB;
border: 1px solid #3498DB;
}
.btn-light {
color: #000000;
background-color: #F7F7F7;
border: 1px solid #F7F7F7;
}

.btn-light:hover {
color: #000000;
background-color: #EFEFEF;
border: 1px solid #EFEFEF;
}
.btn-dark {
color: #ffffff;
background-color: #333333;
border: 1px solid #333333;
}

.btn-dark:hover {
color: #ffffff;
background-color: #000000;
border: 1px solid #000000;
}
.btn-link {
color: #3498DB;
font-weight: bold;
}

.btn-link:hover {
color: #48A2DF;
color: #5DADE2;
}

.btn-link:focus-visible {
color: #48A2DF;
}

.btn-link:active {
background: transparent;
border: 0;
box-shadow: none;
color: #48A2DF;
}

Components

Buttons - Outlined

Outlined Button Examples Setting
.btn-outline-primary {
color: #084D5F;
background-color: #ffffff;
border: 1px solid #084D5F;
}

.btn-outline-primary:hover {
color: #ffffff;
background-color: #063F4D;
border: 1px solid #063F4D
}
.btn-outline-tertiary {
color: #0C6B83;
background-color: #ffffff;
border: 1px solid #D1E5EB;
}

.btn-outline-tertiary:hover {
color: #063F4D;
background-color: #D1E5EB;
border: 1px solid #D1E5EB;
}
.btn-outline-subtle {
color: #333333;
background-color: #ffffff;
border: 1px solid #F7F7F7;
}

.btn-outline-subtle:hover {
color: #333333;
background-color: #EFEFEF;
border: 1px solid #EFEFEF;
}
.btn-outline-secondary {
color: #333333;
background-color: #ffffff;
border: 1px solid #333333;
}

.btn-outline-secondary:hover {
color: #ffffff;
background-color: #333333;
border: 1px solid #333333;
}
.btn-outline-success {
color: #40B953;
background-color: #ffffff;
border: 1px solid #40B953;
}

.btn-outline-success:hover {
color: #ffffff;
background-color: #0DA626;
border: 1px solid #0DA626;
}
.btn-outline-danger {
color: #B43333;
background-color: #ffffff;
border: 1px solid #B43333;
}

.btn-outline-danger:hover {
color: #ffffff;
background-color: #A10000;
border: 1px solid #A10000;
}
.btn-outline-warning {
color: #ffc107;
background-color: #ffffff;
border: 1px solid #ffc107;
}

.btn-outline-warning:hover {
color: #000000;
background-color: #ffc107;
border: 1px solid #ffc107;
}
.btn-outline-info {
color: #5DADE2;
background-color: #ffffff;
border: 1px solid #5DADE2;
}

.btn-outline-info:hover {
color: #ffffff;
background-color: #3498DB;
border: 1px solid #3498DB;
}
.btn-outline-light {
color: #333333;
background-color: #ffffff;
border: 1px solid #F7F7F7;
}

.btn-outline-light:hover {
color: #333333;
background-color: #EFEFEF;
border: 1px solid #EFEFEF;
}
.btn-outline-dark {
color: #333333;
background-color: #ffffff;
border: 1px solid #333333;
}

.btn-outline-dark:hover {
color: #ffffff;
background-color: #000000;
border: 1px solid #000000;
}

Components

Buttons - Pills

Pill Buttons Setting
.rounded-pill {
border-radius: 800px;
padding: 0 16px 0 16px;
}
.rounded-pill {
border-radius: 800px;
padding: 0 16px 0 16px;
}
.rounded-pill {
border-radius: 800px;
padding: 0 16px 0 16px;
}

Components

Buttons with Icons

Buttons with Icon Setting
.btn-primary {
color: #fff;
background-color: #084D5F;
border: 1px solid #084D5F;
}

.btn-primary:hover {
background-color: #063F4D;
border: 1px solid #063F4D;
}
.btn-outline-secondary {
color: #333333;
background-color: #fff;
border: 1px solid #333333;
}

.btn-outline-secondary:hover {
color: #fff;
background-color: #333333;
border: 1px solid #333333;
}

Components

Buttons Block

Block Button Setting
See Buttons

Components

Buttons - Disabled

Disabled Buttons Setting
.btn:disabled {
background-color: #68ACBD;
border-color: #68ACBD;
color: #B5B5B5;
}

Components

Buttons

Close Button Setting
.btn-close {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23084D5F'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
color: #084D5F;
background-color: transparent;
opacity: 1;
}

.btn-close:hover {
color: #084D5F;
text-decoration: none;
opacity: 0.75;
}

.btn-close:focus {
box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
opacity: 1;
}

Components

Card

Example Setting
...
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
.card {
border-color: #E0E0E0;
}

h5.card-title {
color: #212529;
font-size: 1.25rem;
font-weight: 700;
}

p.card-text {
color: #212529;
font-size: 16px;
}
Default Card
Special title treatment

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

Go somewhere
.card-header {
color: #212529;
background-color: #F7F7F7;
border-bottom: 1px solid #E0E0E0;
font-size: 16px;
}
Card with theme
Special title treatment

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

Go somewhere
.card-header {
color: #ffffff;
background-color: #063f4d;
font-size: 16px;
}
...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

 p.card-text.text-body-secondary {
color: #212529;
font-size: 0.875em;
}
This is a card with no heading or title and only text within a card body.
.card-body {
color: #212529;
font-size: 16px;
}

Components

Collapse

Example Setting

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show.btn:focus-visible {
color: #fff;
background-color: #084D5F;
border-color: #084D5F;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, .5);
}

.card {
border-color: #E0E0E0;
}

Components

Dropdown

Example Setting
.btn:first-child:active,
.btn.show {
color: #fff;
background-color: #084D5F;
border-color: #084D5F;
}

.dropdown-menu {
border: 1px solid #E0E0E0;
}

.dropdown-item:focus,
.dropdown-item:hover {
background-color: #F7F7F7;
}

Components

List group

Default example Setting
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
 .list-group {
border: 0;
border: 1px solid #efefef;
border-radius: 0.375rem;
font-size: 16px;
}

.list-group-item:first-child {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}

.list-group-item {
border: 0;
border-bottom: 1px solid #efefef;
}

.list-group-item:last-child {
border: 0;
border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
With notifications example Setting
  • A list item 14
  • A second list item 2
  • A third list item 1
.text-bg-primary {
color: #fff;
background-color: #084D5F;
}
Active item example Setting
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
 .list-group-item.active {
color: #fff;
background-color: #084D5F;
border-color: #084D5F;
}
Hoverable rows example Setting
.list-group-item.active {
color: #fff;
background-color: #084D5F;
border-color: #084D5F;
}

.list-group-item-action:hover {
background-color: #F7F7F7;
}

Components

Modal

Example Setting
Example
Modal title

Modal body text goes here.

 .modal-content {
color: #000000;
background-color: #ffffff;
border: 1px solid #E5E5E5;
border-radius: 8px;
}

.modal-header {
border-bottom: 1px solid #E5E5E5;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.modal-footer {
background-color: #ffffff;
border-top: 1px solid #E5E5E5;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}

Components

Navbar

Components

Navs & tabs

Default example

Product

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.

Submissions

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Noel Pearson

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.

Evidence

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Vertical example
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
My School Box Sidebar example

1

2

3

4

5

6

7

8

9

10

11

12

Components

Pagination

Example Setting

Showing results 1 - 10 of 100

 .pagination .page-item .page-link {
border: 1px solid #E5E5E5;
border-radius: 100%;
color: #000000;
font-size: 13px;
font-weight: bold;
margin-right: 10px;
line-height: 18px;
height: 32px;
width: 32px;
}

.pagination .page-item .page-link:hover {
background-color: #0A5C71;
border: 1px solid #0A5C71;
color: #ffffff;
}

.page-link.active:hover {
background-color: #063F4D;
border: 1px solid #063F4D;
}

p.pagination-text {
color: #666666;
font-size: 14px;
text-align: center;
}

Components

Popovers

Example Setting


Dismissible popover 		.popover {
border-color: #0C6B83;
}

.popover-header {
background-color: #0A5C71;
color: #fff;
border-bottom: 1px solid #0A5C71;
}

.popover-body {
font-size: 14px;
}

.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
border-right-color: #0C6B83;
}
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
border-top-color: #0C6B83;
}
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
border-right-color: #0C6B83;
}
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
border-bottom-color: #0C6B83;
}
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
border-left-color: #0C6B83;
}

Components

Progress

Example Setting
.bg-primary {
background-color: #063F4D;
}
50%
 .bg-primary {
background-color: #063F4D;
color: #ffffff;
}
Colour variations Setting
Primary
 .bg-primary {
background-color: #063F4D;
}
Secondary
 .bg-secondary {
background-color: #333333;
}
Success
 .bg-success {
background-color: #0DA626;
}
Danger
 .bg-danger {
background-color: #A10000;
}
Info
 .bg-info {
background-color: #3498DB;
}
Warning
 .bg-warning {
background-color: #f99b27;
}
Light
 .bg-light {
background-color: #F7F7F7;
}
Dark
 .bg-dark {
background-color: #000000;
}

Components

Spinners

Example Setting
.spinner-border {
width: 2rem;
height: 2rem;
}

.text-primary {
color: #063F4D;
}
.text-primary {
color: #063F4D;
}
.text-secondary {
color: #333333;
}
.text-success {
color: #0DA626;
}
.text-danger {
color: #A10000;
}
.text-warning {
color: #f99b27;
}
.text-info {
color: #3498DB;
}
.text-light {
color: #F7F7F7;
}
.text-dark {
color: #000000;
}
Disabled button example Setting
.btn:disabled {
opacity:0.65;
}

.text-primary {
color: #063F4D;
}

Components

Toasts
Example Setting
.toast {
border-color: #f7f7f7;
}

.toast-header {
background-color: #0A5C71;
color: #fff;
border-bottom: 1px solid #0A5C71;
}

.toast-header .btn-close {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3csvg%3e");
background-color: transparent;
opacity: 1;
}
.text-bg-primary {
color: #fff;
background-color: #084D5F;
}
.text-bg-secondary {
background-color: #333333;
color: #fff;
}
.text-bg-success {
background-color: #0DA626;
color: #fff;
}
.text-bg-danger {
background-color: #A10000;
color: #fff;
}
.text-bg-info {
background-color: #3498DB;
color: #000000;
}
.text-bg-warning {
background-color: #f99b27;
color: #000000;
}
.text-bg-light {
background-color: #F7F7F7;
color: #000000;
}
.text-bg-dark {
background-color: #000000;
color: #fff;
}

Components

Tour

Example Setting
Tour 1 of 5

Text content

 .card {
border-color: #E0E0E0;
}

.card h5 {font-size: 24px;
font-weight: bold;
}
Tour 3 of 5

Text content

 See Above
Tour 5 of 5

Text content

 See Above

Components

Tooltips

Example Setting

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

 .custom-tooltip {
background-color: #063F4D;
color:#fff;
opacity: 1;
}

.tooltip-inner {
background-color: #063F4D;
color:#fff;
opacity: 1;
}

.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
border-top-color:#063F4D;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
border-top-color:#063F4D;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
border-right-color: #063F4D;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
border-bottom-color:#063F4D;
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
border-left-color: #063F4D;
}

Components

Video

Example Setting
.vjs-big-play-button {border: 0.06666em solid #2E8CA3;
border-radius: 0.3em;
}

.vjs-big-play-button {
border-radius: 100%;
width:60px;
line-height: 56px;
height: 60px;
}

.video-js:hover .vjs-big-play-button {
background-color: #084D5F;
color: #F3F8FA;
}

Examples

Actions

Low Attendance

Tasks Overdue Action Title

Target Name

Mon 13/10
Low Attendance

Tasks To Do Action Title

Target Name

Mon 13/10
Problem

Plan Card To Do Action Title

Target Name

Mon 20/10
Problem

Solution

Target Name

Examples

Avatar

Teacher:

MS
Maria Smith

Other Staff:

+4
+
Bernadine Dennigan
CEO

Examples

Blurb

Good to Great Schools Australia is a not-for-profit dedicated to improving education outcomes for all Australian students.

Supporting Schools Around Australia
We Support the Diverse Needs of Schools Around Australia

Our evidence-based programs and curriculum resources are implemented in public, private and independent schools across Australia, from those just starting their improvement journey to top-performing schools. They cater to teachers of varying experience levels and are effective for students from diverse backgrounds, with varying abilities.

Discover the Best International Practices for School Improvement

Partner with us and take your school from good to great with our school improvement resources. Get in touch to see if your school qualifies for our free two-year consultancy program designed to support you through the heavy lifting.

Examples

Callouts

Want free classroom resources, webinars and professional training to help your teaching? Discover the Best International Practices for School Improvement

Sign up for our monthly newsletter.

Sign Up

Each curriculum features:

  • Classroom-ready lessons
  • Teaching Guides
  • Student Workbooks
  • Assessment framework
  • Extracurricular extension activities
  • Teacher's professional learning module.
Sign Up Now

Our mission is to develop great teachers delivering effective teaching, often using Direct Instruction programs.

We have developed a number of resources that are free to school teams, that support the effective delivery of Direct Instruction.

Our Direct Instruction supports include professional learning, supplementary curriculum, mapping and guides for using Direct Instruction to for special education.

Teach Spelling Mastery A-F

Develop essential skills, practices and knowledge for the effective classroom delivery of Spelling Mastery. This online, self-paced and free professional learning module covers:

  • key components of the Direct Instruction Spelling Mastery program
  • core instructional strategies for effectively implementing Spelling Mastery
  • basic direct instruction techniques
  • methods for gathering student data and using data to inform instruction.
View Teach Spelling Mastery A-F

Supplementary Curriculum

Curriculum that supplements Direct Instruction programs to bring them to Australian Curriculum requirements, such as swapping out US currency for Australian.

Examples

Callout CTA

The Power of Direct Instruction Webinar with Noel Pearson

In June 2024, Noel Pearson presented a compelling webinar on Direct Instruction. Hosted by McGraw Hill Australia in collaboration with Good to Great Schools Australia (GGSA), the event was titled The Power of Direct Instruction and featured insights from GGSA's founder and director, Noel Pearson.

If you're interested, members can view the webinar recording or register for a free membership to access it here.

Watch The Power of Direct Instruction

Interested in Working at Cape York Aboriginal Australian Academy?

Teach in Cape York, develop your skills, gain unique experience and play your part in remote educatioon reform.

View Latest Vacancies

It's easy to discover why Good to Great Schools Australia is gaining interest from schools and teachers every day.
We are on a constant upward trajectory of gaining members and invite you to join us.

Sign Up Now

Access a Toolkit of Teaching Techniques Posters

View Posters

Examples

Cards

English

Classroom-ready resources, mapped to the English Australian curriculum.

Mathematics

Classroom-ready resources, mapped to the Australian curriculum for Maths.

Science

Classroom-ready resources, mapped to the Australian Science curriculum.

Languages

Classroom-ready resources, mapped to the Australian Indigenous languages curriculum.

...
Curriculum Resources

Take advantage of our free evidence-based resources.

Sign Up Now
...
School Improvement Resources

Partner with us and take your school from good to great.

Sign Up Now
...
Webinars and Consultations

Determining the best instructional approaches.

Register Now
...
Direct Instruction

Implementing Direct Instruction in Australian Schools.

Sign Up Now

Examples

Cards CTA

Browse Oz-e-science and other subject curriculum resources to complement English and Maths programs.

Learn More

Discover School Improvement Resources and Tools to enhance all effective teaching including Direct Instruction programs.

Learn More

Explore our Oz-e-maths Top Ups and Swap Outs teaching resources to cover the few sections not covered by the Australian Curriculum.

Learn More
...
Innovating Bible Literacy: Grounded in Research of how Students Learn

Day # Month - 0.00 PM to 0.00 PM (AEST)

...
Webinar Tile example

Day # Month - 0.00 PM to 0.00 PM (AEST)

Examples

Cards Count Up

0
K

Online Courses

0
+

Online Courses

0
K

Online Courses

0
K

Online Courses

0
K

Online Courses

0
+

Online Courses

0
K

Online Courses

0
K

Online Courses

0
K

Online Courses

0
+

Online Courses

0
K

Online Courses

0
K

Online Courses

0
K

Online Courses

0
+

Online Courses

0
K

Online Courses

0
K

Online Courses

Examples

Cards Flip

whole school curriculum

Whole-School Curriculum

Give your teachers more time to teach by reducing planning. Our high-quality, ready-to-use resources are aligned to the Australian Curriculum and ensure consistent instruction across every classroom.

tailored coaching

Tailored Coaching for School Leaders

You don't need to go it alone. Receive up to 10 hours of expert support and coaching by our school improvement specialists to help you lead your team confidently and troubleshoot challenges.

progress tools

Progress Tools

Use our tech assessment tool to give teachers more data to make smarter instructional decisions, personalise learning and accelerate student growth with clear, actionable insights.

professional learning resources

Professional Learning Resources

Build your teaching expertise through our on-demand online courses that align with AITSL standards and receive certification to use towards teacher re-registration.

Whole-School Curriculum

Give your teachers more time to teach by reducing planning. Our high-quality, ready-to-use resources are aligned to the Australian Curriculum and ensure consistent instruction across every classroom.

Tailored Coaching for School Leaders

You don't need to go it alone. Receive up to 10 hours of expert support and coaching by our school improvement specialists to help you lead your team confidently and troubleshoot challenges.

Progress Tools

Use our tech assessment tool to give teachers more data to make smarter instructional decisions, personalise learning and accelerate student growth with clear, actionable insights.

Professional Learning Resources

Build your teaching expertise through our on-demand online courses that align with AITSL standards and receive certification to use towards teacher re-registration.

Examples

Comments

0 Comments

Comments (empty state)

M

No Comments yet, be the first to comment!

0 Comments

Comments (Active state)

M
  • C
    @Christina Skinner 2 Days ago

    That was very informative, excellent!

  • J
    @Jonny_Brereton 3 Days ago

    Well I'd just like to say, fantastic talk.

  • S
    @Steven Stevenson 1 Week ago

    I'm on my 3rd run through, great content.

Examples

Comments Side Panel

Comments 3

SJ
Sarah Jones30 mins ago

Elementum in ut faucibus quam tellus cum condimentum odio egestas.

Bill Murray10:30am 27/10/2025

Elementum in ut faucibus quam tellus cum condimentum odio egestas.

MS
Marie Smith9:00am 27/10/2025

Elementum in ut faucibus quam tellus cum condimentum odio egestas.

Examples

Contact Us Form

Get in touch to start your improvement journey.

  • Address
  • 302-310 Sheridan Street
  • PO BOX 278
  • North Cairns QLD 4870
  • Hours of operation
  • Monday - Friday 9:00 AM - 5:00 PM

Contact Us

Please let us know what's on your mind. Have a question for us? Ask away.

0 of 600 max characters

Examples

Features

Left-aligned title explaining these awesome features

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Primary button

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Featured title

Paragraph of text beneath the heading to explain the heading.

Examples

Heroes

Centered hero

Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Dark color hero

Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Responsive left-aligned hero with image

Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Examples

Icon Columns

33 Behaviour Tools

Implementation Guide

5 Behaviour charts

Course Modules

These are the cornerstones of effective teaching and school improvement. Covering a wide range of topics, course modules are grounded in evidence-based practices and techniques essential for impactful teaching.

Program Modules

These modules delve deeper into specific subject areas, like literacy, numeracy, science and social sciences. They blend theoretical knowledge with practical exercises, so educators can apply and master new teaching techniques effectively.

Practice Modules

Tailored to refine specific techniques or practices, these modules offer in-depth exploration and understanding, with additional resources to enhance learning and are often recommended based on individual classroom practice needs.

Personalised Development

You'll receive an individual professional learning plan, ensuring your growth aligns with your unique goals and your school's improvement objectives.

Versatile Application

The skills and knowledge you gain aren't just theoretical - they're designed for application in any Australian classroom, across curriculums and pedagogies.

Flexible Learning

You can choose between pursuing a role-specific pathway or individual professional development modules - all online.

Rigorous Adherence to Standards

Our program is meticulously aligned with the Australian Institute for Teaching and School Leadersh's (AITSL) standards.

Examples

Icon Features

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Call to action

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Call to action

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Call to action

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Call to action

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Primary button

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Primary button

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

Primary button

Examples

Icon List

Improving their English oral language skills

Learning faster and becoming more confident

Building better educational habits and routines

Improving their English oral language skills

Learning faster and becoming more confident

Building better educational habits and routines

Improving their English oral language skills

Learning faster and becoming more confident

Building better educational habits and routines

Examples

Info Containers

...
Playschool Unit 4 - Me Exploring the World - Drama
  • 28 Lessons
M
Title/Info

DD/MM/YY

...
Module Name
  • 7 Likes
  • 3 Comments

Examples

Info CTA

Students explore Indigenous Australian stories and traditions as inspiration for creating their own artworks. They learn about the materials and technologies used in Indigenous art, experiment with different techniques, and express their ideas through visual storytelling.

Examples

Jumbotrons

Basic jumbotron

This is a simple Bootstrap jumbotron that sits within a .container, recreated with built-in utility classes.

Custom jumbotron

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

Change the background

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

Add borders

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

Jumbotron with CTA

This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive .col-* class, and a customized call to action.

Full-width jumbotron

This takes the basic jumbotron above and makes its background edge-to-edge with a .container inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.

Examples

Lightbox

Examples

Meet Our Team

Julie Grantham

Julie Grantham has over four decades experience as a teacher, principal and senior public servant, including three years as Director-General of the Queensland Department of Education, Training and Employment.

As Director of Schools at Good to Great Schools Australia, Julie supports schools and education systems to deliver programs that meet the needs of all students.

Bernardine Denigan

Bernardine Denigan is the founding CEO of Good to Great Schools Australia (GGSA) and former CEO of Australia's leading Indigenous think-tank, Cape York Partnership.

Bernardine has developed GGSA into Australia's leading provider of evidence-based effective teaching to schools.

As CEO of GGSA, Bernardine leads and drives the development of the business with a focus on innovating education programs that delight customers.

Examples

Metrics & Charts

Examples

Navbar

Click here to see the Navbar

Examples

Newsletter Signup

Examples

Overview Card

Examples

Page Banner

Examples

Profile Card

Examples

Request a Consultation

Examples

Resource Guide

Examples

Ribbon Banner

Discover our library of quality lessons, FREE and waiting for your classroom. Explore Here

Examples

School Rating Card

Examples

Score Card

Examples

Sidebars

Examples

Social Media Block

Follow Us on Social Media

Follow Us on Social Media

Examples

Star Rating

Examples

Tabs Nested Tabs

Examples

Tables

Examples

Teaching Guide

Examples

Testimonials

Examples

Tiles

Teacher Talk Is Explicit and Unambiguous

Information is presented explicitly and unambiguously to mitigate students' misunderstanding.

Goals and Objectives Are Explicit

Lessons have a clear objective and learning goal, informing students about what they'll learn and the expected outcome.

Scaffolded Learning

Limited new information builds on skills from the previous lesson and recurs throughout subsequent lessons.

Teacher Talk Is Explicit and Unambiguous

Information is presented explicitly and unambiguously to mitigate students' misunderstanding.

Goals and Objectives Are Explicit

Lessons have a clear objective and learning goal, informing students about what they'll learn and the expected outcome.

Scaffolded Learning

Limited new information builds on skills from the previous lesson and recurs throughout subsequent lessons.

Teacher Talk Is Explicit and Unambiguous

Information is presented explicitly and unambiguously to mitigate students' misunderstanding.

Goals and Objectives Are Explicit

Lessons have a clear objective and learning goal, informing students about what they'll learn and the expected outcome.

Scaffolded Learning

Limited new information builds on skills from the previous lesson and recurs throughout subsequent lessons.

Teacher Talk Is Explicit and Unambiguous

Information is presented explicitly and unambiguously to mitigate students' misunderstanding.

Goals and Objectives Are Explicit

Lessons have a clear objective and learning goal, informing students about what they'll learn and the expected outcome.

Scaffolded Learning

Limited new information builds on skills from the previous lesson and recurs throughout subsequent lessons.

Examples

Timeline

Examples

Video Player

Examples

Webinar Block

Webinars

Free webinars led by academic experts, offering invaluable information and practical insights on teaching methods and tools. The webinars are designed to help education professionals turn evidence into practice and enhance student outcomes.

View All
Thursday October 16 4:00 pm to 4:45 pm (AEST)

Motivation, Praise and Error Correction: Practical Strategies to Use in Your Classroom

Learn how to provide positive praise, motivation strategies, correct errors, model student responses and address specific group errors.

Stefani Deligiannis Teaching Coach