---
tags: mstu5003, tinker, html, css, bootstrap
---
# TINKER: Bootstrap 5.x.2
by Madeline Maeloa, Tiara Sawyer, Jiayu Li, Lexuan Li

**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?
* Everything on the page went back to default, including the font size, font family, and style of images. Everything is also flushed left. For example, the table gets removed and all the words in the table are flushed to the left of the screen. The formatting of the size of the images of cats and size of words are also no longer styled. Bootstrap has preset CSS frameworks, so when we remove it, everything goes back to default.

* 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 front-end CSS framework that makes web development easier by helping us create responsive websites. It consists of HTML, CSS, and Javascript design templates aimed for mobile-first front-end web development. It works by using a grid system, and has a bunch of reusable and versatile pieces of code. We just need to insert the code and pay attention to classes and their names as well as parent-child relationships to easily create our own content, forms, and components.

* I have a few CSS rules in the CSS pane. Comment them out.
* What happens to the page and why?
* Everything on the page seems to become more squished together. The padding and margin no longer exists, and the header went up. The background color of the header changed from grey to white as well. The CSS rules that were commented out provided top margins for the body and html, and margins for h1, h2, and h3. There is also margin for the footer.

* What is the relation between my CSS and the External Resource?
* The CSS that is written in the CSS pane adds to the external resource. For example, some styling and formatting is done through bootstrap and using built-in classes (like `card-title`), but margins are added in the CSS pane to make it look even better and more aesthetically pleasing. In other words, the external resource did most of the work and the CSS serves as adjustment or supplement.

* How does my CSS "intersect" with the External Resource?
* The CSS "intersects" with the external resouce by sometimes refrencing the classes from the external resource. For example, `div.nyan-row` was refrencing the `nyan-row` class from the external resource. The reason for doing this is that we can target specific parts of the page and style specific things we want to. In this case, it was to add a bottom margin to the bottom of the nyan cat video. The CSS rules override the Bootstrap default settings. Bootstrap provides existing styling rules then we manually add CSS rules to change some default settings.

* What do you think is the sequence of how the External Resource and my CSS are loaded?
* We think that Bootstrap loads first, then CSS. We think that Bootstrap's CSS might be more specific than the CSS we write, so it might get overrided if we don't write specific enough CSS rules.

* What kinds of things could happen, if I am careless with my own CSS rules?
* First, the CSS we write may not do anything if we are careless with our own CSS rules. For example, we have to make sure to reference the exact classes with the exact words and spelling otherwise it would not do anything. We could also defeat the purpose of using Bootstrap by making our CSS rules too specific. Furthermore, the Codepen would only show the Bootstrap default styles. Error could also occur and can be difficult to debug. Lastly, the order of how we structure our CSS rules is also crucial and we must follow them carefully. For instance, if there is a rule from the same style sheet with the same specific level, the rule that is selected last in the CSS document will be the one that is applied.

* 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?
* No we are not stuck with all of Bootstrap's rules. If we don't like a certain rule or style, we can alter it ourselves by either writing our own CSS for that specific item or thing, or we can alter it by adding margins or paddings to it for example.

* 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?
* In last week's tinker, you had to manually style the font size for the headings, add in the hover, active, and visited states for the linked text, and also write your own rules for the table design. In the table, a class called `danger` was used to make the buttons red.

* What then is the _advantage_ of using a framework like Bootstrap?
* The advantage of using frameworks like Bootstrap is that it reduces the amount of code that we have to write in order to style our content and create responsive websites. By using their built-in classes, we can easily create "danger" buttons or tables quickly. It allows designers to use ready-made templates for an efficent and faster front-web development.

* What are some _disadvantages_ of using a framework like Bootstrap?
* There is a type of standard to the why everything sort of looks, so we would have to go the extra mile when creating a design otherwise all our websites would look the same. It just requires more customization on our part. In other words, Bootstrap can feel restrictive to developers because of the ready-made settings and rules. Furthermore, many can become too reliant on the templates which can lead to many websites looking the same without customization.

* 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?
* The `container` class is not the same thing in both tinkers. In this weeks, it is required when using Bootstrap's default grid system. Containers are used to contain, pad, and sometimes center content within them. It also sets a `max-width` for us. In last week's tinker, the `container` class was not mandatory and could have been named to be anything. It was mainly used so that we can reference it in our CSS to change its margin and max-width, which we had to do manually. However, this was done for us automatically in bootstrap within the `container` class.

* There are many more `classes` used in this week's Tinker. Where do these classes come from?
* These are all bootstrap clases. Bootstrap has a list of pre-defined classes that make it easy for us to do layout options quickly. Some Bootstrap classes include `accordian`, `button`, and `card`.

* 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?
* Removing the classes modifies how the elements are visually displayed on the page because the classes rely on the preset rules and framework of the bootstrap. For examplem removing the `danger` class removes the styling for the word. The button disappears and the red color around the text also disappears.

* 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?)
* We don't think so. They don't affect Bootstap style but affect the display and input nature of the elements.

* If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?
* If we deviate from the classes used, Bootstrap will not work as intended, or at all. There is a certain hierarchy that we have to follow too, like having `row` an `col` classes nested within `container` classes. Without this, the framework will not work and we will not be able to utilize it at all.For instance, if `class="column"` is moved outside `class="row"`, the original grid layout is broken

* Manipulate the form to "exclude" certain classes as prescribed by the Bootstrap guide and examples.
* How does not following the specifications affect the output?
* Not following the specifications yields no output. For example, not using the `bg-danger` class and instead using `danger` not only removes the word from the screen but also its styling (color and button style). Bootstrap classes have to be followed exactly.

