---
tags: mstu5003, tinker, html, css, bootstrap
---

# TINKER: Bootstrap 5.x
## Group Member: Ze Lu, Yiran Wang, and Jiayi Xue

---

### FRAMEWORK: OVERARCHING

- 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?
:::info
Answer:
When the resource (bootstrap) is removed, the style/display of the text, pictures and videos changes. This is because importing the bootstrap and apply grid system of setting up some basic rules can reduce amount of work in typing CSS code. After we apply certain classes, it will help to align the text, pictures, margine and so on in an unified order or logic.

:::

- Enter the above resource directly into your browser URL input to go to the page and scan through the resource.
- What is Bootstrap really?

:::info
Answer: In the bootstrap, it helps to organize the formate, display of the pages. It looks more organized after applied the bootstrap.
:::

- I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
:::info
Answer: When comment the CSS rules out, the title, footer and heading's space is more close to each other. When commented out again, the heading, titles and footer has more spaces specifically add more margin between other div.
:::
- What is the relation between my CSS and the External Resource?
:::info
Answer: Compare the CSS rule with the external resources. The external resources is more general and apply to all the parts that contains the specific classes verses the CSS we write will be exception and specific. It can overwrite the code that external resources have.
:::

- How does my CSS "intersect" with the External Resource?
:::info
Answer: Identifies the affected HTML document elements and informs the browser how to style those elements. When we select a specific HTML element and further customize its style, our own CSS "intersects" with the external resource. The CSS rules we input apply our own CSS rules, overriding Bootstrap's automatic CSS rules.

:::
- What do you think is the sequence of how the External Resource and my CSS are loaded?

:::info
Answer: In accordance with the way browsers load and parse HTML documents, we are assuming that the same order is followed when loading CSS. External resources are recognized first, and additional CSS rules are then loaded.

:::
- What kinds of things could happen, if I am careless with my own CSS rules?

:::info
Answer: Since own CSS rules will overwrite the bootstrap rules, accidental mistakes will causes potential formate change in the website.

:::
- 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?

:::info
Answer: Bootstrap's rule provided a general formate, saving time, and reduce error that may occur in writing code manually. If we don't like particular Bootstrap rule, we also can always write our own CSS code to overwrite it.

:::
- 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?

:::info
Answer: The bootstrap activities this week will simplify the coding work for us and can also achieve the same results. Last week, we have to type in the code manually, it increasing the chance of making mistakes and it's hard to trach once we have lots of code insert into the html.

For example, In order to change the text color, we have to go to css and determine the class of the text and then added color and add the specific color #. But this week, we just go to the bootstrap to shop for the color and then cpoy the code of the class that represent the style, then transfer it back to the html code.

:::
- What then is the _advantage_ of using a framework like Bootstrap?

:::info
Answer: The advantage of using the framework is that it can reduce amount of code that we have to manually type in the CSS and JS. It's also can make sure that all the text align or structure in a similar display by applying the same class or code so that we don't have to go back to refer back what we use previously.

:::
- What are some _disadvantages_ of using a framework like Bootstrap?

:::info
Answer: The disadvantages of using a framework like bootstrap is that we must follow the rules and syntax such as the containers first, row second and then cols. In addition, the margin, padding and so on, they have fixed pixel. You must overwrite it if you don't like it.

:::
- 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?

:::info
Answer: It is different thing. The `container` that we have last week maybe is one class named as "container", but the class `container` this week is part of heirarchy and grid system that the code must to create the div with class `container` before we have class of rows.

:::
- There are many more `classes` used in this week's Tinker. Where do these classes come from?

:::info
Answer: These classes come from extrenal resouces from bootstrap. These more classes are the structures or layout that pre-designed from bootstrap to help organize the website in a simple and straight forward way.

:::
- 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?

:::info
Answer: When classes being removed, the structure of the image or color that link to it will also be affected. This is because these classes has distinct effect when apply them together in certain heirachy that it required.???

:::
- Analyze the form and refer to https://getbootstrap.com/docs/5.2/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?)

:::info
Answer: The non-class attribute is not important in terms of getting Bootstrap works since when deleted both "id" and "placeholder" , there is no changes or errors in the code. However, delete the "id" may affect the JS in the futre if we have JS code related with this "id".

:::
- If you
ate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?

:::info
Answer:
- 1) If classes are deviate, the cetain formate that bootstrap provided will be disabled for example, if the class change from "bg-danger" to "bg-dang", the whole badges will disapeared.
The image is below:
Before:
After: 
- 2) The formate, display and alignment are managed under the heirarchy. The order of the certain classes such as containers, row and col must be in certain order, otherwise the whole display of element will be shifted. For example:
- if the class`col` is not under the class`row` , it will leads to the formate shifting.

After switch the col out of the row, the cat image is not an inline element anymore, it acts as a block to take out whole row.

:::
- Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
- How does not following the specifications affect the output?

:::info
Answer: Comments out some of the classes used can interfere with functionality, just as if we hadn't used the basic HTML properly to build out the form itself. Layered and stacked classes are more important for bootstrap elements, but just as we only comment out types in the basic HTML version - it removes some of the basic functionality of the form.

:::
- What are the key aspects you need to be paying attention to when learning and implementing these framework features?

