bootstrap

Below are some standard Bootstrap 4 elements that should just work natively within the Gilmore template.

We should probably wait to see if the new Squiz Design System can use Bootstrap 5 although most of these simple classes will simply transfer across.  Here is a cheatsheet showing all standard Bootstrap 5 components, with a demo below of how the column system works.  This is demonstrated in practice on Miles Without Stiles and Frequently Asked Questions.

Temporary aim

The aim will be to replace most section pages with BWR text links with new asset listing pages with card links controlled by paint layouts.

This will also involve moving to section / sub-section for some areas eg. Walking section with subs for Family Walks, Miles Without Stiles, Long Distance Routes etc.

Header 1
Content 1
Footer 1
Header 2
Content 2
Footer 2
Header 3
Content 3
Footer 3
Header 4
Content 4
Footer 4
Header 5
Content 5
Footer 5

Brand color

Theme colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-pdnpa_lime
.bg-pdnpa_orange
.bg-pdnpa_lilac
.bg-pdnpa_stone
.bg-pdnpa_purple
.bg-pdnpa_midbrown
.bg-pdnpa_blue
.bg-pdnpa_lightblue
.bg-pdnpa_darkorange

Gradient of grey

.swatch-100
.swatch-200
.swatch-300
.swatch-400
.swatch-500
.swatch-600
.swatch-700
.swatch-800
.swatch-900

Links

Default Link

Exemple link

Link inside an alert

Grid

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-7
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-5
.col-sm-7
.col-sm-6
.col-sm-6
.col-sm-12

Fonts

h1

h2

h3

h4

h5
h6

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading

Display 1

Display 2

Display 3

Display 4


This is the article lead — it stands out at the start of the article.

This is normal text at the normal size etc...

Sample marked text.


The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now.

Buttons

Default buttons

Buttons with outline

Buttons sizes


Disabled button

The 'a' Element

Checkbox buttons

Radio buttons

Forms

Default form group

Inline form

Aligned form

Fruit

Form with help text

Your account ID is located at the top of your invoice.

Checkbox and radio

Dropdown

Default dropdown

Action Another action Something else here

Dropdown with menu

Company Information
Our Story Our Team
Contact Us
Call Center Store Locations

Dropdown with divider

Our Story Our Team
Contact Us

Navs

Default nav

Horizontal menu

Nav with tabs

Nav with pills

Horizontal nav with pills

Nav with tabs and dropdown

Welcome home! Click on the tabs to see the content change.

A hat is a head covering. It can be worn for protection against the elements, ceremonial reasons, religious reasons, safety, or as a fashion accessory.

Navbar

Tables

Default table

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table inverse

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table striped

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with border

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with hover

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with Head with default color

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with inverse Head color

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Pagination

Jumbotron

Container size jumboton

Think BIG with a Bootstrap Jumbotron!

Container fluid size jumbotron

Think BIG with a Bootstrap Jumbotron!

Cards

Boot Polish

Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof leather shoes or boots to extend the footwear's life, and restore, maintain and improve their appearance.

More

Sun Gone

Here are the top resources for all things related to the Sun.

Sun Gone Still Gone

Sun Gone

Sun disappears!
Photo of sunset

The sun disappeared behind the horizon today. Experts claim it could be gone for good!

Full Report
Sponsored Content

Ugg Boots

Best ugg boots on the planet. Free shipping, 24/7 customer service.

By boots.com
Sun Gone

The top resources for all things related to the Sun.

Sun Gone Still Gone
Sun Up

Looks like the Sun has returned. Here's why.

Tooltip

Inline tooltip

Check out my Grid tutorial, as you never know when you might need it!

All position tooltip

Popovers

All popover position

Badges

Badge heading

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Button with inline badge

Default badges

Primary Secondary Success Danger Warning Info Light Dark

Badges pill

Primary Secondary Success Danger Warning Info Light Dark

Badges with link

Primary Secondary Success Danger Warning Info Light Dark

Modals

Alerts

Default alert

Dismissible alert

Dismissible alert with fade

Progress bars

Default Progress bar






Striped Progress bar







Animated Progress bar

List group

Default list group

  • These Boots Are Made For Walking
  • Eleanor, Put Your Boots On
  • Puss 'n' Boots
  • Die With Your Boots On
  • Fairies Wear Boots

List group with pills

  • These Boots Are Made For Walking 15
  • Eleanor, Put Your Boots On 38
  • Puss 'n' Boots 76
  • Die With Your Boots On 112
  • Fairies Wear Boots 181

Link List group

These Boots Are Made For Walking Eleanor, Put Your Boots On Puss 'n' Boots Die With Your Boots On Fairies Wear Boots

Button List group

List group with colors

These Boots Are Made For Walking Eleanor, Put Your Boots On Puss 'n' Boots Die With Your Boots On Fairies Wear Boots Head Over Boots Boot Scootin' Boogie

Image thumbnails

Sample image Sample image Sample image Sample image

Figures

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Breadcrumbs

Carousel

Close

Code

Default code

For example, <section> should be wrapped as inline.

Code with pre tag

        
          <p>Sample text here...</p>
          <p>And another line of sample text here...</p>

Var tag

y = m x + b

Kbd tag

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Samp tag

This text is meant to be treated as sample output from a computer program.