DEV Community

Cover image for Day 6: 100 days of code, Learning Bootstrap fundamentals and sass inheritance
Gaurav-Shekhawat
Gaurav-Shekhawat

Posted on

Day 6: 100 days of code, Learning Bootstrap fundamentals and sass inheritance

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Large screen:-
ON large scrren

as we shrink the size of the screen down.
On small screen

  • 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

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

small screen

SASS inheritance

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

alert pic
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


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

Completed the google search project and uploaded everything to git

Top comments (2)

Collapse
 
aaronwager profile image
Aaron Wager

Well done buddy!

I've only done a little bit of work with Bootstrap, so this post was helpful.

Keep up the great work :)

Collapse
 
gauravshekhawat profile image
Gaurav-Shekhawat

Thanks for your kind words, I really appreciate that