Day 6: 100 days of code, Learning Bootstrap fundamentals and sass inheritance
Gaurav-Shekhawat
Posted on August 18, 2021
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 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.
as we shrink the size of the screen down.
- 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:-
This behaves as 4 div in 1 row on a large screen, and 2 div's in each row on a small screen.
SASS inheritance
Let's suppose we are designing 3 alert messages as below:-
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 :-
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:-
Completed the google search project and uploaded everything to git
Posted on August 18, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
August 18, 2021