* What are the key aspects you need to be paying attention to when learning and implementing these framework features?
* We would need to pay attention to how it works (for example, Bootstrap works in a grid-like system) and what classes or rules we need to follow. Looking at the documentation for it would help as we can see all the classes and frameworks available to us and their descriptions. This would also help us understand what rules we have to follow. For example, knowing that we have to always start with a `container` class then have our `row` class in that `container` class would help us write functioning code. Also knowing that Bootstrap requires a HTML 5 doctype, using the correct <meta> tags for proper rendering for mobile devices, and using container classes to wrap site content. Once you get familiar with the foundational structure and features, one can continue to learn more complex frameworks.

* What is the best way to learn how to use a new framework feature?
* The best way to learn is to first, familiarize yourself with how the framework functions such as the grid system they use to lay out content, and certain terms such as columns and containers and what they entail. Then, as you get more familliar with the structure and features of the framework, developers can build upon this knowledge through trial and error just as we did in Tinker assignments where we would examine what would happen when we remove, modify, and rearrange certain elements. We think that Googling short videos and articles can also help us.

* Think about your experience building a page from scratch last week.
* What is your attitude on using, learning new frameworks like this?
* We would approach learning new frameworks with an open mind because on one hand they can be very helpful to us, but on the other hand it can be very restrictive sometimes (all our danger buttons can look the same). This means that we can utilize them for convenience but should not depend on them completely. And although it can be daunting at first, we believe learning new frameworks is always useful to discover what the best and most efficient way to build a website is for you. However, for beginner coders, it may be difficult as we still need to expand our knowledege of HTML and 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?
* Moving `.row` outside of the container caused the contents on the website to be misaligned.
* Move a column outside a row but within a container. What happens?
* The content also misaligned. For example, when moving the Grumpy Cat picture out of its parent `<div>`, it took up the full page when we moved the column outside a row but within a container.

* What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
* The container is the parent of `row` and `row` is the parent of `col`. It is important to get the sequence right so they will display as we want. If we don't, Bootstrap would not even work as intended or at all.

* 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?
* When content falls out of the columns, it loses its visual property (margin, padding, etc.) prescribed by the Bootstrap. For example, it would end up being flushed all the way to the left instead of being contained within a certain row or column.

* 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?
* These are the six default grid tiers in Bootstrap’s grid system that help elements adapt across six default breakpoints and all customized breakpoints you create.
* 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?
* The number represents the width of the content and is based on the column layout. For example, if you have 4 after `col-`, that means that your conent will take up 4 columns out of the 12 across 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?
* Similarities: both systems use a column and row format.
* Differences: the basic layout setting is different. For instance, the UI grid system has 16 columns and Bootstrap has 12 columns. Besides, the display setting of the elements inside the column is also different, materializecss uses offset and put-and-pull to set the margin

* What is a Grid System _convention_ vs. _rule_? Can you give an example?
* We think that the convention refers to the hierachy of the grid elements, while the rule refers to the specific setting of individual elements. For example, the lenghth of each column and having the number after the `col` class would be a rule (`col-4)`.

* What would happen to my columns if I remove Bootstrap from my page?
* Removing Bootstrap from the page reverts everything back to the default styling. We would have to manually write CSS rules in the CSS pane to try to recreate the columns that we had with Bootstrap.

* Is the class, `col-xs-6` for example, really that special?
* Yes, because it defines the screen size the class should apply to. It also specifies how many columns the information in the class should take up.

* 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?
* The prebuilt grid systems and template designs allow for an easy, efficient, and flexible way to build user-friendly and responsive webpages. It also minimizes the amount of code that we have to write in order to style specific elements like tables, buttons, and even accordians.

:::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?
* Learners can search templates that match their needs, and think about how they function, which helps them apply codes more efficiently and understand the code logic more thoroughly. We can also see how each thing on the page interacts with each other through the code and the way that they are written (where they are placed, the parent-child interactions, etc).

## 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?
* We think the best practice would be learning by doing and learning from examples. Also, we can go through the style sheet and determine certain patterns and sequences between features. For instance, relating to the purpose of our Tinker assignments, experimenting by removing or modifying various elements, we are able to examine and learn the basic hiearchy and structure of the frameworks.

* 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?
* The button turned back to the `bg-danger` visual setting of the Bootstrap version. The `!important` rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the `!important` rule, it will override ALL previous styling rules for that specific property on that element. This means that CSS rules have to be more specific than Bootstrap's in order to override their styling. If it is not, like when we removed the `!important` rule, Bootstrap overrides the CSS we typed out.
* What affect might this have on other parts of my page?
* We see no effect on other parts of the page.

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

When it comes to UX/UI design, there are certain elements that the users are familiar with and we should comply with conventions to make it more user-friendly, which adhering to Bootstrap features is an easy way to do it. However, CSS can help us achieve more specific and creative effects.

Jiayu: Understanding the fundamentals of Bootstrap such as the framework, structure, and the syntax makes designing process more efficient and fluent. You can make a webpage more interactive and informative. After having a basic ideas, it becomes easier to understand and utilize other features.

Tiara: Exploring different elements was enjoyable and novel but it also displayed how the features within Bootstrap are truly meant to be a foundational framework that we can build on. For instance, the toggable menus, including the dropdown menu provided us with a glimpse of how Bootstrap provides users with starting interactive features and how their default design features are intended to be used such as making users click the element rather than hover to display the menu. This becomes a starting step for those who would like to add more interactive features such as the hovering option to see the dropdown menu which would have to be further customized through CSS or Javascript.

Madeline: It's important to understand the rules that allow us to write code that works. Without understanding how the classes interact, like how the `row` class has to be nested within a `container` class, we would not be able to use any of the other components. It was relatively easy too, because all I had to do was copy and paste the code and change it a little to fit what I wanted it to do or look like.

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