# Tinker- Bootstrap
Group members: Ying zheng, Xinyi Zeng, Zhiwei Lu, Keying Chen

## FRAMEWORK: OVERARCHING
### 1. In the settings of the CSS Pane (click on the gear) there is a section called Add External CSS. Remove the resource (Bootstrap) line.
#### * What happens to the page and why?
It messed up the layout of the page, and all the block elements are displayed on a new line separately.
### 2.Enter the above resource directly into your browser URL input to go to the page and scan through the resource. What is Bootstrap really?
A pre-set of CSS/HTML rules.
### 3. I have a few CSS rules in the CSS pane. Comment them out.
#### * What happens to the page and why?
The sytle of some elements changed.
Take the .btn-primary as an example, its style is difined differently in the CSS pane and the bootstrap code.
#### * What is the relation between my CSS and the External Resource?
CSS covers bootstrap.
#### * How does my CSS “intersect” with the External Resource?
So when they are both working, it would display as CSS described; but if CSS rules are commented out, then it would show as bootstrap set.
#### * What do you think is the sequence of how the External Resource and my CSS are loaded?
CSS first, and then bootstrap.
#### * What kinds of things could happen, if I am careless with my own CSS rules?
Css rule may not be working, and as a result, the bootstrap would overlay all the mistakes.
#### * Are you stuck with all of Bootstrap’s rules? How does our own CSS come into play if we don’t like a particular Bootstrap rule?
Use CSS code to cover what we don't want in Bootstrap role.
### 4. Compare this Tinker’s custom CSS vs. last week’s CSS.
#### * What kind of specific rules did I have to make last week that I did not have to do this week to achieve a very similar result?
Boostrap already decided the layout and structure of the page, so we do not need to come out with our personal design and explicit layout. Bootstrap decides the font size/color for the page.
#### * What then is the advantage of using a framework like Bootstrap?
It is more convinient.
#### * What are some disadvantages of using a framework like Bootstrap?
For the details (e.g.font color), we can have more personlaized style using CSS.
### 5. Compare the HTML from this week’s Tinker vs. last week’s Tinker HTML.
#### * I use a class called .container in both. Is this a special class? Are they the same thing?
No. They are just like boxes that contain differnet things.
#### * There are many more classes used in this week’s Tinker. Where do these classes come from?
They come from bootstrap.
### 6. Remove classes like img-thumbnail and some of the danger, info, etc. classes in the table and/or try adding them to other elements. Might work, might not.
#### * How do these kinds of classes relate and rely on the bigger structure and class rules of a framework?

### 7. Analyze the form and refer to https://getbootstrap.com/docs/4.5/components/forms/. Try to convert this BASIC form to an horizontal form and/or an inline form. Some of the examples have extra attributes like id, placeholder.
#### * Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)
#### * If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
#### h4* Manipulate the form to “exclude” certain classes as prescribed by the Bootstrap guide and examples.
#### * How does not following the specifications affect the output?
#### * What are the key aspects you need to be paying attention to when learning and implementing these framework features?
#### * What is the best way to learn how to use a new framework feature?**

## Grid System
### 1.FIND the above pattern(s) within the HTML.
#### * Move a .row to the outside of a container. What happens?
All rows move; Position changed.
#### * Move a column outside a row but within a container. What happens?
They are not align with each other anymore.
#### * What is the importance of using these three classes together container, row, col-__ and in the correct hierarchical sequence?
It is important to follow the hierarchical sequence: Container, row, then column.
### 2. 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?
It would not follow the style of the columns.
### 3. 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?

### 4.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?