# Tinker:Bootstrap

- 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
The vast majority of the styling information for this site is stored in the automatic boostrap settings, so removing them essentially returns the page to an unstyled state. A lot of images get too large, the font reverts to Times New Roman, etc.
:::

You can add the resource back: [https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css](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?

:::info
Bootstrap is a collection of presets that automatically adjust padding, margin etc. when applied so that the user does not have to set each value manually as we were doing before. In the code you can see html that references "padding", "font", "border", "radius", etc.
:::

- I have a few CSS rules in the CSS pane. Comment them out.
- What happens to the page and why?
- What is the relation between my CSS and the External Resource?
- How does my CSS “intersect” with the External Resource?
- What do you think is the sequence of how the External Resource and my CSS are loaded?
- What kinds of things could happen, if I am careless with my own 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?

:::info
When you comment out the CSS rules the page reverts to bootstrap-only formatting, so it doesn't lose all of its styling, only the styling that the person did manually.

My CSS seems to override the bootstrap CSS (though we couldn't get the background-color of our badges to change). To answer the following question, this is probably because bootstrap was loaded before my CSS styling.

If I'm careless with my own CSS rules, for example, if I create a class that already exists, they could mess with my bootstrap and give me an unexpected result.

You can override bootstrap's rules. In this case we managed to override them by virtue of adding CSS classes after the bootstrap was pre-loaded, but you can also override them using "!important"

:::

- 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?
- What then is the _advantage_ of using a framework like Bootstrap?
- What are some _disadvantages_ of using a framework like Bootstrap?

:::info
Last week we had to style each individual element, class, or group. Often, in order to get a certain look, we would want to set the top margin something, but not the margin, or not the left and right margin, and so there was lots of fiddling with really micro-level elements. This week we have pre-written code that does most if not all of the interface styling. The primary advantage of this is that it's much, much easier and faster than designing each individual element. It also may be easier for beginning coders to make complex sites because things like collapsables and modals are included in the bootstrap. It's primary disadvantage is not being able to go all the way down to the granular level, or even down to the moderately specific. Bootstrap gives you a handful of styling options that all look professional, but in order for them to look *not* generic, one would have to go into the css and override some of the bootstrap specifications.
:::

- 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?
- There are many more `classes` used in this week’s Tinker. Where do these classes come from?
- 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
I don't think container is a special class in and of itself. My understanding is that it's used as an organizational tool to communicate that you'll house smaller "blocks" within it. Obviously these blocks function differently in flexbox vs in Bootstrap. But the class "container" could always change depending on how it is defined in the CSS.

All the classes are part of Bootstrap. They're written in order to simplify the styling to essentially create an easily understandable shortcut to effective styling.

These shortcuts always use the same naming conventions. If one understands how a badge functions in bootstrap then they can likely predict how a button, etc. will be written.
:::

- Analyze the form and refer to [https://getbootstrap.com/docs/5.2/forms](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?)
- If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?

:::info
The non-class attributes like ID and placeholder are crucial in order for the form to function, but they don't actually affect the interface display, so it's possible to make the form an inline form without an ID attribute present (but the form won't function properly when it's time to use it).

In order to make an inline form we placed each of the two inline elements within a row, and then nested the label and the input in separate columns. According to bootstrap you can also do this with a "span" or "small" element. If you remove the classes or the hierarchy is changed this will change the syntax that bootstrap is used to and likely won't produce a coherent product.

:::
- Manipulate the form to “exclude” certain classes as prescribed by the Bootstrap guide and examples.
- How does not following the specifications affect the output?
- What are the key aspects you need to be paying attention to when learning and implementing these framework features?
- What is the best way to learn how to use a new framework feature?
:::info
Commenting out classes removes the styling from the element as all the styling in bootstrap is stored in classes.

We need to make sure we understand what the classes acutally do the the element. This will help us make decisions about how to intentionally incorporate bootstrap into our own designs, rather than simply copying and pasting whole chunks of code form the bootstrap site (this also won't make a very original product).

The best way to learn how ot use a new framework feature is to copy and paste it into your own codepen and manipulate it so that you can learn what each of the individual classes do.
:::
- Think about your experience building a page from scratch last week.
- What is your attitude on using, learning new frameworks like this?
:::info
These new frameworks seem really powerful! They seem like a lot more efficient and less frustrating way to code. That being said, had we not learned the foundations of html and css in the prior weeks I don't think I would know how to read the source code very well, or understand what it's doing.
:::

### [ ](#GRID-SYSTEM "GRID-SYSTEM")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?
- Move a column outside a row but within a container. What happens?
- What is the importance of using these three classes together `container`, `row`, `col-__` and in the correct hierarchical sequence?
- 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?
- 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?
- 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?
- 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](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://materializecss.com/grid.html)
- [http://getskeleton.com/#grid](http://getskeleton.com/#grid)
- What are the similarities and what are the differences?
- What is a Grid System _convention_ vs. _rule_? Can you give an example?
- What would happen to my columns if I remove Bootstrap from my page?
- 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?

**Did you know?** As a student, you have access to the full [Lynda.com](http://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](http://Lynda.com):

- Log IN with your student account
- [https://www.linkedin.com/learning](https://www.linkedin.com/learning)
- See the Bootstrap Essentials VIDEO Tutorial
- [https://www.linkedin.com/learning/bootstrap-5-essential-training](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?

[ ](#COMPONENTS "COMPONENTS")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/](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?
- 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?
- What affect might this have on other parts of my 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.

[ ](#JAVASCRIPT "JAVASCRIPT")JAVASCRIPT
---------------------------------------

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 "NOTES")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.