Thank you For this Video. Content is Very Clear and Nice Explanation. Is there any videos for bootstrap other sass files customization like helpers.scss etc.
Thanks for the video! Now everything is clear with the redefinition of classes. But I still haven't figured out how to redefine variables and parameters in Bootstrap. Recently I wanted to enable negative margins (disabled by default in Boostrap 5), but I didn't understand how to change the value for the $enable-negative-margins property from false to true.
Negative margins are disabled by default in Bootstrap 5, but we can enable it in the SASS code by setting $enable-negative-margins property to true . Then we can apply the class with an n in it to apply the negative margin. For example, we can write .mt-n1 to add a negative margin.
I didnt get the Point on enabling Responsive, yes it is generating responsive classes, but what about the values, eg: in your example at 22:42 for .text-color, .text-color-sm-white and .text-color-md-white etc all having same value, what if I want a different value for .text-color-lg-white? am I missinig anything or am I misunderstanding the concept? could you please clarify this?
You are misunderstanding it. Let's suppose you want blue text color to the text when the viewport is medium, in that case you will only going to use .text-color-md-white class means you only have the color when the viewport is medium or larger then that. Don't worry about other classes. You can remove unused classes with the help of js library.
how can i change the font-size ? like this or any other way to customize font-size? it is bootstrap 5.3 version "font-size": ( property: font-size, class: fs, values: ( 10: 10px, 12: 12px, 14: 14px, 16: 16px, 18: 18px, 20: 20px, 24: 24px, 30: 30px, 36: 36px, 48: 48px, 60: 60px, 72: 72px ) ),
You have imported function, variables and utilities at the top and then at the end you have imported bootstrap that already include all the scss files, can't we just import the files that we need like one by one (root, reboot, mixin). I tried but it throws error, Is there any solution for this?
thanks for tutorials bro but one thing more how can we applied multiple $utilites without commented first $utilities just like yours I,ve applied multiple $utilities but it,s throws an error kindly guide me please thanks a lot once more
VS CODE SETTINGS -> SETTINGS -> SEARCH with 'LIVE SASS FORMAT' -> click edit in settings.json there change format as compressed and extensionName as .min.css
video 22:42. As soon as I have completed /style.scss nothing is shown on style.min.css @import "./node_modules/bootstrap/scss/functions"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/utilities"; $utilities:( "width":( property:width, class: wi, values:( 25:25%, 50:50%, 75:75%, 100:100%, auto:auto ) ) ); @import"./node_modules/bootstrap/scss/bootstrap.scss"
for anyone else who is using a newer version of bootstrap, set you sass file up like so. @import "./node_modules/bootstrap/scss/functions"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/variables-dark"; @import "./node_modules/bootstrap/scss/maps"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/utilities"; //props go here example $utilities:( "spacing":( property:padding, class:spacing, values:( 5:5em, ) ), "w":( property:width, class:lees, values:( 30:30%, ) ) ); @import "./node_modules/bootstrap/scss/bootstrap.scss";
This was really superb, very helpful! If I could upvote more than once, I would.
Most welcome.
best video of bootstrap
For newer version of bootstrap we also need to include maps.scss between variables.scss and utilities.scss in style.scss
thanks alot fixed the bug in mine cheers
you mean we need to @import it, right? thanks
Fantastic, my friend. Many thanks indeed !!
thank you bro.
Thank you so much for this video, I was looking for the same.
Awesome. Thank for super best tutorial.
Excellent video
thanks for tutorials bro
Excellent tutorial!!! please make more on bootstrap advanced customization with a project
Good tutorial
Nice video sir..btw what is the fonts you are using in vscode?
It's Spline Sans Mono.
Great tutorial
Thank you For this Video.
Content is Very Clear and Nice Explanation.
Is there any videos for bootstrap other sass files customization like helpers.scss etc.
Could you please tell me which font family you are using for an editor text and which theme?
It's rubik
Thanks for the video! Now everything is clear with the redefinition of classes.
But I still haven't figured out how to redefine variables and parameters in Bootstrap.
Recently I wanted to enable negative margins (disabled by default in Boostrap 5), but I didn't understand how to change the value for the $enable-negative-margins property from false to true.
Negative margins are disabled by default in Bootstrap 5, but we can enable it in the SASS code by setting $enable-negative-margins property to true .
Then we can apply the class with an n in it to apply the negative margin.
For example, we can write .mt-n1 to add a negative margin.
I didnt get the Point on enabling Responsive, yes it is generating responsive classes, but what about the values, eg: in your example at 22:42 for .text-color, .text-color-sm-white and .text-color-md-white etc all having same value, what if I want a different value for .text-color-lg-white? am I missinig anything or am I misunderstanding the concept? could you please clarify this?
You are misunderstanding it. Let's suppose you want blue text color to the text when the viewport is medium, in that case you will only going to use .text-color-md-white class means you only have the color when the viewport is medium or larger then that. Don't worry about other classes. You can remove unused classes with the help of js library.
How did you changed your vs-code font family ?
plz, make a video on how to enable negative margin in Bootstrap5.
how to change the padding values (spacers), like i want to add extra padding pt-6,pt-7,etc
how can i change the font-size ? like this or any other way to customize font-size? it is bootstrap 5.3 version
"font-size": (
property: font-size,
class: fs,
values: (
10: 10px,
12: 12px,
14: 14px,
16: 16px,
18: 18px,
20: 20px,
24: 24px,
30: 30px,
36: 36px,
48: 48px,
60: 60px,
72: 72px
)
),
Vai react or react native ka project make karo...i like this channel beacuse it always teach us doing project but this time it is late
Yes. Soon I will upload a project
@@DailyTuition vai waiting for so long
Aap abhi kon se company m job karte ho and whats your experience and salary
I am in cognizant company. My package is around 15L
Hello sir,
Don't use @import
Instead use @forward & @use.
Sure
The import has to be used for boostrap according to bootstrap documentation
You have imported function, variables and utilities at the top and then at the end you have imported bootstrap that already include all the scss files, can't we just import the files that we need like one by one (root, reboot, mixin). I tried but it throws error, Is there any solution for this?
add maps also
thanks for tutorials bro but one thing more how can we applied multiple $utilites without commented first $utilities just like yours I,ve applied multiple $utilities but it,s throws an error kindly guide me please thanks a lot once more
Pls show me the most
API how to use it.. also CURD operations
In this case, Adding and Updating custom classes is referred as CRUD operation. Its called API because of manipulating utility classes of Bootstrap.
@@hiteshsuthar1097 OK..
Hi,sir.i cannot compiler the .min.css file,if you are so kind as to tell me the reason,i will be greatly honored!
Please install sass compiler properly. Then create a .sass file and use watch sass to compile it
@@DailyTuition i cannot generate the .min.css file🙁
Message me on instagram. My id is akki.2013 show me your code let me help you
VS CODE SETTINGS -> SETTINGS -> SEARCH with 'LIVE SASS FORMAT' -> click edit in settings.json
there change format as compressed and extensionName as .min.css
video 22:42. As soon as I have completed /style.scss nothing is shown on style.min.css
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";
$utilities:(
"width":(
property:width,
class: wi,
values:(
25:25%,
50:50%,
75:75%,
100:100%,
auto:auto
)
)
);
@import"./node_modules/bootstrap/scss/bootstrap.scss"
import these sass files - its changes slightly since the video was 1st uploaded.
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/variables-dark";
@import "./node_modules/bootstrap/scss/maps";
@import "./node_modules/bootstrap/scss/mixins";
@import "./node_modules/bootstrap/scss/utilities";
// Your utility prop...
$utilities:(
"width":(
property:width,
values:(
25:25%,
30:30%,
50:50%,
75:75%,
100:100%,
auto:auto
)
)
);
@import "./node_modules/bootstrap/scss/bootstrap.scss";
for anyone else who is using a newer version of bootstrap, set you sass file up like so.
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/variables-dark";
@import "./node_modules/bootstrap/scss/maps";
@import "./node_modules/bootstrap/scss/mixins";
@import "./node_modules/bootstrap/scss/utilities";
//props go here example
$utilities:(
"spacing":(
property:padding,
class:spacing,
values:(
5:5em,
)
),
"w":(
property:width,
class:lees,
values:(
30:30%,
)
)
);
@import "./node_modules/bootstrap/scss/bootstrap.scss";