State Banner

Contents

 

Description

This version of the Bootstrap 3 library has been updated to reflect the states style guide. It is not meant to document all the features and aspects of Bootstrap. It just shows common bootstrap components and how they look with the states styles. For more information on bootstraps usage, see https://getbootstrap.com/docs/3.3/components/

Usage

There are a couple of ways you can leverage this framework:

  • You can included the required files directly from our file server:

    • CSS
    • https://files.dnr.state.mn.us/lib/bootstrap3/css/bootstrap.css
    •  
    • JAVASCRIPT
    • https://files.dnr.state.mn.us/lib/bootstrap3/javascripts/bootstrap.js
    • - or-
    • https://files.dnr.state.mn.us/lib/bootstrap3/javascripts/bootstrap.min.js
  •  
  • You can download a zip file with the latest package of the code:
    • https://files.dnr.state.mn.us/lib/bootstrap3/download/state-branded-bootstrap-3.zip or click here

Headers

We are using Roboto Slab, Arial, Helvetica, sans-serif for all header tags. The fonts are obtained from fonts.googleapis.com are included in this package.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Panels

Default
panel-default

Primary

panel-primary

Success

panel-success

Info

panel-info

Warning

panel-wanring

Danger

panel-danger

Glyphicons

All Bootstrap Glyphicons should be accessible

Alerts

Success

Tables

All previous versions of Bootstrap table classes work as expected. The only think that has changed is the state color.


Column Heading Column Heading Column Heading
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content

Tabs

Tabs will work the way they have always working in Bootstrap

Home page stuff goes here...

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Profile stuff...

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Messages....

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Settings....

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.


Or you can use them in their Pill form:


Pill version - Home page stuff goes here...

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Pill version - Profile stuff...

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Pill version - Messages....

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Pill version - Settings....

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Panels with nav tabs.

These are custom to our Framework. They are not a normal part of Bootstrap. Someone had a pretty good example of how to create them on Bootsnipp.com. We turned that example into a fully scalable SASS partial and mixin. They are now completely customizable and scalable, if we ever decide to change them, or add to them.
Default 1
Default 2
Default 3
Default 4
Default 5
Default 1
Default 2
Default 3
Default 4
Default 5
Default 1
Default 2
Default 3
Default 4
Default 5
Default 1
Default 2
Default 3
Default 4
Default 5
Default 1
Default 2
Default 3
Default 4
Default 5
Default 1
Default 2
Default 3
Default 4
Default 5
Justified Default 1
Justified Default 2
Justified Default 3
Justified Default 4
Justified Default 5

See below code example for usage.

  • <div class="panel with-nav-tabs panel-danger">
    • <div class="panel-heading">
      • <ul class="nav nav-tabs">
        • <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
        • <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
        • <li><a href="#tab3default" data-toggle="tab">Default 3</a></li>
        • <li><a href="#tab3default" data-toggle="tab">Default 3</a></li>
        • <li class="dropdown">
          • <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          • <ul class="dropdown-menu" role="menu">
            • <li><a href="#tab4default" data-toggle="tab">Default 4</a></li>
            • <li><a href="#tab5default" data-toggle="tab">Default 5</a></li>
          • </ul>
        • </li>
      • </ul>
    • </div>
    • <div class="panel-body">
      • <div class="tab-content">
        • <div class="tab-pane fade in active" id="tab1default">Default 1</div>
        • <div class="tab-pane fade" id="tab2default">Default 2</div>
        • <div class="tab-pane fade" id="tab3default">Default 3</div>
        • <div class="tab-pane fade" id="tab4default">Default 4</div>
        • <div class="tab-pane fade" id="tab4default">Default 4</div>
        • <div class="tab-pane fade" id="tab5default">Default 5</div>
      • </div>
    • </div>
  • </div>

Accordians

Bootstrap doesn't actually have "accordians" per say - Accordians is a jQuery UI component. It is very easy to simulate in Bootstrap, and ends up being way more flexiable as well. You can add footers to the panel elements if you want too as well.
The Plus / Minus feature shown in this demo is not a standard feature of bootstrap. It is also not in this library. Custom javascript was added to the page to toggle those icons. It is left up to the use case, to determin if such a feature is required by your application.

What is HTML?

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.

What is Bootstrap?

Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.

What is CSS?

CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc.


You use the panel classes to change the look of the panels


What is HTML?

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.

What is Bootstrap?

Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.

What is CSS?

CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc.

  • <div class="panel-group" id="accordion">
    • <div class="panel panel-default">
      • <div class="panel-heading">
        • <h4 class="panel-title">
          • <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What is HTML?</a>
        • </h4>
      • </div>
      • <div id="collapseOne" class="panel-collapse collapse">
        • <div class="panel-body">
          • <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</p>
        • </div>
      • </div>
    • </div>
  • </div>

Contextual Classes

