Skip to main content
Skip to main content

Web Style Guidelines
and Resources

Strata - Version Three

Interface

A custom Boostrap 3 framework, Perfect Fourth Modular Scale, and Strata Three stylesheets form the interface's appearance.

The Strata

Wrap Bootstrap's containers in a Strata Three color class to apply styles for full-width layers. If internal content is to be wrapped within any of the named S3 classes, be sure to use the alternative class on the outer division. Full-width layers may use .s3-scored to apply an additional effect. Please refer to the S3 Class column in the Colors Table. The .s3-t or .s3-bg-t class in combination with a named class will remove the background color leaving the text colors intact.

Basic Usage

<div class="s3-name">
	<div class="container">
		...
	</div>
</div>
						

Nested Usage

<div class="s3-bg-name">
	<div class="container">
		...
			<div class="s3-name">
				...
			</div>
		...
	</div>
</div">
						
Toggle Background:

Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Lorum Ipsum Dolor Sit Amet

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

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.

This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates a subtle edge effect.


Floats

Content may be floated left or right with at half, third, and fourth the width of its container. Combine either .s3-left or .s3-left with .s3-half, .s3-third, or .s3-fourth/.s3-quarter to achieve the desired result.

Class Properties
.s3-left Floats left with adjusted margin
.s3-right Floats right with adjusted margin
.s3-half 50% width of container
.s3-third 33% width of container
.s3-fourth 25% width of container
.s3-quarter 25% width of container

Spacing

Strata Three's padding and margin are based upon its typography which utilizes the Perfect Fourth Modular Scale (3:4 / 1.333).

Perfect Fourth
EMs 0.178 0.238 0.317 0.422 0.563 0.750 1.000 1.333 1.777 2.369 3.157 4.209 5.610 7.478 9.969
Pixels 3 4 5 7 9 12 16 21 28 38 51 67 90 120 160

Padding

Strata Three padding classes are primarily used to apply space around block content (refer to Design Patterns for examples). Convenience classes are also available for removing padding.

Class Padding Note
.s3-p-1 0.178em Smallest specified padding in Strata Three
.s3-p-2 0.238em
.s3-p-3 0.317em
.s3-p-4 0.422em
.s3-p-5 0.563em Equal to the surrounding container of this table
.s3-p-6 0.75em
.s3-p-7 1em Equal to standard font size
.s3-p-8 1.333em
.s3-p-9 1.777em
.s3-p-10 2.369em
.s3-p-11 3.157em
.s3-p-12 4.209em
.s3-p-13 5.61em
.s3-p-14 7.478em
.s3-p-15 9.969em Largest specified padding in Strata Three
.s3-p-0 0 Removes all padding
.s3-p-t0 0 Removes top padding
.s3-p-r0 0 Removes right padding
.s3-p-b0 0 Removes bottom padding
.s3-p-l0 0 Removes left padding

Padding classes should not be applied to Bootstrap's grid classes, e.g., .container, .row, and .col-xs-12. Padded content should be nested within the column classes.


Margins

Strata Three margin classes are primarily used to modify top and bottom space between elements. Convenience classes are also available for removing margins. Classes s3-m-x affects top and bottom margins. Classes s3-mt-x affects top margins. Classes s3-mb-x affects bottom margins.

