# TINKER tasks: Bootstrap 5.x
Group members: Tiffany Zhu, Andrea Chen, Sadia Ahmed, Yichen An
---
**See demonstration: https://codepen.io/jmk2142/pen/yLXdqbd**
<!-- (Old version 4.x): https://codepen.io/jmk2142/pen/EwKXbo -->
[codepen External Bootstrap CSS URL](https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css)
## Tinker Tasks
### 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?
**** *After*****
*** *Before****
***The overall format changed, because Bootstrap provides design templates for typography, forms, buttons, navigation, and other interface components. When deleted, the codes do not work anymore.***
- You can add the resource back: https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
- Enter the above resource directly into your browser URL input to go to the page and scan through the resource.
- What is Bootstrap really?
***Bootstrap is a giant collection of codes written in HTML, CSS, and JavaScript.***
- I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
***Margin disapppered(?) and the rules in CSS don't apply to the page anymore.***
- What is the relation between my CSS and the External Resource?
***The rules in CSS and the External Resource intersect each other.***
- How does my CSS "intersect" with the External Resource?
***The rules in CSS and the External Resource can exist or can be applied at the same time.***
- What do you think is the sequence of how the External Resource and my CSS are loaded?
***The rules from the External Resource are loaded first, then the rules in CSS cause changes/effects on what is already here.***
- What kinds of things could happen, if I am careless with my own CSS rules?
***Our own CSS rules will not work, instead it will follow the general CSS rules(?)***
- 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?
***We can adjust the page by adding our own CSS rules. For example, the page looks more organized after applying the CSS rules provided.***
- 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?
***1.the design for "dangerous" button - now we can use bg-danger/warning/success, and it automatically gives the buttons a different color.
2.For all the "container" properties in the last tinker, now we do not need to write exactly numbers of width (or padding), instead, we can use class="col-number" to describe the position of the element.***
- What then is the _advantage_ of using a framework like Bootstrap?
***Bootstrap is a shortcut that saves us a lot of time from CSS design. The obverall programing process will be faster. It is also easy to prevent repetitions among multiple projects.***
- What are some _disadvantages_ of using a framework like Bootstrap?
***Sometimes it restricts our design, so for unique design we need to pounder harder.
Also, we can rely on the shortcuts a lot and we are "lazy" to add the specific styling rules in CSS.***
- 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?
***In this week's tinker, the "container" class is a default grid system in Bootstrap. Containers are used to contain, pad, and sometimes center the content within them.***
- There are many more `classes` used in this week's Tinker. Where do these classes come from?
***The classes are Bootstrap content containers.***
- 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.
***For example, `img-thumbnail`is used to put an image to a thumbnail (borders), once we deleted it, the photo becomes very large on the screen.
`info` adds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a neutral informative change or action***
- How do these kinds of `classes` relate and rely on the bigger structure and `class` rules of a framework?
***Classes are structured in a hierarchy system. The class 'container' is the biggest structure and followed by class 'row' and 'col'.***
- 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`.
***I was confused at first when I tried to change the class for "label", it didn't change into a horizontal form, but when I changed the class in "input", it did. Then I realized I should use ".col-form-label" (I forgot the "." last time.***
- Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)
***No they are not. When I edit or delete non-class attributes like "strong", the bootstrap isn't affected.***
- If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
***You just can't get the result you want.***
- Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
***changing "col-X"***
- How does not following the specifications affect the output?
***The rules don't apply to the certain classes.***
- What are the key aspects you need to be paying attention to when learning and implementing these framework features?
***We should pay attention to what the original framework features look like and implement them by changing the attributes or class names to make it our desired look.***
- What is the best way to learn how to use a new framework feature?
***Tinker and try by ourselves. I believe in constructionism and the process of learning programing language is about tryout different possibilities.***
- Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?
***It is a great way to save time and use the provided layouts for the foundation to build upon and adjust according to the needs of our projects.***
### GRID SYSTEM
```htmlmixed=
<div class="container">
<div class="row">
<div class="col-__">
<!-- CONTENT -->
</div>
</div>
</div>
```
- FIND the above pattern(s) within the HTML.
Original:
- Move a `.row` to the outside of a container. What happens?
***The grey area becomes larger than the screen area.***
- Move a column outside a row but within a container. What happens?
***The grey area becomes smaller than the container.***
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
***It can make the format align and correct.***
- 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.
***Moving the content outside of the columns effected the alignment of the images and text.***
- What happens when content falls outside of the columns?
***It appears on different parts of the page, not in alignment with the image that it is connected to. It also affected the size of the images.***
- 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?
***They represent the grid system and are used to adapt to the various screen sizes: Extra small, Small, Medium, Large, Extra Large.***
- 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?
***It specifies the number of columns on the page.***
- 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?
***All of these grid systems can have up to 12 columns. Grid systems divide each column by an equal width. The last grid system in getskeleton.com can have the columns with a different width (small grids combined into one bigger grids).***
- What is a Grid System _convention_ vs. _rule_? Can you give an example?
***The grid system rule is that container must be first, with rows within and columns following rows.***
- What would happen to my columns if I remove Bootstrap from my page?
***The columns are removed and the style of the content changes, the options are listed in only one default column***
- Is the class, `col-xs-6` for example, really that special?
***We think the class="" is very special. Bootstrap rules follow the thing we put in the class property.***
- 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?
***It saves time by providing the basic framework to use and the user can adjust it to their own project needs. It also prevents errors by providing the foundation. Additionally, it gives us responsive code that can be used to adapt to different screen sizes.***
:::success
**Did you know?** As a student, you have access to the full Lynda.com / LinkedInLearning library. These are fantastic resources if you want to actually see the details of specific feature implementation.
Thing with these tutorials is that they tend to explain _how to do_ specific things, but don't quite address the issue of deeper understanding to explicitly address how concepts relate and tie together. That said, used in _conjunction_ with activities like the Tinkers, can be a very powerful combo.
To access Lynda.com:
- Log IN with your student account
- https://www.linkedin.com/learning
- See the Bootstrap Essentials VIDEO Tutorial
- https://www.linkedin.com/learning/bootstrap-5-essential-training
:::
- How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
***By manipulating the code, students can understand cause and effect of different actions. They can also learn which actions cause specific issues or errors and how to correct them.***
Sign in with Wallet
Connect another wallet