Day 6: 100 days of code, Learning Bootstrap fundamentals and sass inheritance
Tags: 100daysofcode, webdev, github, git
Published: 2021-08-18 20:08:23

There will be less content today as I am busy with academics.

### Don't forget to use the `flex-wrap:wrap`
In my last some of the projects, I have to change almost the entire code in media queries so that my website look good on an mobile device. This can be avoided to a great extent by using:-
```
flex-wrap: wrap;
```

So, use it wisely whenever needed.

## Bootstrap Basics
* Bootstrap is a css library, which consists of code written by someone-else, taking care of all the styles and responsive web design. To use it in our projects, go to [Bootstrap](https://getbootstrap.com/) and copy the css link inside of your html file.  
* To use any-functionality of bootstrap, just link bootstrap with your html, and then just specify in the class of your html tag, what you want to do with that element, among some classes given in bootstrap website.

For example, if you want to design a warning button:-
```
<button class = "btn btn-warning">  Warning  </button>
```

Now practice and get your hands dirty ..

### Bootstrap column model
This is a bootstrap way to make sure that our web-pages are mobile responsive. In this model, bootstrap divides its page into 12 distinct columns. 

![Bootstrap column model in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heo7r87e6dw0pqj802m2.png)

Large screen:-
![ON large scrren](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb3ll9herhmmke7yk1h9.png)

as we shrink the size of the screen down.
![On small screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efxefvi4fjtqbziahyae.png)


* Bootstrap also let us specify how many columns should an div take, depending on the size of the screen as small or large. Here is the example:-

![IMage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbc288dn811nezjt39s6.png)

This behaves as 4 div in 1 row on a large screen, and 2 div's in each row on a small screen.

![large screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgmtf31aky2kedqthd0w.png)

![small screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o21v8rvsfkjl65w1479v.png)


## SASS inheritance
Let's suppose we are designing 3 alert messages as below:-

![alert pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2hy2qn2vgm1jphwe0dl.png)
If we write it using nesting in sass, then in the output css, the code will be copyed in the css styling of all the alert, this will increase the size of our css to a large extent in long term. To solve this problem, we use inheritance. 

Hence, the better solution of the above problem will be :-
![better code using inheritance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xtplroh1k051hsf4k8t.png)


-----

# New things learnt about Git
When you clone an empty repository from github, and them modify it and commit in your local machine, then if you run the `git status` command, you will get some "error-looking" message, the reason for that is:-

![error during first commit in an empty git repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6nv6qdh2ucdwwwxei9j.png)


## Completed the google search project and uploaded everything to git