Grid System

Southeast uses the Bootstrap 3 framework to code their website. Bootstrap runs off of a grid system that is used to define page layouts amongst all screen sizes.

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Responsive Design

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Typography

Heading 1 36 px

Heading 2 48 px

Heading 3 25 px

Heading 4 21 px

Heading 5 Linked Heading 517 px
Heading 6 15 px

Colors

Southeast Red - Pantone 186
#C8102E

C | 2
M | 100
Y | 85
K | 6

R | 200
G | 16
B | 46

Rich Black
#000000

C | 40
M | 40
Y | 40
K | 100

R | 0
G | 0
B | 0

River
#151F6D

C | 40
M | 40
Y | 40
K | 100

R | 0
G | 0
B | 0

Cardiac
#9D2235

C | 7
M | 100
Y | 68
K | 32

R | 157
G | 34
B | 53

White
#FFFFFF

C | 0
M | 0
Y | 0
K | 0

R | 255
G | 255
B | 255

Fountain
#71C5E8

C | 52
M | 0
Y | 1
K | 0

R | 113
G | 197
B | 232

Gum Tree
#C5E860

C | 30
M | 0
Y | 64
K | 0

R | 197
G | 232
B | 108

Oxidized
#71CC98

C | 53
M | 0
Y | 51
K | 0

R | 113
G | 204
B | 152

Terrace
#279989

C | 75
M | 5
Y | 48
K | 3

R | 39
G | 153
B | 137

Beak
#F1B434

C | 0
M | 32
Y | 87
K | 0

R | 241
G | 180
B | 52

Dull Sky
#ABC7CA

C | 29
M | 1
Y | 10
K | 5

R | 171
G | 199
B | 202

Dome
#7A6855

C | 16
M | 29
Y | 38
K | 53

R | 122
G | 104
B | 85

Pantone 876
#8B634B

C | 17
M | 44
Y | 62
K | 49

R | 139
G | 99
B | 75

Colorize Mixins

We provide four different classes that can add a splash of color to a number of HTML elements. These can range from table headings, text boxes, etc. Just apply one of these classes to the desired element.

For colorizing panels, view the Panels Snippet

.colorize-primary
.colorize-secondary
.colorize-fountain
.colorize-terrace

Utility Classes

.pull-left
Applies a float: left style on an element as well as a padding-right: 15px if it is in the .page-body.

For text, use .text-left instead.
.pull-right
Applies a float: right style on an element as well as a padding-left: 15px if it is in the .page-body

For text, use .text-right instead.
.center-block
Sets an element to display: block and center via margin.

For text, use .text-center instead.
.img-thumbnail
Used for an image that also serves as a link.
.img-responsive
Makes the image responsive and scale with its parent element by placing a max-width: 100% and height: auto; to it
.hidden-xs
Use on an element that you want to hide on the mobile view.
.visible-xs
Use on an element that you want to show only on mobile view.
.check
Use on an unordered list to replace the standard dots with checkmarks.
  • Check One
  • Check Two
  • Check Three

Graphical Elements

  • Green Checkmark 
    <span class="text-success"><span class="glyphicon glyphicon-ok">&nbsp;</span></span>
    *&nbsp; required so OUCampus WYSIWYG editor doesn't strip span tags.
  • Red X 
    <span class="text-danger"><span class="glyphicon glyphicon-remove">&nbsp;</span></span>
    *&nbsp; required so OUCampus WYSIWYG editor doesn't strip span tags.
  • PDF Icon -  
    <span class="pdf-icon">&nbsp;</span>
    *&nbsp; required so OUCampus WYSIWYG editor doesn't strip span tags.
  • Contextual Badge - OPENCLOSING SOONFULL
    <span class="label label-success">OPEN</span>
    <span class="label label-warning">CLOSING SOON</span>
    <span class="label label-danger">FULL</span>
        

Buttons

  • ButtonSuccessFountainGumtreeTerraceOxidizedBeakDull Sky
    <a class="btn btn-default">Button</a>
    <a class="btn btn-success">Success</a>
    <a class="btn btn-fountain">Fountain</a>
    <a class="btn btn-gumtree">Gumtree</a>
    <a class="btn btn-terrace">Terrace</a>
    <a class="btn btn-oxidized">Oxidized</a>
    <a class="btn btn-beak">Beak</a>
    <a class="btn btn-dullsky">Dull Sky</a>
                         
  • Button Group
    <div class="btn-group">
       <a class="btn btn-default">Left</a>
       <a class="btn btn-default">Middle</a>
       <a class="btn btn-default">Right</a>
    </div>
                         
  • Block-Level Button
    <a class="btn btn-block btn-default">Block-Level Button</a>
                         
  • Button with Drop Shadow
    <a class="btn btn-block btn-default drop-shadow">Button with Drop Shadow</a>
                         