A lot of contextual baseed classes have been added to the repo. Bootstrap already leverages a contextual based system but we have added extensively to it. The system has two main variants, bg-{color} and text-{color}. The repo still supports the 5 base state actions: primary success info warning danger but it also supports all the minnesota state colors as well. All colors come from the style guide.

  • minnesota-blue
  • minnesota-green
  • white
  • black
  • accent-teal
  • accent-green
  • accent-orange
  • accent-purple
  • extended-accent-blue-gray
  • extended-accent-cream
  • extended-accent-sky-blue
  • extended-accent-gold
  • dark-gray
  • medium-gray
  • light-gray
  • safety-red
  • safety-orange

Contextual Types

There are two main types of Contextual Classes - .bg-{color} and .text-{color}. These classes use !important to ensure that the colors are overridden. All colors use the style guide naming convention. See Style guide for color names.

Some color pairings have a default complementary color. If you don't specify a text color, the default will be used.

Tip

When dealing with Bootstrap components that have a normal bootstrap context, you can ommit the context and just use the contextual class.

  • Example:
  • <a class="btn btn-default bg-minnesota-blue" href="#">Some button</a>
  • <a class="btn bg-minnesota-blue" href="#">Some button</a>

Buttons (Only bg-{color} properties)

Use the standard btn and adjust the background-color. Default accent color is used.

.bg-minnesota-blue

.bg-minnesota-green

.bg-white

<a class="btn bg-minnesota-blue" href="#">Some button</a>

Buttons (bg-{color} and text-{color} properties)

Use the standard btn and adjust the background-color and text color accordingly. Use .bg-{color} and .text-{color}

.bg-minnesota-green .text-minnesota-blue

.bg-minnesota-green .text-white

.bg-minnesota-green .text-black

.bg-minnesota-blue .text-minnesota-green

.bg-minnesota-blue .text-white

.bg-minnesota-blue .text-black

.bg-accent-teal .text-extended-accent-gold

.bg-accent-teal .text-white

.bg-accent-teal .text-black

<button class="btn bg-minnesota-blue text-minnesota-green">Some button</button>
<a class="btn bg-minnesota-blue text-minnesota-green" href="#">Some button</a>

Panels (bg-{color} properties)

Use the standard panel and adjust the background-color. Default accent color is used.

.bg-safety-red

Just some random text

.bg-minnesota-blue

Just some random text

.bg-minnesota-green

Just some random text

.bg-accent-teal

Just some random text

.bg-extended-accent-gold

Just some random text

.bg-extended-accent-blue-gray

Just some random text

  • <div class="panel bg-minnesota-blue" >
    • <div class="panel-heading" >
      • <h4 class="panel-title" >
        • .text-white
      • </h4 >
    • </div >
    • <div class="panel-body bg-white" >
      • Make sure to style background white....
    • </div >
  • </div >

Panels (bg-{color} and text-{color} properties)

Use the standard panel and adjust the background-color and text color accordingly.

.bg-safety-red .text-white

Just some random text

.bg-minnesota-blue .text-minnesota-green

Just some random text

.bg-minnesota-blue .text-white

Just some random text

.bg-accent-teal .text-white

Just some random text

.bg-accent-teal .text-extended-accent-gold

Just some random text

  • <div class="panel bg-minnesota-blue" >
    • <div class="panel-heading text-white" >
      • <h4 class="panel-title" >
        • .text-white
      • </h4 >
    • </div >
    • <div class="panel-body bg-white" >
      • Make sure to style background white....
    • </div >
  • </div >

Alerts (Only bg-{color} properties)

Use the standard alert and adjust the background-color accordingly: alert bg-minnesota-blue

Alerts (bg-{color} and text-{color} properties)

Use the standard alert and adjust the background-color and text accordingly: alert bg-minnesota-blue text-minneesota-green

Most Bootstrap components should work just fine with the Contextual classes. Just try to use the default variant version and override accordingly.

Form Controls

Form controls support all the standard Bootstrap 3 form components

Vertical Form:

(success)
@
(success)
(warning)
@
(success)
(error)
@
(success)

Field can't be blank

Horizontal Form:

(success)
@
(success)

Good job, you entered correctly.

(warning)
@
(warning)

The data you have entered in here is almost incorrect.

(error)
@
(error)

You did not meet the password requirements...

Callouts

Callouts are for information that you would like to bring attention to, without having the need to use a alert. <div class="callout callout-success">

This is a Default Callout.

You can put anything in here to draw attention to it, but without making it an alert.

This is a Primary Callout.

You can put anything in here to draw attention to it, but without making it an alert.

This is a Info Callout.

You can put anything in here to draw attention to it, but without making it an alert.

This is a Warning Callout.

You can put anything in here to draw attention to it, but without making it an alert.

This is a Danger Callout.

You can put anything in here to draw attention to it, but without making it an alert.