Class Margin Note
.s3-m-1, .s3-mt-1, .s3-mb-1 0.178em Smallest specified margin in Strata Three
.s3-m-2, .s3-mt-2, .s3-mb-2 0.238em
.s3-m-3, .s3-mt-3, .s3-mb-3 0.317em
.s3-m-4, .s3-mt-4, .s3-mb-4 0.422em
.s3-m-5, .s3-mt-5, .s3-mb-5 0.563em Equal to the surrounding container of this table
.s3-m-6, .s3-mt-6, .s3-mb-6 0.75em
.s3-m-7, .s3-mt-7, .s3-mb-7 1em Equal to standard font size
.s3-m-8, .s3-mt-8, .s3-mb-8 1.333em Recommended for a compact .container
.s3-m-9, .s3-mt-9, .s3-mb-9 1.777em
.s3-m-10, .s3-mt-10, .s3-mb-10 2.369em Recommended default .container margin
.s3-m-11, .s3-mt-11, .s3-mb-11 3.157em
.s3-m-12, .s3-mt-12, .s3-mb-12 4.209em
.s3-m-13, .s3-mt-13, .s3-mb-13 5.61em
.s3-m-14, .s3-mt-14, .s3-mb-14 7.478em
.s3-m-15, .s3-mt-15, .s3-mb-15 9.969em Largest specified margin in Strata Three
.s3-m-0 0 Removes all margin
.s3-m-t0 0 Removes top margin
.s3-m-r0 0 Removes right margin
.s3-m-b0 0 Removes bottom margin
.s3-m-l0 0 Removes left margin

Margin classes should not be applied to Bootstrap's column classes, e.g., .col-xs-12.

Shadows


Box Shadows

Subtle shadows may be added to block-level elements by applying the .s3-bs class. Effect is dependent upon its parent .s3-name class.

Shadows are not set for .s3-bg-name classes, but you may add them to your local styles.

Toggle Background:
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs
.s3-bs

.s3-bs
.s3-bs
.s3-bs

Text Shadows

Text shadows to increase contrast in sliders and features are available in garnet (.st-ts-gt), gold (.st-ts-gd), slate (.st-ts-s), and white (.st-ts-w). These may be used in addition to your own custom styles.

Shadows are not set for .s3-bg-name classes, but you may add them to your local styles.

Garnet

Gold

Slate


White

Borders

Horizontal Rules and other elements with borders may be styled by applying a .s3-b-name class.

Toggle Background:
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed
Class Name Result (Using Horizontal Rules)
.s3-b-gt Garnet
.s3-b-gt1k Garnet + 1 Black
.s3-b-gt2k Garnet + 2 Black
.s3-b-gt3k Garnet + 3 Black
.s3-b-gd Gold
.s3-b-gd1c Gold + 1 Canvas
.s3-b-gd2c Gold + 2 Canvas
.s3-b-gd3c Gold + 3 Canvas
.s3-b-c Canvas
.s3-b-w White
.s3-b-n2w Neutral + 2 White
.s3-b-n1w Neutral + 1 White
.s3-b-n Neutral
.s3-b-n1s Neutral + 1 Slate
.s3-b-n2s Neutral + 2 Slate
.s3-b-s Slate
.s3-b-k Black
.s3-b-t0 NA Top border is removed
.s3-b-b0 NA Bottom border is removed

Tables

Toggle Background:
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349

Standard responsive table

Classes applied:

  • .table
Toggle Background:
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349
Curabitur sodales ligula Sed dignissim lacinia
Curabitur tortor $6,507 $21,673
Pellentesque nibh $6,480 $6,480
Aenean quam $4,196 $4,196
Maecenas mattis $1,000 $1,000
Fusce ac turpis $18,183 $33,349

Responsive Table

Classes applied:

  • div.table-responsive
  • .table
  • .table-condensed
  • .table-striped

Forms

Toggle Background:

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Mauris ipsum
Sed lacinia
Nulla metus metus
Nulla metus metus
Mauris massa

Buttons

Toggle Background:

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Garnet

Garnet Shades

.s3-gt .s3-gt1k .s3-gt2k .s3-gt3k
.btn .btn-sm  
.btn .btn-md  

Gold

Gold Tints

.s3-gd .s3-gd1c .s3-gd2c .s3-gd3c
.btn .btn-sm  
.btn .btn-md  

Neutrals

.s3-c .s3-w .s3-n2w .s3-n1w .s3-n
.btn .btn-sm
.btn .btn-md
.s3-n1s .s3-n2s .s3-s .s3-k  
.btn .btn-sm  
.btn .btn-md  

Adding .btn-block makes the button fill its container width.

Breadcrumbs

Toggle Background:

Breadcrumbs should not be used on single-level websites.

Pagination

Toggle Background: