BOOTSTRAP COURSE by Absar

 

BOOTSTRAP COURSE




Bootstrap 5 Crash Course Tutorial # 1 - Intro & Setup


  • We are gonna use CDN links to learn fundamentals


  • Or we can download


  • Or we can use npm or yarn



====================================================================


  1. Create Bootstrap boilerplate


  1. Then open it in browser


====================================================================


Bootstrap 5 Crash Course Tutorial #2 - Bootstrap 5 New Features

 



Bootstrap 5 Crash Course Tutorial #3 - Colors & Typography

Let’s look on some default or reboot bootstrap styles applies to elements

Now in here if we use a class h1-h6 on any tag like in our case h2 this will make it look like h1 or any given class


These are display headings that are not bold but bigger sometimes it looks nicer and these classes you can apply on different tags h1-h6 is not mandatory you can use any tag u like

The result will be same


So here the first one that is basic paragraph tag and other one is something more special because it is having a class of lead that will make the text a little bigger lighter and easier to read mainly used for article and blog writing


So in this above pic as you can see that text-center class will make a text in center text-start is by default and text-end will align the text in the end





The classes are self explanatory





Coloring a text by classes similarly you can do the same with background colors by just adding bg such as bg-primary



Or you can combine multiple classes:

Bootstrap 5 Crash Course Tutorial #4 - Buttons & Button Groups




When we wrap buttons in a btn-group class it will automatically remove spaces and make buttons look more nearer to each other.




Bootstrap 5 Crash Course Tutorial #5 - Utility Classes



  1. Visit Bootstrap Docs

  2. Click Utilities to find all utilities classes


=======================================================================


Let’s look on margin and padding first:

For Margins of all sides we use m-1 to m-5 classes m-5 is the largest margin you can check by inspecting


SIMILARLY


For Paddings of all sides we use p-1 to p-5 classes p-5 is the largest margin you can check by inspecting


Y for vertical direction

X for horizontal direction


If we use py-1 so it will only give padding on top and bottom

If we use px-1 so it will only give padding on left and right

Similarly you can do with margins

Example:



Now let’s see how we can give margin and padding to each side with different values


MARGINS

VALUES

MARGIN TOP

mt-* 

MARGIN BOTTOM

mb-*

MARGIN LEFT / START

ms-*

MARGIN RIGHT / END

me-*

Example:

You can do the same with paddings



Let’s look on Borders:


Use border class for giving borders on all sides

Use border-top for giving border on top

Use border-bottom for giving border on bottom

Use border-end for giving border on right

Use border-start for giving border on left



Now let’s look on subtractive borders:

To subtract any border we can mention that border only 

Like if I want to subtract border top i’ll use class=border border-top-0  the diagrams below explains everything that I took from Borders · Bootstrap v5.3 




Thin and Thick borders








For Rounded Borders






FOR SHADOWS:

We use shadow class

You can check more shadow classes here → Bootstrap Shadows


FOR FONT WEIGHTS AND STYLES:


fst-italic means font-style: italic; 

you can check this more on Text - Bootstrap


Bootstrap 5 Crash Course Tutorial #6 - Containers



Bootstrap 5 Crash Course Tutorial #7 - Grid Layout

Total columns are 12 (remember this)





Columns widths:


If I shrink the screen size you can see now it is not responsive because we said to take specific width and that’s the items or columns getting squashed and not look good so to do this here comes breakpoints


To Make Responsive Columns we use BreakPoints:





Justifying Columns:

justify-column-start

justify-column-end

justify-column-center

justify-content-around

justify-content-evenly

justify-content-between


You can do the same with align items as well  to check more detailed lecture you can visit this → Columns - Bootstrap

We apply this on row because in row display:flex; is applied that we can give

Here justify values


















Observe this code flow and new classes that I’m using here also set the section padding top

And bottom to 60px and left right to 0 in custom.css file

ALL CODE


text-md-start class will align the text to left when the screen size is ≥ medium 

d-none for display none by default and when it reaches to medium screen it converts into d-md-block that means block

img-fluid class will make the image responsive


Complete Website Code is on code ninja













Let’s make a navbar 











Bootstrap 5 Crash Course Tutorial #10 - Cards




Bootstrap 5 Crash Course Tutorial #11 - Accordions 



Code is Here




Bootstrap 5 Crash Course Tutorial #12 - List Groups



Code is Here





Bootstrap 5 Crash Course Tutorial #13 - Bootstrap Icons


We need to apply icons on:

Navbar before title a half book icon

Review section before title

list items of review section




Code is Here




Bootstrap 5 Crash Course Tutorial #15 - Bootstrap Tooltips


We have to initialize tooltip with JS

We need to apply tooltips on:

Hero section book image

On forms


Bootstrap 5 Crash Course Tutorial #16 - Bootstrap Modals



Code is Here



Bootstrap 5 Crash Course Tutorial #17 - Bootstrap Offcanvas 


Code is Here


Bootstrap 5 Crash Course Tutorial #18 - Bootstrap Dropdowns



Bootstrap 5 Crash Course Tutorial #19 - Customizing Bootstrap 


Customizing Colors in Bootstrap with different methods

  1. METHOD 1: Create your own style and override that

  2. METHOD 2: Use Custom Sass Files to update this

    1. To use sass first install node js to use npm

    2. Open terminal in project directory

    3. First write npm init to create package.json file

    4. Then now we need to install bootstrap so to do this we need to write npm install bootstrap 

    5. Now in inside we can see this file node_modules>bootstrap>scss>_variables.scss so these are the values that are applied to our different elements

    6. Now you might think that the easiest way to do that is to dive into these files right here directly and edit the variables inside them then just recompile them but i wouldn't recommend this method because then we lose the original bootstrap values and it becomes hard to roll back any changes and secondly if we ever update bootstrap then our changes are going to be lost anyway so don't directly edit these files

    7. So now we create sass folder outside of node_modules or in root directory

    8. Then a sass file named as main.scss 

Folder structure might look like this:


  1. Then inside main.scss file i’m going to import bootstrap file so it imports all sass files by just importing this one file

Like this:


  1. Now I’m going to write my custom variables here just above this link

Like:


  1. Now It’s time to compile our code to make it’s minified version so we need Live Sass Compiler by Ritwick Dey 


  1. After installing you may have to restart VS CODE 

  2. Now open up settings search live sass format

  3. Then click this link : Edit in settings.json


  1. Now you can copy these settings:

  1. Now just replace cdn link with this:

  1. To make a custom Theme then

what if we wanted to maybe add new theme colors to the ones we already have so now override the correct ones but add new ones well that's a little bit more complex 


If we take a look at the raw sass file for the variables (_variables.scss) then we can try and find a variable called theme colors now the theme colors variable is a bunch of values in parentheses and this is called a map of values


We essentially want to add a new value to this map a new theme variable if you like now what we could do in our file is redefine this whole map if we wanted to but doing that would mean we'd have to redefine all the values inside it too if we just specified one or two custom values inside it then the other ones will no longer exist 


Instead I don't want to alter the current map, I want to add a new map to it.

Now the way we do that is to first of all create our own custom map of extra colors that we want to see in our theme so let's do that


First of all in our file so you can call this whatever you want i'm calling it theme or rather custom theme colors so again this is going to be a map of value so we use parentheses to denote it's a map and then inside here we can define some extra color values now i'm going to define two extra values i'm going to create one called alt-light and that's going to be a really light purple color and once i've done that i'm also going to create another one called alt-dark and that is going to be a darker purple color to contrast the light one so this right here is now our new map of those new theme colors and we want to add this map to the other map of colors the theme colors that already exist in bootstrap now there's a very specific way we have to do this first of all we have to import two files from the original sass bootstrap source the first one is the function file and the second one is the variables file where we saw those theme variables defined 


Now the functions one must come first because the variable file uses it and the reason we need to import the variables file is so we can access the theme colors inside that and redefine it now so these imports come after any variables we've already redefined 


If they came first then the redefined values may not work because these files use the variables that make up the bootstrap classes so make sure you put any of your redefined variables at the top then i'm going to import these two files which will then have access to these new values for the variables and incorporate them into the bootstrap classes and after that we have our own new map of custom theme colors 


Then we need to merge our custom theme color map with the original theme map defined in the variables file. Since we've imported that file here we can access that theme called map. The way we merge two maps together is by using the map merge function and then we can pass in two maps to merge together.


Now in our case that's the custom theme colors and the original theme colors so let's pass those in and it doesn't really matter which order you pass them in it's going to have the same effect so this function is then going to merge those two maps together into a new map with all of the merged values inside it so then all we have to do is take that map and assign it to the theme colors variable so now we're saying look we're overriding the theme colors variable and that value is now going to be a map which is these other two maps merged together 


So at this point we're saying that the theme colors now should include these new variables, these two new theme colors and finally we import the rest of the bootstrap library at the bottom which will now use this updated theme colors map inside it.


What this means is that now we can use those other color classes for things like background color font color and button variants using our two new theme colors 


So now we can do is to use these colors classes like bg-altlight, text-altdark 

Comments

Post a Comment