:::info
Answer: As a beginner student and especially as a novice coder, it is important to follow the hierarchy and framework of bootstrap in order to make forms and other coding features work properly when implemented.

:::
- What is the best way to learn how to use a new framework feature?

:::info
Answer:
The best way to learn is to always check out the resources from bootstrap and get to know how to copy the correct portion of the code, then insert it to the correct place and implement the code.

:::
- Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?

:::info
Answer: We all agreed that the best way to learn, whether it's programming or any other subject, is to experiment through test and error. For this week's learning, we can apply the new framework in our own projects and customize the rules to see how it works together. Also we can structure the code, add different classes, remove existing classes, rearrange the hierarchy and also see how these elements affect the visual presentation of our project.It's very helpful.

:::

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

:::info
Answer: When I move a `.row` to the outside of a container, the body part from "Analysis of Felis Catus" to "Subscribe to Nyan!" miss the margin.There is no distance between the edge of the browser to the content.

:::
- Move a column outside a row but within a container. What happens?

:::info
Answer: Move a column outside a row within a container will have alignment or display will disorderred The "grumpy cat" picture is an example of moving a column out

:::
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?

:::info
Answer: To have container, then row, and col- last can ensure that each section has the correct visual hierarchy and containment.

:::
- 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?

:::info
Answer: We tried to take the content outside of the columns in the`tr class="table-info"`, the content disappeared in the columns. When we place the content outside the `td``/td`, it will appear like default text without formatting.

:::
- 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`, `xxl` represent in the column `class` notation?

:::info
Answer: We think `col` helps to make a responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.Content is placed in the areas of the screen that contain columns.

In responsive layouts, column width is defined with percentages, rather than fixed values. That's why we have `xs`, `sm`, `md`, `lg`, `xl`, `xxl` in our code, they equal to five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.This allows content to adapt to any screen size.

:::
- 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?

:::info
Answer: The`number` of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes. The `col-12` layout grid uses 12 columns. Column classes indicate the number of columns we’d like to use out of the possible 12 per row.

:::
- 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?

:::info
Answer: Since each grid system uses its CSS framework, the attributes of each `class` should be different and relate to each framework. The similarities we can think about is all of these grid systems are responsive and follow basic responsive web design rules.

:::
- What is a Grid System _convention_ vs. _rule_? Can you give an example?

:::info
Answer: The convention of the grid system can be some code we must follow in order to generate content in certain styles. For example `bg-dark` would give us a black background. If we type as`background-dark`, the system will not be able to understand and generate a black background color. However, the rule is something that can be modified. There is a room to deviate. We can actually overwrite it based on the needs. For example, we can type in CSS to specified the margin rather than follow the Bootstrap's default margin.

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

:::info
Answer: If we remove Bootstrap from my page, we will lose the related CSS Framework and styling. So the columns won't be responsive anymore.

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

:::info
Answer: We can see the class`col-xs-6` in two parts,`xs` means extra small screens (mobile phones, stands for column extra small ≥ 768px), `6` means two equal columns to span a div.

:::
- Visit the following link: [Grid System Explained](https://www.youtube.com/watch?v=Wqu-d_b3K-0)
- What is the advantage of using popular tools like Bootstrap?

:::info
Answer: Because Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites, it supports all major browsers, responsively adapting screen sizes and maintaining consistency among projects. It's a convenient tool for designing prototypes.
It has a very user-friendly design and although it is a new format to learn and incorporate HTML coding, it creates a template that we can build freely. Training on Bootstrap has also helped a lot, and one of the things we appreciate most is the amount of resources available online to help us further our understanding and comprehension of the code. While it's overwhelming, there are various developer communities that are more than willing to help when you post questions online.

:::

- How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
:::info
Answer: The combination of different methods helps the learner better understand through practice. This teaching method creates a constructivism learning environment.

:::

## COMPONENTS

- Browse through the different [COMPONENTS](http://getbootstrap.com/components/) of the Bootstrap Framework and observe **_the pattern_** of how the documentation is presented. Experiment with BUTTONS for a good example: https://getbootstrap.com/docs/5.2/components/button-group/
- When learning to use new components in a framework, what do you think is the best practice on how to learn about the feature?

:::info
Answer: Practice in StckBlitz-- when we're browsing the differnt components in Bootstrap Framework, we can see that each component has a unique StackBlitz page for users to practice. Typying the components for several times as you want is an efficient way to memorize. Not only Bootstrap, many programming website like W3 has the practice page for users to recite their impressions for different features.

:::

- In my table, I have "Extremely Deadly" as a label of sorts, that is bright red which is defined by the `.bg-danger` class. OVERRIDE this rule in your custom CSS pane to make `.bg-danger` a `pink` color using the following value: `pink !important`
- Try removing the `!important` and what happens? Why?

:::info
Answer: Adjusting the color of the `bg-danger` class to become pink can be done by changing the lable class in the CSS page. It will immediately overrides other `.danger`\ class.
However, by adding this code, this will be applied to all `.label-danger` throughout the page. The color of the "very deadly" label may disappear, creating errors in the color areas of other forms.

:::
- What affect might this have on other parts of my page?
:::info
Answer: When I use `!importantis` rule, it will override all previous styling rules for that specific property on that element.

:::