Customize Bootstrap 5 Utilities API - The Power Of Customizing
Вставка
- Опубліковано 25 сер 2024
- Customize Bootstrap 5 Utilities API - The Power Of Customizing
In this tutorial, we are going to learn how to customize the Bootstrap 5 utility API. Bootstrap Utilities help use to Customize Bootstrap Classes. For example, if we want to specify 30% width to the HTML element then we need to manually create a class for that. Using Utility API we can create a customize bootstrap class.
Comment us if you have any questions or
👉 Support Me on Patreon 😊:
/ dailytuition
🚀 Udemy Courses:
www.udemy.com/...
🎅 Playlist :
Complete MERN Series
• Getting Started with M...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
🛠️ Tools I use:
🟠 My Theme: • Finally, I am Back! St...
🟠 Font Family: fonts.google.c...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
👉 Follow us:
🟠 / akki.2013
📂 Source Project
📦
⏱️ Timestamps ⏱️
00:00 - Intro
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
More Videos:
💡 Complete Node Course
• Complete Node & Expres...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 React Complete Tutorial
• Complete React 16.8 Cr...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Mobile Shopee E-Commerce Website Course - PHP & MySQL
• Complete Mobile Shopee...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Portfolio Website with Bootstrap - HTML/CSS
• Complete Portfolio Web...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Responsive Blooger Website Using HTML/CSS
• Complete Responsive Bl...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Create a Shopping Cart Using PHP and Mysql
• Create Shopping Cart U...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Asp.net Registration Form Design with Validation Part - 1
• Asp.net Registration F...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete CRUD Operation with PHP MySql Database
• Complete CRUD Operatio...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 What is Node.js? How to install it?
• What is Node.js? Only ...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 PHP Complete Registration & Login System Using MySQLi - Complete Guide
• PHP Complete Registrat...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Hosting WordPress Website with Free Hosting
• Hosting Wordpress Webs...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Bootstrap Grid System The Complete Guide - In Action
• Asp.net Registration F...
Like this video If you find anything useful. Share with your friends that is all for now I will see you In the next one.
Thank You...! 🙏
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
#dailytuition #programming #tutorials #code #vscode
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
thank you bro.
best video of bootstrap
Fantastic, my friend. Many thanks indeed !!
This was really superb, very helpful! If I could upvote more than once, I would.
thanks for tutorials bro
Good tutorial
Awesome. Thank for super best tutorial.
Thank you so much for this video, I was looking for the same.
Excellent tutorial!!! please make more on bootstrap advanced customization with a project
Excellent video
Great tutorial
Nice video sir..btw what is the fonts you are using in vscode?
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.
add maps also
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.
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
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 ?
Could you please tell me which font family you are using for an editor text and which theme?
It's rubik
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?
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
Hello sir,
Don't use @import
Instead use @forward & @use.
Sure
The import has to be used for boostrap according to bootstrap documentation
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";
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
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
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
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..
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";