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

# TINKER: Bootstrap 5.x

---
Group members: Suan Kang, Yifei Jiang, Yuchen Wang, Thao Vu

**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)

After our run with basic HTML/CSS and trying to produce our websites, many of you have probably noticed that it's actually quite a chore to get your pages and parts of to align correctly using `margins` and `padding`, different `width and height units` like `px` and `%`. Actually, there are even more: `em rem vh vw` etc. To make matters even more difficult, I think you all have probably experienced how the representations of your visual layouts and definitions of dimensions is highly impacted by the hierarchy of your elements and what rules are set on the parents and grandparents of a particular thing.

The nice thing is: **there are solutions to this.**

## Responsive Design and Bootstrap

This week is mostly about continuing to practice the basic `html/css` we've learned last week in preparation for having some content and interactive user interfaces that we can use to make Javascript more interesting.

Thus, I wanted this week's tinker problem to be around something called Bootstrap - which is simply a `CSS` file that two people at Twitter created so that you don't have create all those intricate rules yourself.

Bootstrap provides a bunch of pre-defined helper classes that do things for the [LAYOUT](https://getbootstrap.com/docs/5.2/layout) Things like:

- Set margins and paddings for you and provide a simple, predictable, yet flexible way to layout content at the page level, (see [Grid System](https://getbootstrap.com/docs/5.2/layout/grid/).)
- Set rules that will automatically make your page change it's layout depending on what kind of screen is being used to view it. (e.g. 3 columns on a big screen but only 1 and content stacked in order if on mobile.)
- Provide basic pretty styles to your typography and interfaces.
- Provide ways to create components, which are groups of different elements to make a more sophisticated larger thing.
- Provide more advanced javascript driven interactive interfaces and features.

Bootstrap isn't the only option here. There are many different kinds of 3rd party libraries which we call HTML/CSS Frameworks. Examples:

- https://getbootstrap.com/
- http://materializecss.com/
- https://getmdl.io/components/index.html
- https://semantic-ui.com/usage/layout.html

Bootstrap traditionally was one of the more popular ones as it's pretty easy to pick up and made significant contributions to this space. I will support Bootstrap in this class but if you learn to use Bootstrap, the basics concepts apply to other frameworks. You just need to learn the framework specific `classes`.

Like mentioned, they generally share common features. The basic thing to keep in mind with these frameworks is:

- Use the provided **GRID SYSTEM**.
- The results are driven by the correct use of the framework provided `classes`.
- In using their `classes`, you are agreeing to their _opinions_ about how to use the classes.
- This means, `classes` tend to have distinct effects based on how they are used *together* and the *hierarchy* in which they are used.
- Thus, you MUST follow their specifications exactly.

:::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?
>Image, font, margin and padding settings for the elements of the page are removed.
>Bootstrap serves as a style reference with built-in stylized features. Once Bootstrap is removed, there is no reference to retrieve style attributes.
- 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?
>A source of CSS rules that load into your code.
I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
>The CSS settings for html, body, h1, h2, h3, div.nyan-row:not, footer and .cat-jumbo are removed
- What is the relation between my CSS and the External Resource?
>My CSS allows further customization of features.
- How does my CSS "intersect" with the External Resource?
>It's a supplement for external resource. An external resource is the base, but still we can make some changes in CSS rules.
- What do you think is the sequence of how the External Resource and my CSS are loaded?
>The computer will read through the External Source first and apply the rules first before the CSS.
- What kinds of things could happen, if I am careless with my own CSS rules?
> - It doesn't work. Or it would function on wrong elements and division in html.
> - It may also overrode Bootstrap rules and cause conflicts in styling.
- 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?
> Boostrap rules can still be overridden for customization purposes.
> We can customize new CSS rules to overwrite the rules in Bootstrap.
- 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?
> - We use CSS rules to manipulate elements last week. This week to achieve the similar result we can turn to the Bootstrap.
- What then is the _advantage_ of using a framework like Bootstrap?
> It is quick and convenient. The built-in rules also allows for responsive design by default (while if we use CSS, we will have to add many different rules e.g: media queries to make it responsive to different screen sizes.)
- What are some _disadvantages_ of using a framework like Bootstrap?
>It is just a big template. We also need to use My CSS to set more details.
> There can be conflict between the new CSS rules and the Bootstrap rules.
- 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?
> It is not a special "class" since ".container" in both is used for controlling the layout of the webpage。
> They are not the same thing. ".container" in last week's Tinker serve as a box to wrap the ".pageheader" and the ".container-top" and center them. ".container" in this week's Tinker aligns ".row" and ".col" underneath vertically.

- There are many more `classes` used in this week's Tinker. Where do these classes come from?
> They come from Bootstrap.
- 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?
> These classes basically rely on the bigger structure: "container-row-column". Under a container, there are rows horizontally and column which under the row vertically. For instance, if I move imf-thumbnail from the original place (under a column) and put it under the row (within the same container), the img takes up the whole row without the limit of columns.
- 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?)
> It may not prevent Bootstrap from working but it is also very important. For example, "id" avoids the repitition in value, "placeholder" gives the hints when inputing. I put the example code in Codepen and manipulate it to see what happened. When we remove them, it still can work.
- If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
> The output (the form) will changed.
> (1) when we changed the td elements into p, which we usually use in html, the text is outside of the form.
> (2)For instance, we moved "info" and put it under the text "small", it turns out that

- Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
- How does not following the specifications affect the output?
> E.g. When we remove the div class="col-8 offset-2", the size of the form changed. When we exclude "table class="table table-bordered", the form with border disappeared.
- What are the key aspects you need to be paying attention to when learning and implementing these framework features?
> Following the specifications carefully, especially certain classes, or it may lead to mistakes.
- What is the best way to learn how to use a new framework feature?
> Try to practice more and get familiar with its functions and rules. Be careful when referring to it.
- Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?
> It is convenient and effective to use frameworks like this. But there can be some conflicts sometimes between HMTL CSS rules and Bootstrap rules.

### 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?
>The title box (including "Meow meow meow meow", "I like chicken, I like liver, Meow Mix Meow Mix does deliver.", "Delish!", and all background) has moved to the left altogether.
>The indentation of the content (in this case, the heading title and the paragraphs of Introduction to Purrr) has changed. The padding of the left and right side of the content has been removed.
- Move a column outside a row but within a container. What happens?
>The left and right side of the background color (gray) of the title box has been reduced.
>The gap between the upper title box and the lower introduction container has been removed.
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
>`container` is parent of `row`, and `row` is parent of `col-__`. Only if they appear in the right order can they appear in the format and layout we want.
- 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?
>For example:
>When I moved h1 between row and container or between row and col-, "Delish!" and "Meow meow meow meow" moved to the top of title box.
>When I moved h1 outside the container, "Delish!" and "Meow meow meow meow" moved to the top of title box and left.
- 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?
>Represents the width of the column. We can change the width of the column through these.
- 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?
>Because each div is divided into 12 colums, so `number` means width=number/12. For example, `col-3` means width=3/12.
- 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?
>Similarities: they all divided a row into many columns.
>Differences: some have 12 columns while some have 16 columns. And they have different syntaxes.
- What is a Grid System _convention_ vs. _rule_? Can you give an example?
>Rule: All columns in a grid need its number to specify their width as proportion of the total available row width.
>Convention: The numbers in column usually add up to 12 for each row.
- What would happen to my columns if I remove Bootstrap from my page?
>We cannot have Grid System. All settings of Grid System will be deleted.
- Is the class, `col-xs-6` for example, really that special?
- 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?
>Obviously, Bootstrap can improve our efficiency. It allows us to lay it out ahead so we don't have to format it in CSS. It also lets us use the Grid System. It allows us to set up a clear layout faster.
:::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?
>For me, initial observation and simple manipulation help me build initial interest and awareness. And thinking and applying code can help me really learn, use and master the code.

## 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.1/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?
>It is useful to tinker with the components. Using codepen to test and see how components work on the web environment helps you visualize the application and hence, remember the components better.
>It is also important to notice how the web you commonly browse through apply the features and learn from examples. For example, one can see components like carousel and cards on TC website.
>Since the list of component is long, we should prioritize the most commonly used components such as buttons, cards or navbar
-
n 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?
>The badge background returns to the color red. CSS rules in the stylesheet do not override default Bootstrap rules, unless it is followed by !important`.
- What affect might this have on other parts of my page?
>CSS rules in the stylesheet do not automatically override default Bootstrap rules for pre-defined classes like btn-danger, btn-info. If you want to override any default properties in Bootstrap you have to make the properties as important
- Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen.
- Share with your group what you found about the experience of learning to use new features and what your takeaway was.
>We find Bootstrap very useful. Bootstrap allows you to stylize the format of the features faster and more efficiently. It took much less time and efforts to build the features like the navigation bar or buttons. We were able to add "fun" elements like carousels or dropdowns as well.
>However, it takes some time to get used to the shorthands to adjust the styling, especially with margin and padding.

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