So, at this point we've integrated some input fields. We've changed the values of the input field. We have a range slider here that's changing the size. But, we have this space on the outside, and the font's not really that great, and the input fields don't look so good, and I'm not sure what I'm changing because they don't have labeled tags. So, I'd like to spend this episode and sort of style this and fix it up a little bit. So to do that, of course, you could write your own CSS or you could use a framework. I'm going to use a framework because it's just going to save me a lot of time. And, I'm going to use Bootstrap for that. So, I'm going to go to getbootstrap.com. I'll just go to the homepage here. But, you're probably pretty familiar with Bootstrap at this point.
It looks like we're getting a white screen. We'll just open up Safari. Sometimes I get this white screen on my Chrome and it runs into an issue. But, we'll just jump into Safari and it looks like this. Very odd. Anyways, we're in Safari now and you'll say Get Bootstrap and there's Download or Get started. If you're not familiar with Bootstrap, don't worry. We have a great series on getting started with Bootstrap here on CodeTime. It breaks you through nice, short, simple steps on how to use Bootstrap and what you can do at Bootstrap. So, definitely check out that series if you're not familiar with Bootstrap. So, we'll click on the Get started and it'll reference a CDN. So, we can click the copy button. And then, we'll paste this again before our style that's CSS. Now, if we're going to need any of the JavaScript that goes along with it, there's some JavaScript down here at the bottom.
I'm going to paste this here above my Vue.js reference and above my code. So, now I'm set up. Everything that Bootstrap basically has I have now as well. I'm going to open up actually my site. I'm going to move from the site being in Chrome to Safari because it looks like I ran into that bug. So, I'll open up the site in Safari and now you can see pretty much the same thing. A little bit different on these color input fields though. You start to see some of the differences that come along with Chrome versus Safari, even though they're on the same computer and on the same Mac Operating System. So, things like that. Color fields and the slider values here. As you can see, the slider performs slightly different as well in Safari, and had the value Trevor there. I'm not sure what that value is coming from, but we'll take a look at that as well.
You're going to want to use other libraries. I'm just giving you the range slider or the color input field. You want to use other libraries for that, because you're not going to get consistent browser results. So, keep that in mind as you design things or as you build things that you might need to use packages. And, there's lots of packages out there for integrating that sort of thing. So again, if I refresh this, you'll see there's my value. So, here we have our box. It's got it's font size. And, what's happening it looks like is, is it's scaling this input field inside of the browser window here. And, that's because... I don't know why that is actually. We have this on the h1, but then here is the input field and there's our pixels and our background color.
And, it should be just applying again to our text color here. But, actually look what I did there. I made a mistake there. Just realized that. Font size, text size pixels on the background. Well, that's going to inherit anything inside of it, except for the h1, which is what's making the input fields very large. I want to grab that code and actually put it on this one, which is the h1 and then refresh. And, now you'll see it's on the h1 and now I can scale. So, good catch there as I'm grabbing the element.
So, let's go in and add some other fields to this and make this all nice. Now, you'll notice immediately that the white space is gone. The font's a little bit different. The input fields look a little bit different. And, of course, our color fields are not where they should be or style the way we want. So, let's go and integrate our Bootstrap code. We've added the CSS. We've added the JS. Now we're going to add some actual code in here that's Bootstrap specific. So, on that ID I'm going to give it a class of container.
You're going to see that's going to move everything over. And, if you wanted to see what that looks like you would say something like BG primary, and that'll show you the area of the container, what's actually inside of it. I'll just leave that for now. And then, inside here is the box and I'm going to say, I put a row inside so I'll say row, and then I'll tab everything over. And now you'll see that that'll go right to the edge. So, now there's our element. Here's our section over here. I'm going to do a two-column layout. One, for our interface here. One, for our section for our style, what we're going to make. So, I did class box, style background, BG, h1, all of this. I'm going to take the box here and I'm going to give it a column of six.
And then, I'm going to come down here and I'm going to say column six, and that's going to be the mobile version six as well. You can see that the red box just got expanded over to six, which is the space even now, halfway down the screen. So, now I can take the interface fields, which are these input fields, and paste them inside of the column six. Now they're over here. So, here's my working canvas basically and here's my tools over here. So from here now, I might want to clean up some of these input fields. Maybe put them inside of a card or something that I can go and reference. So, I'll do that. I'll say card. And then, I'm going to give it a padding of four all around. Take the elements. Put them inside of the input fields like so, and you can see they're in side there like that now.
And then, we're going to add some Bootstrap classes to [Styley 00:06:25]. So, I'm going to say label, and then I would specify four, which is going to be the ID. If we want to make this actually accessible, which we would want to. So, I'll specify a name and this is going to be for name. And then this is going to be the value name. And then this can get a class of form control. Now, these are the default Bootstrap classes. If you're unfamiliar with these, definitely watch that series on, we'll say a forum group, and we'll tab everything in. So, that's the same format here. I'm going to just make this easy for myself. I'm going to paste this four times and then I'm going to reference here where it says BG color and on the values that it had. So, for example, name, I'm changing that to BG color, and I'm just pressing command D to do that.
So, I'll grab the name field and text color and command D and then text size. And then, I can get rid of these values and then come back in and maybe fix these labels so that they're a little bit nicer with the formatting. So, we'll say BG background. Maybe do background color like so. Now if you refresh, a nice and cool color way of doing it. Now, our color fields are... This is a range slider and these are color sliders. So, let's go in and change those values where we changed them to a range color. And this one also was color. Now, if we refresh, you'll see we have color ones and we have our text size. And, it looks like our range has an E, and now we have our slider as well. So, that's pretty cool. Look at that. We have our slider. We can change the color, and we'll change the background color. And we can say Babadoo banner maker.
Now, if I wanted to adjust some of the line or tracking of the letters or the line height, I could specify sliders for that as well. And pretty easy to go and do. I make two more rules. I'm going to say this one's line height. And then, this one here I'm going to say is tracking. Then, I'll specify the values here for text size, is now going to be text tracking. And, for this one here for text size it's going to be height. So now, I can go down here and reference those values. And, it really is this easy to get started with this.
I'll put a comma. And then, the other one that I did was text the tracking. And, you can see we just build up under data here are our options. Pretty easy to get this going. Okay. So similar like we did before, these are going to bring back just default values. So on the h1 here, we make this code a little bit... I'm going to adjust my size here just so we can see a little bit better. If we go up to our h1 here it says, font size, text size, pixels, color. We're going to add a couple more here now. So again, I like to break this down to two lines, once it starts to get a little bit more complex. So, it looks like that. Various ways you can break it down, however you like, but I'll do comma. And then I'm going to do two rules here.
This one here is going to be line height. And remember it's CamelCase syntax because our CSS rules don't do hyphens. And then, I'm going to specify my line height in... I guess I could leave it as pixels, but line height can be done in various different ways. And, I'm going to do the tracking here. And then, tracking here is going to be the default value. So, let's go down and grab those values. So, here's our text size, here's our text height. So, this will be text height, and then here will be text tracking. I'm just going to leave these for pixels for now. So, there's our box. And, I could probably take care of this blue background color now and take off of that. So, let's take that off, refresh this, and now let's see what we have.
So, we have our text size. We have our line height. Pretty cool. And we have our tracking. Oh. Trackings not working. Tracking. CSS tracking, and that's because it's letter spacing. I'm very used to that. So, this is actually letter spacing. You probably knew that the whole time and you were shouting it out. Trevor, it's the letter spacing. Anyways. Now you have you're your control over your tracking. What you could say is letter spacing in CSS as well. That's one of those, the names don't really line up too well. And it's pretty cool. And, of course, we can change our colors here to go along with that, and our background color maybe if we want that to be something different, maybe a lighter blue. And our value, right? So, the next thing we might want to do is add some formatting to the box itself. And, that's pretty easy to do with some border radius, and maybe some height controls and with controls. Let's take a look at that in the next episode.