---
# System prepended metadata

title: 'TINKER: Bootstrap 5.3.2.'
tags: [' html', ' tinker', ' css', mstu5003, ' bootstrap']

---

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

# MINI TINKER: Bootstrap 5.3.2.

---

### 1. SET UP

- Fork the codepen to play with it -  https://codepen.io/ivathedreamer/pen/poqLarQ
- Observe how removing Bootstrap from "Add External CSS" affects the layout. Understand the importance of framework references.
- You can add the resource back: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css


### 2. GRID SYSTEM

- Read the Bootstrap documentation on [Grids](https://getbootstrap.com/docs/5.2/layout/grid/) carefully:They work in conjunction with `containers > rows > columns`

```htmlmixed=
<div class="container">
<div class="row">
<div class="col-__">
<!-- CONTENT -->
</div>
</div>
</div>
```
- FIND the above patterns with container, row, and col-__ in the HTML of the Pen.
- Try moving rows or columns outside their conventional containers. Learn how content is structured and styled within Bootstrap's grid.
- 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.
- 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. 
- What does the `xs`, `sm`, `md`, `lg`, `xl`, `xxl` represent in the column `class` notation?
- What does the `number` in the column name represent with respect to the GRID system?

### 3. CUSTOM CSS 

- Comment out any existing custom CSS rules and see the changes. Understand the relationship between custom CSS and Bootstrap's styles. What happens to the page and why? Recognize how your custom styles can override or complement Bootstrap's defaults. 
- Remove classes like`danger`, `info`, etc. classes in the table and/or try adding them to other elements. Might work, might not.
- In the table, you see "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`

### 4. 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/buttons/
- Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen.



### 5. REFLECTION
- Bootstrap isn't the only option here. There are many different kinds of 3rd party libraries which we call HTML/CSS Frameworks. Take a look at these. Examples: 
- [Materialize](http://materializecss.com/)
- [Material Design Lite](https://getmdl.io/components/index.html)
- [Semantic UI](https://semantic-ui.com/usage/layout.html)...
- What is your attitude on using, learning new frameworks like this?
- Share with your group what you found about the experience of learning to use new features and what your takeaway was