MFIT Bootstrap Components
iFactory Keyscreens index and Functional Specs in Atlantis. Replicated as closely as possible for testing snippets and components.
- iFactory Museum Homepage = MFIT Homepage template
- iFactory Exhibitions Landing = MFIT Exhibitions Landing template
- iFactory Exhibitions Template = MFIT Exhibition Details template
- iFactory MFIT Bootstrap Components = MFIT Bootstrap Elements (interior template)
- iFactory Pattern Component Library = MFIT Pattern Elements Library (interior template)
- iFactory WYSIWYG - Hero w/o Image = MFIT WYSIWYG Elements (interior template)
50-50
This is not exactly the Bootstrap 50-50 - is it the new one, plain HTML?
In iFactory's Keyscreens original set of bootstrap components:
- Component Card Deck
- Bootstrap 30-30-30
- Bootstrap 50-50
- Bootstrap 70-30
- Image Dropdown Grid
- Toolbox
Additional items that were created later for FIT Main, but are added here as Museum can generally speaking use them as well:
- 2 and 3 Columns with Video/Images
- 30-30-30 (plain html)
- 50-50 (plain html)
- 70-30 (plain html)
Video 2-3:2 Across
= 2 Columns Video/Images
Test parallax
FIT Hives - Youtube
watch?v= converts into embed/ + enablejsapi?=1 or not?
- Speaker Name 1
- Speaker Name 2
- Speaker Name 3
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
Test Parallax
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
Video 2-3:3 Across
= 3 Columns Video/Images
Test Parallax
FIT Hives - Youtube
watch?v=
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
Test Parallax
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
Test Parallax
FIT Hives - Youtube
watch?v=
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.
This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. This is a paragraph describing
Component Card Deck
How to use this snippet:
- For all Images to display evenly they should be the same height and width
- Changing "Size" setting in the snippet determines how many cards will be displayed
across the screen horizontally:
- Small - 4 across
- Medium - 3 across
- Large - 2 across
- To add more cards: insert "Component Card Deck - Item (Redesign)" snippet
Associate 2+2 Program
1 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Associate 2+2 Program
2 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Associate 2+2 Program
3 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Associate 2+2 Program
4 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Associate 2+2 Program
5 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Associate 2+2 Program
6 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Associate 2+2 Program
7 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Associate 2+2 Program
8 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit.
Component Card Deck
How to use this snippet:
- For all Images to display evenly they should be the same height and width
- Changing "Size" setting in the snippet determines how many cards will be displayed across the screen horizontally
- To add more cards: insert "Component Card Deck - Item (Redesign)" snippet
Associate 2+2 Program
2.1 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
2.2 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
2.3 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
2.4 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
2.5 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
2.6 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Component Card Deck
How to use this snippet:
- For all Images to display evenly they should be the same height and width
- Changing "Size" setting in the snippet determines how many cards will be displayed across the screen horizontally
- To add more cards: insert "Component Card Deck - Item (Redesign)" snippet
Associate 2+2 Program
3.1 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
3.2 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
3.4 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
Associate 2+2 Program
3.5 This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem different ipsum dolor sit. That’s how we different the future lorem ipsum dolor it. This is a paragraph describing our different
50-50
This is not exactly the Bootstrap 50-50 - is it the new one, plain HTML?
Format your text
- This is a paragraph describing our different departments and programs.
- At FIT, diversity of opinion makes us better lorem ipsum dolor sit.
- That’s how we design the future lorem ipsum dolor it.
30-30-30
This is not exactly the Bootstrap 30-30-30 is it the new one, plain HTML?
Format your text
- This is a paragraph describing our different departments and programs.
- At FIT, diversity of opinion makes us better lorem ipsum dolor sit.
- That’s how we design the future lorem ipsum dolor it.
70-30
This is not exactly the Bootstrap 70-30 - is it the new one, plain HTML?
Format your text
- This is a paragraph describing our different departments and programs.
- At FIT, diversity of opinion makes us better lorem ipsum dolor sit.
- That’s how we design the future lorem ipsum dolor it.
Bootstrap 30-30-30
Associate 2+2 Program
This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem ipsum dolor sit. That’s how we design the future lorem ipsum dolor it.
Associate 2+2 Program
This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem ipsum dolor sit. That’s how we design the future lorem ipsum dolor it.
Associate 2+2 Program
This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem ipsum dolor sit. That’s how we design the future lorem ipsum dolor it.
70-30
Associate 2+2 Program
This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem ipsum dolor sit. That’s how we design the future lorem ipsum dolor it.
Associate 2+2 Program
This is a paragraph describing our different departments and programs. At FIT, diversity of opinion makes us better lorem ipsum dolor sit. That’s how we design the future lorem ipsum dolor it.
Image Dropdown Grid
This is a short sentence providing context for the information appearing.
How to use this snippet:
- Recommended image size/ratio: 500x500 (1:1 ratio)
- Expand each Grid Item in preview to see different formatting/use options
- Optional CTA Link:
- To link to other page/anchor use the Optional CTA link
For usability purposes limit the lead-in text to a few lines - Alternatively post longer copy without using the CTA
- To link to other page/anchor use the Optional CTA link
Bootstrap Toolbox