GRID SYSTEM

<div class="container">
<div class="row">
<div class="col-__">
<!-- CONTENT -->
</div>
</div>
</div>

FIND the above pattern(s) within the HTML.
Move a .row to the outside of a container. What happens?

- .row just shows up on top of the entire website. If you put the .row inside the closing bracket, then the space on top of the website disappears.

Move a column outside a row but within a container. What happens?
- The width of the gray area of Meow widens.

What is the importance of using these three classes together container, row, col-__ and in the correct hierarchical sequence?
- This shows that rows must be placed inside a container to get proper alignment. In this way, rows function as horizontal groups of columns. The hierarchical relationship is that only columns can be the children of rows.

Manipulate some of the content inside the columns to different parts of the page, keeping in mind whether the content is inside a row, or a container, or none.
What happens when content falls outside of the columns?

- If the content falls outside of the column then the content will not be in the format provided by Bootstrap and instead will float outside the invisble border.

Manipulate the column classes to replace some col-12 to col-xl-4. Then, drag your browser screen out to make it really large or really small. Or you can zoom in or zoom out of your browser to get the similar effect.
What does the xs, sm, md, lg, xl represent in the column class notation?

- .col-xs refers to extra small, .col-sm is small, .col-md is medium,.col-lg is large and .col-xl is extra large. Under these notations, the size of the image of the cat will change.

Manipulate the column classes to replace some col-12 to col-3. This is partly dependent on how large your browser window is so you might have to play with the size or zoom in and out to see differences.
What does the number in the column name represent with respect to the GRID system?

- the number in the column name represents how many grids are used to display the text and image. Typically col-12 is used in the GRID system.

Carefully observe and compare this column class naming system (i.e. opinion) that Bootstrap has, with the column naming system of these other GRID SYSTEMS:
https://semantic-ui.com/collections/grid.html
Click on the <> on the page to see the actual code with classes
http://materializecss.com/grid.html
http://getskeleton.com/#grid
What are the similarities and what are the differences?

- In all of these examples, the columns live inside rows. The only major difference that I can detect is with the getskeleton one. This one's columns are set diagonally whereas the one from materialize is horizontal and vertical.

What is a Grid System convention vs. rule? Can you give an example?

- Using a Grid System as a form of convention can provide a firm foundation that helps to make sure that the content presented is easy-to-understand. However, there is no rule stating that designers must use grids. Sometimes breaking out of the grid system allows more creativity. For example, asymmetric grids are great for disrupting conventions.

What would happen to my columns if I remove Bootstrap from my page?

- If Bootstrap is removed then the styling and organization of the HTML will collapse.

Is the class, col-xs-6 for example, really that special?

- It is kind of special in that col-xs-6 will lead to the content spanning half the screen on mobile devices and almost one-third on tablet screens.

Visit the following link: Grid System Explained
What is the advantage of using popular tools like Bootstrap?
- The advantage of using popular tools like Bootstrap is that it provides a consistent framework that can be used to support most major browsers. In addition, it is compatible with CSS and easy to use for beginners. Not to mention that Bootstrap is customizable which allows for creative efforts.

How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?

- It allows learners to understand that coding is not one-dimensional. There are many different ways to do the same thing. In this way, learners can explore a variety of methods that would lead to more multi-dimensional learning.