Glyphicons

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

Page Elements

Contact Information

Custom OU Snippets

Callouts callout.inc
Callout Header

Place some text here

Content Columns columns.inc
Art class

Column One

Students using computers

Column Two

A paragraph of text can be added instead of links to help convey information about this category.

Students talking

Column Three

Table Row
A small table can be included underneath this category
Emeritus Faculty Listing emeritus-faculty.inc

Information for the 1st link expand

Information for the 2nd link expand

Information for the 3rd link expand

Image Floating Left image-floating-left.inc

Image caption goes here (delete if not needed)
Image Floating Right image-floating-right.inc

Image caption goes here (delete if not needed)
Interior Table interior_table.inc
Program Website Email
Harrison College of Business www.semo.edu/hcb business@semo.edu
Department of Accounting www.semo.edu/accounting acctmis@semo.edu
International Business Programs www.semo.edu/ibp ibp@semo.edu

Center for Innovation

and Entrepreneurship

www.semo.edu/cie cie@semo.edu
Media List media-list.inc

Houck's Place

  • Located in Merick Hall
  • Made-to-order sandwiches
  • Flatbread pizza, salads, wraps and paninis
  • Outtakes, frozen treats and C-Store snacks
Modal Box modal.inc
Panels panel.inc
Panel Heading
Panel Body
Side Banner Image side_banner_image.inc
Side Banner (NO caption) side-banner-no-caption.inc

Tabs tabs-raw.inc
Tab 1 text
Tab 2 text
Tab 3 text
Tab 4 text
Degree Tabs tabs.inc

First Semester (15 Hours)

  • AD101 Introduction To Microcomputer Applications (3)
  • EN100 English Composition I (3)
  • MA134 College Algebra* (3)
  • UI100 First Year Seminar* (3)
  • University Studies-Artistic Expression (3)

Second Semester (15 Hours)

  • EN140 Rhetoric & Critical Thinking* (3)
  • MA139 Applied Calculus (3)
  • SC105 Fundamentals of Oral Communication* (3)
  • University Studies-Living Systems (3)
  • University Studies-Political Systems (3)

Third Semester (18 Hours)

  • AC221 Principles of Financial Accounting (3)
  • EC215 Principles of Microeconomics* (3)
  • MG252 Business Communication (3)
  • University Studies-Behavioral Systems (3)
  • University Studies-Major Civilization (3)
  • University Studies-Physical Systems (3)

Fourth Semester (18 Hours)

  • AC222 Principles of Managerial Accounting (3)
  • BL255 Legal Environment of Business (3)
  • EC225 Principles of Macroeconomics (3)
  • QM257 Business Statistics (3)
  • University Studies-Literary Expression (3)
  • University Studies-Social Systems (3)

Fifth Semester (15 Hours)

  • AC321 Financial Accounting & Reporting I (3)
  • Accounting Elective*** (3)
  • MG301 Management & Organizational Behavior (3)
  • QM352 Quantitative Methods in Business (3)
  • UI3XX University Studies (3)

Sixth Semester (15 Hours)

  • AC332 Financial Accounting & Reporting II (3)
  • AC435 Taxation of Individuals (3)
  • FI361 Financial Management (3)
  • MI375 Management Information Systems (3)
  • MK301 Principles of Marketing (3)

Seventh Semester (15 Hours)

  • Accounting Elective*** (3)
  • Accounting Elective*** (3)
  • International Accounting (3)
  • QM358 Production/Operations Management (3)
  • UI3XX University Studies (3)

Eighth Semester (15 Hours)

  • AC437 Auditing & Assurance Services (3)
  • Accounting Elective*** (3)
  • Accounting Elective*** (3)
  • BA490 Business Policy & Strategy (3)
  • UI400 Business & Ethics** (3)
Text Box text-box.inc

Heading (If Needed)

  • list item 1
  • list item 2
  • list item 3

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading (If Needed)

  • list item 1
  • list item 2
  • list item 3

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Vimeo Modal vimeo-modal.inc
State of the Art Video
View our State of the Art Facilities