Customize Bootstrap 5 Utilities API - The Power Of Customizing

hey everyone and welcome back to daily tuition in this tutorial we're going to learn how to customize bootstrap 5 with utility api as you know bootstrap comes with many predefined classes just like w 100 for 100 with mr for margin right bg white for white background color and so on but what if you want to specify 30 width bootstrap has no class for that in that case we can use utility api of bootstrap and create our own customized classes so let's see how to do it i'm going to first open the visual studio code editor and inside that i have here a tutorial folder inside that i have here index.html file inside this file i have a simple html5 snippet with the title customize bootstrap now as you know bootstrap use sas as a compiler to process the css so we are using sas to create utility api so when you open your visual studio code editor just click on the extension and here search for sas compiler and here is the extension call live sas compiler you just have to install this extension in your vs code editor using this extension you'll be able to compile sas file into css very easily and quickly i already have this just out of that i'm going to install an extension call live server this extension is going to allows us to run the html file in the browser with the live reload feature so whenever you make any changes in your html file you will get the updated result so you just have to install this live server as well now once you've done that just back to your project and create this index.html file with a simple html5 snippet here inside this body here i'm going to create a container with bg dark cloth and inside this container i'm going to create h1 heading tag with the text customize the post wrap just down here i'm going to simply add a division tag for for testing classes and right up here i'm gonna specify text white let me save the changes and open this file in the live server so i'm gonna right click here and say open with live server when you install live server extension you will get this option this will open your index file in the live server now just start that i'm going to install bootstrap inside this project so let me first open the terminal and inside my terminal here i'm going to execute a command called npm init to initialize this project as npm project so i can install different packages inside this project if you don't know anything about npm or node i have a dedicated course on it you can check out that course from the link provided in the description just for now just type npm init hyphen y this will create a package.json file inside your project just out of that i'm going to install bootstrap in this project so i'm going to say here npm node package manager iphone install and specify bootstrap the name of the library when i press enter node package manager is going to install bootstrap in my project you can notice here inside this node modules i have the bootstrap package if you want you can download the bootstrap manually as well and put that inside your project that's upon you you are free to choose any method to put bootstrap inside your project now you all know bootstrap is written in sas sas is a preprocessor of css bootstrap use sas to create bootstrap classes so we are using the sas to create utility classes so what we are going to do is here i am going to create a new file and i am going to name it style.scss as you know the extension of the sas file is sas or scss i'm using scss here i'm going to create this style.js file here and inside this i'm going to simply put body margin is going to be zero just for testing save this file and now i'm gonna click on this watch sas right here so when i click on this watch sas you can notice two files are generated in your project here you can notice inside your css folder you have style mean dot css and style mean dot map css let me just close this terminal and open the style main dot css here is the minified version of your style sheet just close this stylesheet and link this with your index.html now whenever you make any changes inside this sas file it will automatically recompile your file and regenerate this stylemain.css file let me show you if i add here padding zero when i save the changes sas compiler is going to regenerate the style sheet you're gonna notice here we have the padding now bootstrap uses sas map feature to create a utility api but what is map simply put map is a key and value pair just like javascript object you can just pass a key and its corresponding value this is what we call a map in sas in latest sas you will get this map feature you may duplicate values but not the keys keys are unique now this is the simple syntax of map let's use it to customize the bootstrap so let me first get it off this statement and at the top i'm gonna first import some bootstrap files if i open the bootstrap project then you can notice here inside this scss right here i have a bunch of sas files now we are using these files to customize utility api so to customize utility api we need variables files then we need functions files and then we need utilities files right so at the top here i'm going to add import statement import and we are going to import dot forward slash modules inside that module we have bootstrap inside that we have a css folder and inside that i have functions file i'm going to choose that functions.css just like this just for that we need to import variable files as well because we are using some variables from the bootstrap so at the top here i'm going to add import statement again double quote and specify forward slash choose node modules bootstrap sas and the variables and at the end we are going to import node modules bootstrap sas and utility dot scss file that's it now we are customizing the utility api that is why we need all these three import statement now if you don't know anything about sas i have a complete course on it you can check out that course from the top right corner of the screen now once you've done that you can just simply add here a variable called utilities using utility variable you can customize the bootstrap utility api so i'm gonna add here dollar sign and then specify here utilities and then i'm gonna pass here colon because utilities is a type of map so i'm gonna pass here colon and pass parenthesis so this is a type of key and i'm gonna pass here value to this key using this map we can generate different bootstrap classes let's suppose i want to generate my own with classes of boost app so i'm going to simply create here a key so i'm going to pass a double quote and say width pass colon and pass here parenthesis this is a type of map again inside this map here i'm gonna pass different properties let me open here bootstrap website getbootstrap.com click on the get started and click on this utilities when you click on it you can notice the utilities map contains all the utilities and later merge to the custom utility map variable and with this utilities you'll get different options just like properties values class and so on two options are required property and values using property you specify the name of the css property for example padding margin width height and so on to this property you specify the css property and then we have values inside this value you specify the value for that property let me show you how you can do it so here we have a key with and just down here i'm going to pass here property and to this property i'm going to pass width now this is just a key and this is a css property we're going to pass value to this property key just after that we're going to specify here values and then pass your colon and pass map again inside this map i'm going to specify different values so i'm going to just copy some values specify that here i'm going to create a key 25 and pass value to it 25 then create 50 75 100 and auto is going to be auto now let me save the changes and show you the result first when you save the changes and back to your style.mean.css you will not get anything here this is because this will not print anything you have to import the bootstrap file as well at the end of this utilities so at the bottom right down here i'm going to import the bootstrap files so in the double quote i'm going to specify node modules bootstrap and in the scss file i have the bootstrap.scss so i'm going to specify that here save these changes don't forget to add semicolon here save these changes and now if i open the style mean dot css file then you can notice here i have here a bunch of bootstrap code right now what you have to do is you have to search for your class you can notice we have the property width so you have to search for with classes when you create utilities without a clause option bootstrap is going to create a class with the name of the property so here the property name is width so you will search for the with classes so i'm going to open the style.mean.css and here i'm going to press ctrl f to search for the word and here i'm going to search for dot width right down here you can notice i have some classes here with 25 which is going to have 25 percent width with 50 which is going to have with 50 and so on so you can notice here i have all these classes in my mean dot css file now here what we are going to do is we are going to customize the bootstrap utility classes so if you open the utilities dot scss file or bootstrap then you can notice you have the bunch of sas code here we are going to just replace this key with our own utility values so now you don't have with classes with w as you know in bootstrap if you want to specify hundred percent with you will simply specify w hyphen hundred that will specify hundred percent width to your element but now if you want to specify hundred percent width you have to specify with hyphen hundred now what if you want to specify your own class names you will notice inside your style.min.css you have here with 50. you want to change this class name in that case you can simply add here an option call class using this class you can specify the name of your class for example if i specify w like this when a sale changes all your with classes is now converted to w if i open this style mean dot css you can notice we have w50 we have w25 and so on you're not limited to specify here w you can specify any class name here that's upon you now we all know you will get all these as a default classes in bootstrap what if you want to create your own in that case you can just pass here a comma and pass your own value for example if you want with 30 then you can just simply pass here 30 colon and then pass here 30 percent that's it when you save the changes and back to the style mean dot is css just down here you can see we have with 30. now as you know inside this sas file we have the utilities dot sds file and inside that we have this width key we are replacing this key with our own utility keys so if i remove all these classes right from here save these changes and if i back to my mean dot css then you can notice i only have here with 30 all the bootstrap classes is now removed from the bootstrap because i'm replacing the with key now what if you don't want to do this you want all the bootstrap pre-built classes as well as your own classes in that case you don't have to replace the bootstrap keys instead you can create your own keys in utilities so instead of with here if i specify w and if i get rid of all these values when i save the changes i have all the pre-built bootstrap classes as well as my own bootstrap class you can notice here now let's take one more example of creating utility classes let me copy and comment this and i'm going to specify here key which is going to be spacing and the property i want is padding and to this padding i'm going to name this class spacing and the value is going to be 5 5 em so this is going to create a class called spacing with the value 5 and this value is going to specify 5 em padding to the html element let me show you if i save these changes and if i search for this spacing in my style main dot css then you can notice as you can see i have here a class called spacing 5 with a padding 5 em you don't have to write any css code to create your own css classes if i want to add one more value here i can add that as well just like this save these changes in the style main.css i'm gonna have here spacing 10 with the padding 10 em now let's suppose i want to add another property called paddingtop so i can just simply pass here a comma right down here to this parenthesis i'm gonna pass here comma pass double quote and specify here key spacing t colon and pass parenthesis make sure the keys are unique let me just copy all these properties pass that here and this time it is a padding top class name is going to be spacing d and then here i'm going to pass 1 em and key is going to be 1 let me save the changes and open the style main dot css i'm gonna search for spacing t you can notice i have a class called spacing t hyphen one and then we have a property here padding top one em so now if you want to add padding top 1 em to your html element you can simply specify spacing t1 if i open my index.html if i add here a class called spacing d1 let me specify here text to white as you can see i have some space to the top of this element so using this utility api i can create my own css styling now as you can see it's super easy to generate new css classes in bootstrap now the best use case of this utilities is with colors because most of the time you use more than one color in your website using utilities you can save your time and generate different text colors let me show you let me comment this right up here i'm gonna paste that code again and here instead of w i'm gonna specify text color property is going to be color i'm going to create text color classes and the class is going to be text color then let me specify values here as you know color property is going to take hex or rgb values so let me specify here white and rgb a color just like this let me save the changes and show you the result now we need to search for this text color inside the style mean dot css as you can see i have here a class called text color and oops here is the problem right here i have the color hex value instead of the text white the problem is when you compile your style into css the sas compiler is going to take this white as a hex value instead we need to inform sas compiler to take this white as a key instead of a color so we're going to wrap this in double quote like this now when i save the changes and open this style main.css you can see here we have white so now you can use this text color to specify white text color to your text you can generate different classes by specifying different values here so if i pass here some values just like this then bootstrap is going to give me that classes here you can notice text color red text color yellow and now i can use this text color in my index.html so here i can use text color yellow when i save the changes back to my project as you can see i'm gonna have the yellow text color to my element so now i can easily use these classes in my html now what if you want to create power effect on each color that would be very time consuming task right utility api provide state property to make this possible within a few second let me show if i add here a property or you can say option call state with hover just like this this statement is going to create all the hover classes for all these values in my style mean.css you can notice here i have text color red hover text color yellow hover and so on so with just a few second we created our effect classes to this text so when you hover on this h1 heading tag i want to convert this color into red so here i'm going to simply specify text color red hyphen hover when i save the changes and when i hover on this text you can notice my text is now converted into red color that's super easy right you can use this state property to create different pseudo selectors like hor focus and so on now what if you want to create responsive classes for all these colors if you are not using utilities api then you have to manually create that responsive classes for all these values but with utility api you can instantly create your responsive classes with just a few seconds here you can add an option call responsive and then you can pass here true to add responsive classes for all these values when i save the changes bootstrap is going to generate all the responsive classes for all these values if i open style main.css here you can notice i have different breakpoint responsive classes for all these values you can notice here text color sm white text color same white hover and so on you will get all the responsive classes for all your values now you are not limited to only use this utility api to specify colors and paddings you can use any css property and generate different classes for example let's say you want to specify background image to your website you can then simply create a custom class for that for example if i just comment this and print that up let me get rid of these values instead of text color here i'm going to use img bg color and this time i'm going to choose a property called background image class is going to be bg cover and then i'm going to specify values here in the values i'm going to specify key which is img1 pass here colon and in the url here i'm going to pause my image let's suppose i have here an asset folder inside my tutorial folder inside that asset i have an image img1.jpg i'm going to specify that path here so here i'm going to pass dot assets img1 dot jpg so let's suppose i have this image in my project inside asset folder i'm going to specify that relative path here and save all the changes whenever i save the changes and if i open my style main.css if i search for this bg cover you can notice i have here a class bg cover img1 and with that you will get background image img1.jpg so now if you want to specify background image you can just simply specify a class bg cover img1 to your html element so there are many useful things you can do with utility api of bootstrap so next time when you use bootstrap don't forget to customize it according to your need so that is all for now if you find anything useful don't forget to press the like button subscribe for more latest videos that is all for now i will see you in the next one [Music] do [Music] you

Channel: Daily Tuition

Views: 2,646

Keywords: Customize Bootstrap 5 Utilities API - The Power Of Customizing, bootstrap 5 utilities api, working with bootstrap utility api, making bootstrap utility api, making bootstrap classes with utilities api, customizing boostrap classes, customize bootstrap utility api, working with bootstrap 5 utitlity api, Utilities, boostrap 5, bootstrap, customization, customize

Id: 4k3AiwXrfig

Length: 22min 43sec (1363 seconds)

Published: Mon Oct 04 2021