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

# TINKER: Bootstrap 5.x (Group 2)
Group Members: Bayan, Yu-Hsuan, Xinyi, Nancye, Danqing

Our CodePen fork: https://codepen.io/nwb2111/collab/NWMBWvv

:::success
**RECOMMENDED STUDY**

To get the most of Bootstrap:

- Align your studies with FCC: Front End Libraries > Bootstrap unit
- Read the Bootstrap documentation on Grids carefully: https://getbootstrap.com/docs/5.2/layout/grid/ --- They work in conjunction with `containers > rows > columns`

- [Containers](https://getbootstrap.com/docs/5.2/layout/containers/)
- [Grid](https://getbootstrap.com/docs/5.2/layout/grid/)
- [Columns](https://getbootstrap.com/docs/5.2/layout/columns/)
- Browse through the https://getbootstrap.com/docs/5.2/content page (i.e. typography, code, images, tables, figures) to be aware of the `classes` available to you to do certain stylistic things.
- Browse through the https://getbootstrap.com/docs/5.2/components page to be aware of the _components_ available to you through Bootstrap and a gist of how `classes` are used to create these components.
:::

## Tinker Tasks

- Like we did with the prior Tinker, fork the codepen to play with it.
- **COMPARE AND CONTRAST** this Tinker (which uses Bootstrap) with [last week's codepen] (https://codepen.io/jmk2142/pen/dVMRRq).
- Use the guiding prompts and questions to **manipulate** the code **one thing at a time** and _see_ what happens.
- **Articulate** your understanding and share your findings and insights with your weekly group and/or the class.

### 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?
> [color=gold]The styles changed and all the colors, grid, outlines are gone.
- 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?
> [color=gold]A CSS stylesheet with all of the style rules already coded in. The rules make it easier for users to implement in their website quickly and easily.
- I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
> [color=gold]The spacing changes. The margins between different components is gone. But the styles given by Bootstrap are not influenced.
- What is the relation between my CSS and the External Resource?
> [color=gold] The program starts with the bootstrap, then the CSS rules in the Codepen override the bootstrap rules. In this case, the listed margin, padding, and background colors in the Codepen CSS rules are more dominant, so these are the ones that show up on the webpage.
- How does my CSS "intersect" with the External Resource?
> [color=gold] They work together, but if the programmer wants more specific styles than the bootstrap, then they can write their own CSS rules. This allows the programmer to make it more personalized than just using the standard bootstrap rules.
- What do you think is the sequence of how the External Resource and my CSS are loaded?
> [color=gold] The Bootstrap code is loading first, then the Codepen code is loading second to override it.
- What kinds of things could happen, if I am careless with my own CSS rules?
> [color=gold] If you made too many or the wrong kinds of changes to critical classes or parameters, it could "break" the way the bootstrap components are supposed to work or show up, especially the responsive features across devices. This would make implementing bootstrap useless. Also, if we mess up some Bootstrap rules, other Bootstrap rules that rely on those rules might be messed up.
- 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?
> [color=gold]If we don't like a particular Bootstrap rule, then we can write our own CSS rule and it will override the Bootstrap rule.
- Compare this Tinker's custom CSS vs. last week's CSS.
> [color=gold]Last week's CSS was more complicated and had more specifications than this week's.
- 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?
> [color=gold]Last week, we had to add the font-family, font styling, font size, text decoration, font weight, borders, a lot more details for margins and padding, widths and heights, borders, and the colors and background colors for div, span, headers, etc.
- What then is the _advantage_ of using a framework like Bootstrap?
> [color=gold]We don't have to write every single parameter, style and detail. HUGE time-saver.
- What are some _disadvantages_ of using a framework like Bootstrap?
> [color=gold]If we don't want to use what Bootstrap prescribes, then we have to edit each of them to make it our own.
- Compare the HTML from this week's Tinker vs. last week's Tinker HTML.
> [color=gold]This week, each of the divs have specific classes. It must be in a certain hierarchy. Last week, some divs had classes, some did not. There is not much difference otherwise. The content and the tags/elements look very similar.
- I use a class called `.container` in both. Is this a special `class`? Are they the same thing?
> [color=gold]They are not the same thing. When using bootstrap,`.container` is a set of previously defined properties, whereas when not using bootstrap, `.container` is a self-defined class with customized properties.
- There are many more `classes` used in this week's Tinker. Where do these classes come from?
> [color=gold]These classes have pre-defined CSS styling in the bootstrap document.
- 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?
> [color=gold]Certain classes in bootstrap can be used only with certain elements, for instance `.img-thumbnail` classes can only be used with `img` elements. We assume it is due to the different property requirements of different elements.
- 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?)
>[color=gold]At first glance, omitting attributes such as `id` and `placeholder` in horizontal and inline forms doesn't affect bootstrap properties in terms of visual appearance and functions (except that removing `placeholder` removes the placeholder text). However, because the `id` attribute links the label and input together in the form, this link has disappeared upon deletion of the `id` attribute. Nevertheless, we assume deleting these attributes does not affect bootstrap functions. However in other cases, some bootstrap-defined classes need specific circumstances (defined by other attributes) in order to have the anticipated effect. For example, `.form-check-input` not only allows checkboxes to be aligned a certain way, it also styles the checkbox (size, rounded corners, etc.), but if we delete `type="checkbox"` from the same `input` element, then the styling of the checkbox will not work.
- If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
>[color=gold]When changing classes and heirarchy the relationship of parent child would change as well. by default the commands would also get effected. Also the order of the items such as elements would also change accordingly. Bootstrap requires a specific heirarchy with the container, then sets of rows with nested columns.
- Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
- How does not following the specifications affect the output?
>[color=gold] The first noticeable thing that changes when excluding certain classes is the style and the look of the form as such the spaces between lines-columns shortened.
- What are the key aspects you need to be paying attention to when learning and implementing these framework features?
>[color=gold] We need to pay attention to the classes function as to what they serve when added. As well as, the order and hierarchy of the classes that would determine its function and role.
- What is the best way to learn how to use a new framework feature?
>[color=gold] To practice it and to try out new things and to see how it would react. Learning by doing is one of the best methods to master new skilles.
- Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?
>[color=gold]learning this new framwork would diffidently help with creating and designing new elments in the CSS part. Not to mention it would make it easier and more simple than adding design and styling selectors with CSS.

### 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?
> [color=gold] We moved `class="row"` above `.container`. The left and right margins of the following texts became zero.
- Move a column outside a row but within a container. What happens?
> [color=gold] We moved ``<div class="col-12">`` outside of a row but within a container. The top margin of "Introduction to Purrr" became zero.
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
> [color=gold] Since "container, row, col-__ " have already assigned different styles in terms of paddings, margins, borders, etc.., moving them will cause their respective styles to influence each other, thus failing to reach the assumed visual display such as margins. The `container` here functions like a grid table, `row` and `col-__` will help decide the number of rows and columns in the grid.
- 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?
> [color=gold] If the content falls outside of the container, it will lose the styles of margins constrained by `col-` and `row`; If the content falls outside of the `col-` but inside of the container and `row`, the top margin gets lost; If the content falls outside of `col-` and `row`, but inside the contianer, nothing gets changed.

- 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?
> [color=gold] They represent the size of the column. To be more specific, xs means extra small, sm means small, md means medium, lg means large, xl means extra large, xxl means extra extra large. It also relates to the size of the screen. Small is often used on mobile phones, medium is on a laptop, and lg can be used on desktop for convenience.
- 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?
> [color=gold] It is a number specifying how many columns wide the element should be. The Bootstrap columns run a 12-grid system. For example, col-12 can nearly take up the whole screen and col-3 can take up 3/12 (which is 1/4) of the screen.
- 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?
>[color=gold]They all are structured with containers, rows, and columns, with the columns nested under rows and both columns and rows nested under containers. However the preset number of columns in each row differ from system to system. All are designed to be responsive to screen size.
- What is a Grid System _convention_ vs. _rule_? Can you give an example?
>[color=gold]Rules are how the syntax is defined and must be followed in order for the code to work properly, whereas conventions are just habits that coders share to better communicate (conventions do not affect the way that computers read code). For example, a rule would be "rows have to wrap around columns", and a convention would be "indent to show hierarchy."
- What would happen to my columns if I remove Bootstrap from my page?
>[color=gold]If Bootstrap is removed from the page, the classes defined in Bootstrap will no longer have styling properties, therefore column width properties will be lost.
- Is the class, `col-xs-6` for example, really that special?
>[color=gold]First of all, `.col` represents the same meaning as `.col-xs`, therefore making it redundant in meaning to include `-xs`. Second of all, the value of `-6` depends on the number of columns in the row. If there are only 2 columns, and one takes up 6 out of 12 template columns, then they must have equal widths and assigning `.col` as the class for both columns would suffice in this scenario. However, if there are 3 or more columns, then having `-6` would be crucial to defining the widths of the columns.
- 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?
>[color=gold]First, the use of such well-known tools can help teamwork users to establish a set of programming specifications and reduce communication costs. Second, responsive layout design allows the website to be compatible with different devices. These benefits make the Web development process more efficient.
:::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?
>[color=gold]The combination helps learners define the accurate name and code structures through repeated modifying.

## 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?
>[color=gold]We can try to use them in codepen as much as we can and apply them to our HTML to achieve different effects. We can also override the class with custom CSS styles and see the change in style and feature.
- 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?
>[color=gold]The color of button turned back to red.Because `!important` rule in CSS is used to add more importance to a value. If we use it, it will override previous styling rules.
- What affect might this have on other parts of my page?
>[color=gold]If we use another `bg-danger` class, the color would be pink.
- Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen.
>[color=gold]We added and played with the radio and range form components, as well as card and accordion components to the end of our Tinker fork.

- Share with your group what you found about the experience of learning to use new features and what your takeaway was.
>[color=gold]Bootstrap makes it easy to know the formatting, elements, and tags needed for new components. The blocks of code are then customizable with other Bootstrap classes so that the new components can be arranged and formatted to match the rest of the webpage. We will need more practice to learn more of the components and options, as well as what variables and customizations are built-in for different components.

## JAVASCRIPT

:::info
Some components, mostly those that will react to user interaction are driven by Javascript. We aren't quite there yet. You are free to play with these features, but for the group conversation try to focus on the non-programmatic features.
:::

## NOTES

I'm hoping that this week's tinker will help you implement your design ideas for the project due at the end of the week. The purpose is to 1) provide you with a set of concepts that build on your prior experiences to deepen your understanding and 2) provide you with a practical set of tools that will reduce the development time of your project dramatically.

I recommend that during your discussion, you also address your design ideas for this week's project which I have outlined in the Project Specifications. You can use that as a guide to talk about the important learning design concepts you are considering.

Looking forward to seeing what you come up with. :smile_cat: