Collaborate on Invoice Bootstrap for Technical Support with Ease Using airSlate SignNow

Invoice bootstrap for Technical Support

welcome to part 11 of building the invoice management system so in this video we are doing the bootstrap stuff i know i've been adding or i've been doing videos about bootstrap but what i like to do is every single series that i'm doing i like to do the entire videos and show you how to build it from start to finish so this is just like any other bootstrap video i did but just to make sure that i have a complete tutorial on how to build this app i have to do the bootstrap again okay but i'm gonna do a very quick one i'm not gonna do the bootstrap without using the cdn so this is gonna be the syrian version of it okay so just to make it quick and to be able to integrate the bootstrap in our application i'm using the cdn metal all right so it's gonna be a quick video right now we have to get the bootstrap links the cdn on this site okay i have the link right here we're gonna click it okay i'm gonna open it in a different window so now what we're gonna do is the fourth step i'm gonna pick or i'm gonna copy this bootstrap.main.css bootstrap.main.js we don't really need the js at this moment okay um but i'm just going to pick the main.css file only okay or what i can do is i might let let's just pick both files so that when we're doing the javascript stuff the pop-ups and also the date pickers we don't have to come back here and copy the js right so i'm gonna copy the min.css and the js file okay so let's run the application okay i'm gonna open the app and see what we have so this is why we left from the last video all right so now what i'm gonna do is to open sublime and paste the code right in there good so i have the code right here so i'm going to open the home page that's where i'm going to paste the cdn right above the header i'm going to write within the header i mean i'm going to paste the line here okay so we're going to create a stylistic link or a link element okay and paste the code right here i'm gonna save it okay now to test that the bootstrap is working fine what i'm gonna do is to create a button all right so let's refresh our page all right so it's like the bootstrap is taking effect because i can see that the font has changed okay now what we're gonna do is this we're gonna create a button right here i'm gonna create a btn or a button element and i'm gonna give it a value of click me save it and then refresh so this is gonna be just a regular button now to start it using bootstrap to auto test that our bootstrap is working i'm gonna give it a btn or a bootstrap class a predefined class within this bootstrap main.css okay so i'm gonna say btn i'm gonna give it a class btn save it and do a refresh just with that simple code the button is redefined okay now to see the button clearly i'm going to turn off this background i'm going to go to the statics in right in here i'm going to um comment that refresh this page again you can see we have the button still not clear but what we're gonna do next is to give it a color so i'm gonna say btn dash primary save it so that's gonna give it a blue color all right so you can see the blue strap is actually working okay now um it is a phone looking uh button that is style using bootstrap so this one way of testing if bootstrap is working on your page or not i'm going to do a little bit of coding on this let's see how to uh do some columns and rules and columns i mean all right so i'm going to come here and then create a div and i'm going to give it a class of row okay so if you want to know um more about this bootstrap rows and column i'm gonna suggest you watch my other bootstrap videos i'm gonna do the link right here above on the upper right hand corner of this video so if you wanna know more about the rows and columns please watch that video so i'm gonna do a quick one on this other one all right so within the row i'm gonna create two columns so the first column i'm gonna give it six and the second column also will take another six okay so by default the row takes the entire space of the element that e in so this one is in the body so it's going to take up the full read of the page so the row will be right from here all the way down here so if i split it into two that is giving six to each of the columns i'm gonna split that page into two so we can have elements in the first half of the page and also in the second half to be let's do that quick i'm gonna do a div class i'm gonna say column as sm six i'm gonna close that we're gonna give that let's say test one i'm gonna copy and paste and give that test two and i will also have six i'm gonna save it refresh the page voila you have test one here and test two here so i'm gonna style it a little bit better to make sure that these tests are rightly centered so i'm gonna go to css and create a class before doing that i have to give this a class i'm going to give this my own custom class i'm going to call it my class that should be one word okay i'm gonna use the same class for both of them save it and then do uh style right here dot my class i'm gonna do text align center and i'm gonna refresh the page well now you can see we have test one here and test two here so this is the function or this the usage of bootstrap it allows you to quickly quote things on your site so you're gonna see more about bootstrap in the future videos uh let's just add one more step right here before we close this video i'm gonna give it a border not border with border style i'm gonna say um solid save it and refresh okay so um this actually tells us that we are able to use the bootstrap stuff and design things on our page so this is what i want to show you on this video and i hope you like it don't forget to click on that like button if you're new to our channel we do programming stuff right here so if you're interested in that you might consider subscribing and leaving us a comment i try to reply to all comments as much as possible so see you in another video