- Let's improve the look and feel of our project
with some bootstrap code.
So we're going to add a few things here.
And mainly we'll need to add some classes.
And the container div, and this is going to be
setting up the columns of how we want this to behave
at different breakpoints and bootstrap.
So this is going to take up 12.
In bootstrap, when you set up columns and rows
the default is for there to be 12 columns
and then you can specify how many of those columns
the content is going to take.
So this content is going to normally take up all the columns.
But then on a medium breakpoint, it's going to only take up 10.
And at a large breakpoint, it's going to take up 7.
And then in addition to that, I'm going to need to
specify that what I'm going to be creating inside
here is going to be something called a list-group.
And a list-group-flush class here will make sure that
our list-group takes up the whole width of the container.
So a list-group is essentially just a list of items
with lines in between those items.
So then I need to add some more classes in here.
This is going to be list-group-item
so each one of the repeating items is going to get
classed as list-group-item.
And then I want the content inside of those
list-group-items to also use flexbox
and align the items using flexbox at the beginning
so align-item-start.
I'm going to save that.
Right, and you can see that whenever I save in this project
it's going to reformat a little bit.
I have a utility called Prettier
that reformats when you save.
So that looks really nice, but we need to do something
on the container of this content.
And we also need to replace these items right here.
So actually, I've prepared a special just
with sort of some code for the inside and
it's just so you don't see me typing a bunch of
bootstrap code.
I'm going to click on this Raw button and then select all this,
go back into my code, and just replace these two items
right here.
And if we save that, you can see that it may reformat just a
little bit but it's going to look really good when we're done.
So right now I have an x
for where my
FontAwesomeIcon should go.
So we can go ahead and add FontAwesome
by making sure that we use this import statement.
So we'll go back into AppointmentList,
go to our script section,
import the FontAwesomeIcon,
and then we also need to import the components.
And because we're not really using it here,
I think I can actually take them out of here.
And here.
Save it from here.
And then we are going to add this as a component.
So we'll need to say...
Alright, let's save that.
And now we can replace this x with a FontAwesomeIcon.
So we can use this tag,
and we'll use the self-closing version.
And we can say that the icon we want to use
is the Trash icon which will look really nice.
And then we'll need to do one more, sort of,
piece of formatting in the App.vue file
so here while I'm calling this AppointmentList,
I need to just make sure that I add another div
with a class of row because in order to use
the column grid and bootstrap, you need to have
a container which we have up here as well as a row
and then a series of columns.
And the columns are inside the AppointmentList.
So hopefully we did everything correctly,
and you can see a really nice looking list.
Just a few bootstrap classes.
Cleaning up some things is going to make this list
look really nice and be responsive using the
bootstrap framework.
And it looks like I need to add one more class
because when I make this bigger it's not centering,
so I'm glad I checked.
And that would be the justify-content-center class here
in this row.
So although it doesn't look like anything happened,
check it out.
Now when I make it wider, it stays in the center.
So this framework is really cool because it
does a lot of things for you in terms of layout
that you would have to use a lot of CSS
in order to take care of.