Bootstrap CSS Framework - Full Course for Beginners
Bootstrap CSS Framework - Full Course for Beginners
Learn Bootstrap 5 in this full course for beginners. Bootstrap is the most popular CSS framework. It allows web developers to quickly design and customize responsive mobile-first sites.
💻 Code: https://github.com/mdbootstrap/bootst…
✏️ Dawid Adach developed this course.
🎥 Check out the MD Bootstrap channel: / @mdbootstrap
🔗 Learn more about Material Design for Bootstrap: https://mdbootstrap.com/
⭐️ Course Contents ⭐️
Start
⌨️ (0:00:00) Introduction
⌨️ (0:01:58) What is Bootstrap?
⌨️ (0:02:50) Why use Bootstrap?
Installation / Setup
⌨️ (0:05:21) Download compiled CSS and JS
⌨️ (0:09:42) Install via CDN
⌨️ (0:11:40) NPM installation
Grid System
⌨️ (0:15:00) Grid System
Components
⌨️ (0:37:01) Buttons
⌨️ (0:42:25) Cards
⌨️ (0:57:53) Typography
⌨️ (1:12:37) Responsive images
⌨️ (1:18:29) Utilities
⌨️ (1:37:52) Tables
⌨️ (1:41:44) Alerts
⌨️ (1:50:08) Navs \u0026 Navbars
⌨️ (2:04:58) Icons
⌨️ (2:09:14) Forms
⌨️ (2:20:54) Other components
Creating a project using Bootstrap 5
⌨️ (2:30:30) Let’s build a webpage!
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Content
0 -> Bootstrap is the most popular CSS framework.
And it makes it easier to build great looking
4.96 -> websites. David teaches this course. And
he has a bunch of experience in Bootstrap,
9.84 -> and even helped create a popular
bootstrap library. Hey, YouTube,
13.92 -> my name is David. And today I've prepared for
you a crash course for bootstrap five. So the
19.2 -> most common front end framework used around the
world. I'm a co founder of MD bootstrap.com.
27.36 -> So I think we are the one of the best people to
teach you that because what MDB is, is actually
34.56 -> Material Design connected with Bootstrap. So we've
created open source library where we actually use
41.68 -> Bootstrap five, and we've been doing this for five
years already. We started back in 2015, when the
48.56 -> bootstrap three was the current version, then we
migrate to bootstrap four. And now, obviously,
53.68 -> we are using Bootstrap five. So once you finish
that crash course, you might be interested in
59.28 -> checking this out. Because as I said, this is
the library where we decide to connect material
66 -> design from Google. So to specific design, which
comes from Google Apps, with the Bootstrap. So
73.44 -> we have a hell of a lot of experience, in depth.
What we're going to cover in this video, what
80.88 -> bootstrap actually is just a few words, because
you're gonna see this on the real examples,
87.36 -> then I'm going to guide you for the installation
and the setup. So how to start working with it,
91.68 -> there are going to be a few ways how you
can add the bootstrap to your project,
95.68 -> then we're not going to cover the most important
part, which is a grid system. So this would make
102.88 -> bootstrap so famous. And we'll be also using and
learning how to use different components. And
109.6 -> finally, at the end of the video, I'm going to
show you how to build a page from scratch using
115.76 -> Bootstrap. So what the Bootstrap is a long story
short, is the most popular front end framework
121.6 -> around the globe now, so let me give you
some numbers in 2013, bootstrap around 1.6%
129.76 -> of top million sites, then back in 2016, bootstrap
ran already 15%. In 2018, it was already 18%. And
139.68 -> nowadays, it's more than 20%. Around the globe. So
it's a huge number. It's really, really widely use
147.68 -> library. And there is this page, which is called
the bill with, which gives bootstrap a 72%
156.72 -> of share of the framework market. So within all
the pages, which are utilizing any framework,
162 -> Bootstrap has 72% of it. So I believe this
is a good reason to know what's, why should
169.68 -> you use Bootstrap. There are many, many different
reasons why to do it, but obviously, did increase
175.92 -> your development speed. So if you use the existing
components, like you've seen on the screen before,
182.24 -> you've gone, just save a lot of time,
you could create all of it by yourself.
186.48 -> But there is no point because it's been
created for you. And it's been tested by the
191.36 -> millions of different developers. responsiveness.
This is what made bootstrap actually so
196.4 -> famous. So but now it's obvious when you
create a page, it has to be responsive,
200.64 -> but back in the days it doesn't fit in that
Wasn't that obvious. And bootstrap grid
204.48 -> was the revolutionary tool, which
change a lot in the web development.
211.44 -> Obviously, when you're a developer, if you use
a library that prevents you from repetition,
216.96 -> so you don't write pretty much the same code
in different ways for different projects.
222.32 -> So that gives you the as the consistency to your
project, because just reusing the same code,
227.52 -> bootstrap takers of the browser console.
Bootstrap, they cares about the browser
232.8 -> compatibility, and I think it has the one of the
largest community in the world. So if you have
237.76 -> any issue with it, or if you don't know how to
do it, simply, you know, search for a guru for
241.36 -> it or just ask question on one of the one of the,
you know, Facebook groups or Stack Overflow, and
247.2 -> then you're gonna get answer very, very quickly.
And finally, you can customize it to your needs.
254.24 -> So these are the components which are there,
and we will be going for most of them. So we're
259.6 -> going to put our hands on the keyboard, and we're
going to start using them. So we're going to just
266.48 -> create something out of it. So yeah, I mean,
without further ado, the jump into installation.
276.88 -> In order to install Bootstrap, we need to navigate
to get bootstrap.com. And you can already see that
281.6 -> there are multiple way on how you can install
bootstrap on how we can add bootstrap to your
287.84 -> project. So we can already see that you can
use it with NPM projects. You can also use CDN,
293.84 -> or you can simply download it so
I'm going to show you all three
297.36 -> options. So let's start with the download option.
So I'm going to hit download button, they're going
302.56 -> to redirect me to this page, obviously, it might
look a little bit different because Bootstrap
307.28 -> is continuously updating the documentation.
However, it should looks more like this. And
314.88 -> now once we are on the download page, let's
hit this download compiled CSS and J S.
322 -> And let's save it. So this is going to store it
on my hard drive. And then let's go to this dist
330.48 -> folder. And let's unzip it to the destination
of our choice, I'm going to pull it over here.
339.28 -> Let's wait a second to unzip it. So as you
can see, it will contain CSS and J S. So let's
349.84 -> actually, let's leave it like this. Now
what I'm going to do, I'm going to open
353.84 -> the project in the Visual Studio code. Okay,
and let's create a new file. So I'm gonna hit
365.28 -> new file, index. HTML, now I'm gonna type
exclamation mark and press up. This is what
371.36 -> Emmet does. If you are not familiar with
Emmet, please check the tutorials on that,
376 -> because I will be using this, I will also explain
how to do it, but I strongly encourage you to get
380.88 -> familiar with it, because this is going to
speed up your development. And actually,
385.12 -> one way of doing of using or speeding up
this development is to use it like this.
390.32 -> So instead of typing the Learn the full formula
for linking the CSS and JS, I'm gonna just type
399.12 -> link and press tab. And that's going to give me
this, the stack prefilled. And I'm just gonna say
405.52 -> CSS slash, and I'm gonna search for Bootstrap
CSS file. So there's going to load the CSS,
412.24 -> and the same for the body for the GS before
the ending body tag, so I'm gonna type script,
422.96 -> source, and then hit tab. And I'm gonna do
the same. So J S slash Bootstrap, Bootstrap,
432.08 -> J S. Now, if you want to load just the bootstrap
J S, you need to remember also to, to install or
442.88 -> to add Popper, if you want to, like if you
want to use it, because bootstrap depends on
449.28 -> on the proper js to go to proper JS web
page, and then either download it or
456.16 -> loaded via CDN. But just to show you that it's
working, let's create h1, hello, bootstrap
467.12 -> word. And let's open this in with the live
server. So this should open the browser now.
475.04 -> And it will, I can already see for those who
are familiar with disrupt the default has
480 -> changed already. This is the default bootstrap
font. But let's check the console, where we're
483.92 -> going to see that our Bootstrap has been actually
loaded. By the way, I've just opened this console.
489.92 -> This is part of Web Developer Tools, I did it with
pressing combination of CTRL SHIFT R. But you can
497.6 -> also do it from here. So click on the menu, those
three lines over here, this hamburger so gold,
505.2 -> and then go to more tools, and developer tools. So
that's how you can open and close it. And now we
510.96 -> can see the error here. But this is regarding the
fav icon, which browser tries to log to the icon
516.16 -> which is shown over here. Obviously, we don't have
any, so we can skip this warning. And now if we
521.92 -> go to a network tab, and refresh our page, again,
we're going to see all the requests which our page
528.96 -> is doing. So obviously, except for the index html,
so the file itself the HTML file, which we just
533.36 -> created, we can also see that the Bootstrap CSS
and Bootstrap JS has been loaded successfully. Now
539.68 -> as I mentioned before, if we would like to use for
example, pop over component which relies on popper
546.88 -> dependency, we would have to also add properties
here. So before loading the bootstrap J S, or
554.32 -> there is the other option. So instead of
loading Bootstrap, J S, we can also do it by
563.12 -> loading the bundle. So the bundle contains all the
dependencies, right, so if you don't want to add a
569.68 -> separate dependency over here, you can simply load
bundle instead. Now this is the most basic way of
578.16 -> start using Bootstrap. So by doing only the
source file, now let's move to the next option.
586.64 -> If you don't want to download and move
unzip files to your project manually,
592 -> there is a faster way to do it. So let's
see how we can start using Bootstrap
596.48 -> using Cydia. And then again, there are two
options So here we, we can have option with the
604.72 -> bundled js, which contains all the dependencies.
Or we can use the separate option where we
612.48 -> have the bootstrap loaded separately, and
Popper, as well. So let's see how it works.
618.96 -> Let's create a new folder here, and
let's call it CDN. Let's open this in
625.52 -> Visual Studio code. Let's create a new file,
index dot HTML, exclamation mark tab, that's
632.96 -> going to create the basic structure. And now let's
just copy first, the CSS and place it within our
640.4 -> head. And now let's copy the bundled version down
below the body. And then again, let's add h1.
650.24 -> Hello, World CDN word, let's say, and let's open
this with view live server. And then you can also
659.2 -> see that this is working fine. Let's open the
console to verify refresh. And we have Bootstrap
665.52 -> CSS and Bootstrap bundle Minjae s. And as I
mentioned, instead of this single line over here,
674.96 -> we could also use two entries for the proper
and the bootstrap separately. So let's save
683.12 -> it. Let's check whether it's working fine. And
now we can see that the proper is being loaded
689.44 -> separately. Okay, now let's move to the
next installation option, which is NPM.
699.36 -> So for those of you who are creating your project
with the use of the package managers like NPM,
705.92 -> or yarn, probably that's going to be the
easiest way to add bootstrap to your project.
711.6 -> So I'm going to show you how to do debt. So let's
create a new folder, and PM, let's open this with
719.68 -> Visual Studio code. And let's quickly initialize
the empty NPM project. If you're not familiar with
726.96 -> NPM, I strongly encourage you to watch some
of the tutorials on how to use NPM. Because
732.24 -> that definitely gonna speed up your development
and with use of frameworks like React view,
738.8 -> and Angular, this is kind of basics, or basic
knowledge. So it's very wise to be familiar with
745.52 -> it. So let's do NPM in it to initialize our new
project is going to ask a couple of question. So
752.08 -> the project name was called bootstrap NPM.
And then, let's just accept all the other
761.52 -> default values, we could, we could decide upon
description and report and few other options which
767.44 -> are not required. At this moment. That's going to
create a package json file with all the settings.
772.8 -> And now again, let's create index dot HTML file.
And what we're going to do now we're going to
777.68 -> install the dependencies, I'm going to use npm
install Bootstrap, which gonna install all the
784.64 -> dependencies under node module. So as you can
see, we have node modules Bootstrap. And then
790.16 -> we have J S, CSS scss. So for those of you who
want to somehow customize the bootstrap properly,
798.88 -> this will be the way to work with so linking via
CSS, we will be using this. So let's now link our
809.84 -> our dependencies here. So again, in hat, let's
do link. And now we need to say node modules.
819.76 -> bootstrap this CSS, and then Bootstrap CSS, we can
also use mean, so minimize version of CSS. And for
828.4 -> the body, we're going to do exactly the same. So
link, script source, and then go to Node modules.
837.36 -> Bootstrap, this j s, this time, and Bootstrap
bundle J S. So this will give us again, bootstrap
846.08 -> plus the dependencies. So let's do h1 Hello
NPM word. And let's open this in live server.
861.12 -> So you can see already the font is there. And
let's refresh the network. So we have Bootstrap,
867.44 -> CSS and bhandal. If you don't
want to use the bundle, but
871.44 -> install the proper separate you can obviously
do it. So just type npm install at popper
878.96 -> J S slash core minus minus safe and that will
store it in under node modules. So now you will
889.04 -> see and two folders here so Popper, and Bootstrap
and obviously you can link it now to your project.
904.08 -> Okay, so if you want to understand why bootstrap
become so famous, we have to start aware of the
910.88 -> grid system because this was the real game changer
back in the days. And before we started learning,
917.12 -> because before, I'm going to show you how to
start using this in your projects in your website,
923.68 -> let me start, perhaps with some demo,
so you would better understand that. So
930.64 -> I've got the three examples here for you.
So to give you some insight to some feeling,
938.56 -> what this grid and what this Bootstrap is
about, and why so many people in website
943.84 -> use it, let's have a look at the following
example. So the the whole thing about the
950.08 -> responsiveness is that the content should adjust
to the screen of the size, which you are using. So
958.16 -> you shouldn't prepare like two different version
of the page, the same page for different devices
964.08 -> like mobile and the desktop is never one
which will simply be have like a water,
969.2 -> which depending on what you pour it into, it will
just you know use the whole space available for
975.6 -> it. So the bootstrap uses the bootstrap grid uses
columns to achieve that goal. And we can see here,
985.04 -> this is like the very basic example. So on the
big screen, when we have a plenty of space,
989.76 -> we can easily fit this main content here and the
sidebar, on the right side, right, we have a full
996.32 -> screen, we have enough space, we could even
make it bigger, larger. But however, what's
1001.28 -> gonna happen when we start shrinking this, you're
gonna see that at certain point of time, there's
1007.6 -> not enough space for you know, the entire content
to fit in right, it becomes smaller and smaller
1014.8 -> and smaller. And if you have a lot of content over
here, you might end up in a situation where it's
1019.12 -> just not enough, right. If you if you go to the to
even smaller, then what's going to happen, thanks
1024.72 -> to Bootstrap is the going to stack one below each
other. So if you open our Web Developer Console,
1035.2 -> and use this mobile option, you can choose one
of the predefined screen size. So for example,
1041.68 -> we're going to check for iPhone S II, and
then you will see how this actually looks
1046.4 -> on on the phone. Right. So you can also
check some tablets, I believe here.
1052.88 -> Yeah, even on the nest, Google nest hub.
So this is more of a like a tablet. And so
1059.44 -> this allows us to create very complex structure
like this one. So imagine the page, you have some
1066.64 -> magazine whatsoever with some sidebar, header,
footer, and so on. And thanks to bootstrap, you
1072.08 -> can make it to behave differently on a different
screen. So not sure if you notice that is that
1081.04 -> the some of them, some of them, they simply
disappeared, right. So our sidebar is just
1086.08 -> gone. So you can not only reorder things,
depending on the screen size, but also
1091.92 -> make them visible or invisible at certain
screen sizes. And finally, this last example,
1100.16 -> hopefully explain will explain to you the
concept of this columns. So what bootstrap does,
1105.52 -> how does it work is that bootstrap uses a rows
and columns. And within each row, you have
1114.88 -> 12 units to use to spare. So you can use them as
you like, if you want to spend the whole 12 units,
1125.12 -> the units of width on the single row or on the
single column, right. So you want this main
1132.08 -> content to be the full to have the full width,
you are free to do so you can just say that, okay,
1137.28 -> this column will take 12 units, however, you can
obviously divide it differently and use different
1143.36 -> proportion. So this example here, how does it
work and what you see here, this double XL,
1149.2 -> XL, large, medium, SM, these are the screen size,
and we're going to cover them just in a second.
1154.4 -> So this is what you have to get familiar with. So
bootstrap this defines a different breakpoints. So
1161.84 -> these are like this kind of, you know, area so we
can define the extra small are the mobile phones
1167.04 -> small, between small and medium. It's something
I know for example, a huge falls or difference
1173.36 -> with the larger screen like a couple of inches,
then the medium could be tablet and the large
1178.987 -> is going to be like desktop and so on. So you
can define the size of your column for each
1187.52 -> and every screen size. That's what you can see
over here. So this column has multiple properties
1196 -> or actually you could say multiple with assigned
to it. So uh, where we are currently at now is
1203.68 -> this size so it's double, large. So this is for
the screens, which are bigger than 1400 pixels.
1211.04 -> And obviously, we this is bigger. So if you
check it here, it shows that we are now at 1600.
1218.08 -> But see what's gonna happen if we start shrinking
below this breakpoint, right? So I defined it,
1225.04 -> I want this column to have the unit of one. And
that's why we can fit 12 columns next to each
1231.36 -> other, right, we have 1-234-567-8910 1112. Now
what's going to happen if I start shrinking the
1238.64 -> screen, and I'm going to reach to the breakpoint,
all of a sudden, the size of the call has changed.
1245.2 -> And now the second size has been applied. So
now, each of the column has a size of two units.
1254.08 -> So now, obviously, because as you remember,
as we said, this is 12. In total, we can
1260.56 -> fit on the six columns next to each other.
And that's what happened here, right, so
1264.72 -> 123456, and another six is Jasmine wrapped. Let's
continue. And let's continue shrinking the screen.
1273.12 -> And then we once we reach the next one, the
next breakpoint, we are falling into this rule,
1281.44 -> or this size, which is three. Now obviously,
if we have size of three, we can just fit four,
1287.84 -> because four times three gives us 12. And then if
I continue shrinking that, I'm going to get into
1294.64 -> next one, which is now Call MD four, which means
each column has a size of four, so we can fit
1300.24 -> three, if I continue shrinking, I will go into
size S M six, which means each of these has six.
1307.2 -> And finally, at the smallest screen, each of
the column will take the full available width
1314.32 -> for the screen. So this is how it was designed
is how this is so amazing. So yeah, let's see.
1321.76 -> Let's see, let's learn how to use this boot
bootstrap grid now. So starting with breakpoints,
1328.8 -> I already told you how does it work? So
bootstrap comes with predefined breakpoints,
1336 -> so you have six of them. And this
breakpoints are usually you know,
1341.2 -> they're adjusted to the most common screens,
so you can customize them if you want,
1345.92 -> you can change it. However, I think it would
be just wise to go with the default value.
1351.2 -> Now, what we will be doing some coding in a
second. So I want you to understand that this
1357.92 -> grid consists of three elements. So what we always
need, if you want to start using it is grid,
1364.08 -> it's a row. And these are columns, one or
multiple. So we do start with the container.
1370.96 -> So the container is going to be the very first
element which we which we need, which required if
1377.12 -> we want to work start working with the bootstrap
grid. And so let's start here. I have the starting
1389.04 -> template here with just loaded Bootstrap, CSS and
J, s. And let's, let's create a container here.
1397.12 -> So we could see how does it work and some
content and let's add I'm gonna add cross border
1409.44 -> and that's open as well. Okay, so, this is our
container, as you can see, it has some margins
1419.52 -> from the left and from the right side. So, this
very first thing you should know. So if you want
1424.56 -> to use the container to use the full width, so you
would have your columns starting from very left,
1431.2 -> you should use something called container fluid.
And what it does, it will make use the whole
1439.52 -> with all available here. However, you can
also do something which is called container
1446.96 -> combined with the with the break point. So if
you want to mix it so depending on the screen,
1453.2 -> you want your container behave
differently, you can obviously
1458.4 -> and easily do this with Bootstrap.
So what you're going to see here
1462.8 -> is this S container however, when we start
shrinking, and we go below the medium break point,
1470.96 -> then all of a sudden the container start behaving
like a container fluid right. So you can simply
1476.88 -> say that you want to have the container fluid up
to until certain break point for example large.
1484.24 -> So if you can see from this table, right, so this
is going to have the 100% until this resolution,
1492.88 -> the screen size is met. So this is the very
first thing is container. Now let's move to grid
1501.52 -> So the grid consists of rows and nickels row
there is not much special about the rows. So
1511.2 -> let me just use a bit of CSS here, I'm going
to add some styles, which is going to help us
1517.12 -> to see the columns. So we're going to see
them with your own eyes. So I'm going to do
1522.96 -> something like this. And let's start with
this very basic example. So as I said,
1528.64 -> within our container, we want to use a row.
And inside our row, I want to use columns.
1537.28 -> So you can use something as simple as call. So
I have two columns now and let's just say call
1545.12 -> one call to, let's see, how does it look
like. So now you see our actually, maybe,
1551.2 -> maybe you don't see this yet. But if we go to
inspector, you will see that this is our row
1557.6 -> and this container, so container is a little
bit wider, or, and then we have a row here.
1565.84 -> Usually you have, you can have multiple rows here.
But what is really interesting are this columns,
1571.84 -> and I'm going to show an example in a second
with few rows. But it what's going on here.
1577.2 -> Now, if we use just the column, bootstrap will
basically do the calculation, do the math, and
1584.96 -> it will automatically assign the proper width for
each column, which means that if I'm gonna give
1592.64 -> you more columns, it will calculate the width.
And it was going to use the equal values for each
1599.92 -> right. Now, if I want to have more, obviously,
I can just have more rows with multiple columns.
1608.08 -> You can also have more columns within a single
row, but probably you're thinking or you might be
1615.52 -> asking now, okay, what if I want to use a specific
size for a different column, and there is nothing
1622.96 -> easier than that. So, again, breakpoints comes to
the picture. And we can use, we can use a columns
1634.08 -> of a given size. And I'm going to show you
two different options here. So let's get
1639.28 -> back to our code here. Let's get rid of this
one. And now let's do one thing we can do
1645.04 -> strictly with with saying just call six, or
let's do something else, because six is equal.
1651.76 -> So let's do call four, and call four. So what's
going to happen, as you can see, we said that
1659.12 -> this should have with a four. And this also
should have a width of four units. And now
1664.64 -> if we add another column here, it's called
outdoor Bootstrap, it will obviously automatically
1672 -> fill up their this remaining space, and we can
play with it to achieve different results right.
1681.36 -> Now. This is, however, not as flexible,
I mean, sometimes you want to use it,
1690 -> because you want to, you want your columns to
always have the same size depending I mean,
1695.68 -> regardless of the screen size. So it is possible,
however, more often you will actually use
1704.16 -> variable with content, which means
that except for providing the size,
1711.44 -> you will also want to provide the breakpoint, what
does it mean? Let me show you how to quickly so
1718.56 -> if you do call, MD, and now eight, plus
MD, four, you're gonna see that we have
1727.68 -> this nice eight and four distinction here.
However, when we start shrinking your screen,
1734.16 -> below medium, what's gonna happen is that our
calls will take the full width of full width
1744.8 -> available within the container. And now as you
can also see, our container MD is changing to
1751.76 -> the 100%. If I stick it like this, to to keep
the margins here available, however, and those
1759.84 -> margins are gone below the certain level, because
basically, Trump assumes that if you are a mobile
1765.36 -> user, you don't really want to have this margin.
And if you want, then you should just do an ad
1771.28 -> manually. So I hope you do understand
now how does it work? Obviously, you can
1776.08 -> first of all, you can change this and
to something else, and so that's large.
1785.92 -> So this is one thing. So now we're going to
get full we've already on the medium size,
1792.08 -> and we're going to get this ratio on the bigger
size. However, the most important thing is that
1798 -> you can also mix and match the slides. Call
and the amount, let's say six, and here, six.
1808.8 -> Which means that we have now three use cases.
So a larger and larger than larger, medium,
1816 -> and smaller than medium. Right, I hope you're
getting this now. So we can, that's how you can
1820.8 -> create a very, very, very complex examples.
And the one, let me show you quickly, one
1829.76 -> from the, from the demo, which I was showing you.
So this is the example with those columns. Having
1839.28 -> very actually all the possible scenario, right, so
we have the size for each and every screen size,
1847.76 -> which allows us Whoops, not this one, this one,
which allows us to really, really create complex
1856.16 -> scenario where you will be just, you know,
changing the size of all of them. Okay,
1862.4 -> let's, let's continue, let's see what else we
have. I mean, there are different options for
1868.48 -> mixing this combs together. Let's see, and
let's go through the most common ones. So
1876.8 -> what you probably gonna need quite often is an
alignment. So let's have a look at this example.
1889.92 -> Okay, and now we need to do water. And let's
get rid of this two rows now for a second.
1905.44 -> And now let's make it a little bit bigger.
1912.64 -> So I'm just gonna do this manually. So now you
can see that our row has some height because
1924.88 -> of some content, which might be in there. And if
we want to align them to the top, we basically
1931.12 -> say row align items start. And then if you want
to do it in center, which is to the center, if you
1937.28 -> want to be aligned to the to the bottom, we just
say, Stop align items. And so this is this is the,
1945.6 -> this is the alignment, vertical alignment.
And obviously, we also might want to have
1952 -> the horizontal alignment. So coming back to this,
let's have this container row, and then let's have
1959.6 -> call of size two. And actually, we want to have
two of them, one and a two. And now, if we want to
1972.64 -> justify them into the center,
we will do something like this.
1981.68 -> And this will justify them to the center, right.
So regardless of size, they will be always aligned
1990.88 -> to the center. And there are different options,
which you can obviously use here. So you have
1997.6 -> around between and depending on the use case
you would like to use. Okay, and let's move
2005.04 -> to gutters now. So the gutters are responsible
for the for the distance between the columns
2014.16 -> here. So let's, let's use this following example.
Hold on and just add this one, what is the
2029.52 -> base Okay. So here we have gutters, and actually
2042 -> let me reset this. So now these are gutters
and I'm going to add some custom style here.
2049.44 -> So you could see one more of think,
because it's not easily visible.
2060.32 -> So within each column, I have created also
the extra div with the background so you
2067.68 -> could see how actually the content
goes within within the div itself.
2075.6 -> Okay, so before we start talking about the
gutter, I need to explain one thing, which is
2082.48 -> used a lot within the Bootstrap. Basically, when
you've seen me using this margin, right, and I
2087.68 -> said m y, what does it mean this mean that they
want to have margin applied in the y axis. So it's
2094.8 -> for the top and for the bottom if I would say m
x, I was talking about the left and Right. And
2100.64 -> the same applies for the gutter, right. And by the
way, we don't use gutter on container, we do it
2105.28 -> on row. So let's start with setting this to zero.
Okay, so this our default spacing and spacing and
2117.76 -> padding and margins for the, for the columns
and the grid bootstrap grid. And now if we say G
2127.68 -> zero, we're gonna set them to, we're going to
basically reset them to zero now if I, let's see
2133.92 -> how it's going to happen, if I'm gonna be changing
this in the x axis was going to change. So this
2138.56 -> is one, this is two, this is three, this is four,
and this is five. So basically, we are eliminating
2147.84 -> this budding cure from the left and the right,
let's say one, and five, right. So this, how you
2159.36 -> how you change this in the x axis, and
let's do g y, and then a set from 1345.
2170.24 -> So this, you need to understand what you need
to understand is that she acts are the gutter
2176.08 -> in the exposition works actually, here on this
on the space between a column and row, and in
2183.84 -> the y position, it's actually working in between
the columns here, right, so they're wrapped up,
2189.76 -> and it's talking about the space over here,
which you can see on this example. Obviously,
2196.4 -> you could try to do it with the margin and padding
duty, which gonna cover in a second. However,
2203.6 -> this is just an easier way which was introduced
in in the newest bootstrap to work on the more
2213.52 -> complex scenario, when you have multiple columns
and want to, you want to work and maintain the
2219.04 -> spacing in between them. Okay, so let's move
to the first component. So I'm going to cover
2232.8 -> the components from the most common one. So let's
start with buttons. Because we use them a lot, you
2239.2 -> can also see them being used here on the bootstrap
docs page. So let me quickly open the workspace,
2247.2 -> I'll create a new folder for components. So you
can easily reuse my code if you want, if you want,
2253.04 -> you can download it from the GitHub. And so let
me create a new file for a button. So I'm going
2259.28 -> to call it HTML. And I'm just going to copy
paste the basic setup. Okay, and open this
2266.96 -> in the live server. And now, let's, let's grab one
of the buttons actually, you know, the more you
2274.96 -> work with the Bootstrap, obviously, the more you
get familiar with it, you will know this syntax by
2280.4 -> heart. So if you start typing button, and then
add some classes like btn, and then the color,
2287.52 -> we're going to talk about the colors very soon.
But now for your information. Bootstrap comes with
2292.8 -> predefined goals, and it calls them like primary
secondary success, danger, and so on. And you can
2298.08 -> adjust this course we're going to cover that a
little bit later. For now let's just use primary.
2303.28 -> And let's use some do something like click me. And
let's see how it looks like. So you can see that
2308.96 -> you have this button start right. So obviously,
if you would go with the just simple button,
2319.12 -> it looks like this. And simply by adding these
classes BTN. And then color, you are getting this
2326.08 -> status over here. And you can see more of it over
here. So let's just add few more, so we can see
2333.6 -> them. Right. So these are different predefined
buttons. Now, bootstrap allows you to easily
2343.6 -> a adjust both color as well as size and
few other properties. So for example,
2351.52 -> here we can see that from guns, we have
the so called outline buttons, right which,
2357.68 -> which which have ratio, just let's just do
it like here. So I'm going to add the new.
2363.52 -> I'm going to add a new row here into
this container. Let me add another one.
2372.08 -> So we could see them next to each other or one
below the other. So this is the primary and his
2378.48 -> primary outline, secondary and so on and so on.
Here you see the light or actually you can see
2384.08 -> it so it's used in certain circumstances. But
other than then just the outline. We can also
2394 -> easily adjust the size of our button. So if we
want to do that Under container. By the way,
2402.24 -> I'm going to add some classes here and my five,
we're going to learn about it as well, soon,
2409.68 -> but this will give us some space and cure.
So if you want to do something larger like,
2416 -> like the larger or smaller button, we can simply
use this btn large, so that we just use this one
2422.56 -> here. And the same for small. So if we do btn SM,
we're going to get the small and let's add, just
2433.52 -> compare all together, let me just remove
it. So just call it irregular button.
2440.48 -> So you will see the difference, right. So this
is large, this is regular, and this is the small
2445.84 -> button so you can do it. You can also disable any
button simply by adding the disabled property. And
2453.92 -> as you can see, that's also going to be started,
right. So it's going to looks like now this,
2459.92 -> there are a couple more so you can you have the
Blog button. So if you want to have the full wave,
2466.72 -> you can use this blog buttons. And actually,
you know, the button is commonly very commonly
2473.44 -> used within bootstrap because, for example, you
can use it to toggle state. So as you can see,
2479.84 -> here, we have the active. So if I click on it,
it becomes active, so you can see the color is
2485.36 -> changing. And then if I click again, it is getting
deactivated. And lots more because you also gonna
2495.36 -> see, for example, buttons being used as a drop
downs, for example, like here. So it's really,
2504.72 -> it's really wise to get familiar with with
it. And then they'll their methods related
2511.84 -> to the button system is a bit more advanced.
So we're gonna leave it for for the lighter.
2518.16 -> But one important thing regarding your buttons
is also that you can like everything actually in
2523.2 -> Bootstrap, you can easily adjust it using
or adjusting the variables, which comes
2529.84 -> with the sass with the bootstrap Sass files.
So if you want to change the generic look
2536.88 -> of the of buttons, or you want to create new
ones, you can also do it with the use of a CSS.
2547.84 -> Next, very commonly used components are cars,
so you're gonna see them almost everywhere.
2553.36 -> So let's see how they look in the real world. So
here is the basic example. By the way, if you if
2561.36 -> you check the docs, you can see that this is like
it's a really huge, tremendous amount of examples,
2568 -> which you can use with Bootstrap. So we're gonna
cover the most important one. So let's start with
2572.4 -> the the examples. The basic example shows us the
one of the very often seen cars, so the cart with
2580.16 -> the image title, and some kind of photo isn't
exactly the footer. But yeah, let's, let's call
2586.48 -> it this way, I'm not sure what the result are in a
second. So let's copy this one. Because it's gonna
2592.56 -> show us the issue with what you're going to face.
If you start using this for the very first time.
2598.16 -> Let's add some image here. So I'm going to use
image Pixon. for that. So this is very interesting
2606.88 -> service, which allows you easily to use some
images. So you could have the real image,
2614.4 -> and you can easily change the size. So here
we have 200 by 300. So let's see how it looks
2621.68 -> in our case. So this is the card, actually, we
didn't want like this, we wanted to have, say 300
2630.16 -> by 200. So something more like this one, and add
some spacing here. As you can see, every time we
2639.2 -> refresh, we're getting some random page. So it's
it's pretty cool to see this used, it's kind of
2645.12 -> testing, right, because you can already see we
have a different option. Now talking about it,
2649.92 -> let's jump into the sizing. So because here our
cart has a certain sign as you can see that this
2659.52 -> is because we added some stuff over here. If we
remove it, you're going to notice that if you
2665.12 -> want to start that was what we're going to do in
a second if you start typing this just by hand,
2671.04 -> right so if you just create these in this class
card, which is actually making a card looks like
2678.16 -> a card, giving some borders to it. You're going to
notice that this gonna happen so it's gonna take
2685.92 -> the full away if available. So how we can how we
can work have done let's go to sizing so there are
2695.44 -> a few options. So first is obviously already known
to you So if you use a row, and then you're gonna
2702.64 -> add, let's say a call to it, and you're gonna
wrap up your card into it. So you will be able to
2712.4 -> decide upon the size of by using simply great. So
depending on the column size, you're going to get
2718.88 -> smaller or bigger carts, then the next option
here will be to use these utilities. So let me
2729.68 -> get rid of this one, or let's go with the another
row here. And let's get this card again from here.
2742.8 -> So let me copy this card entirely and paste it
here. And now it will take the hallway hallway
2750.32 -> available. And now we can use the utility
which we're gonna cover. But you can already
2756.4 -> learn this one, which is w 75, which stands for
with a 75%. And you can see this example here,
2764.16 -> I'm not sure you can clearly see this, this
is this stands for 75%, which is over here.
2769.84 -> This one stands for 50%, which stands over here.
So let's give it a try. Let's say 50%, we want to
2775.44 -> have our cart fulfill the 50% of the space here.
So this is the second option. And the third one
2784.48 -> you actually seen because we've been using this
around before, so let's just add it for the sake
2792.08 -> of consistency. So you'd have all your cards in
all possible scenarios. So let's add just stars.
2806.96 -> And now we have three under. Okay, now
let's get back to the to the basics. So
2814 -> let's go with the new row over here. And let's do
a call tree for the sizing. Let's see how the very
2827.28 -> basic basic card looks like. So let's do just
the card. And let's do some Lorem. Five, let's
2836.8 -> give it here. Okay, and let's add some actually,
you know what that mean? Give it to the top,
2844.16 -> right, and five, and let's get this one to
the top. So we could easily see this one here.
2853.92 -> Okay, so it's healed up. So this how the,
2857.12 -> how the how the cart looks like. So it doesn't
look good yet. But what are we gonna get,
2865.04 -> if we're gonna add cart body, that's going to
look much better than that we've got before.
2876.4 -> And this is already looking, giving us some nice
look, it has some padding, it has some margin. So
2881.68 -> this is something which sometimes some people
call panels, right, so we could have those panels
2886.32 -> over here. Now what we can do, we can add
certain elements. And it's very cool because
2894.56 -> you can compose your cards from the sub
elements as you wish, right. So if you want to,
2902.8 -> if you want to add, for example, the image to
our cart, you can easily do that by adding this
2910.96 -> still within our cart. But above body can add
image with the class cart, image top and reuse
2923.6 -> image here. And this will automatically link this
image to our cart. I'm going to skip the list
2937.36 -> groups for a second. As you can see this, these
are kind of few panels connected to each other.
2944.16 -> And let's move to the header and the footer
section because this is interesting. So let's
2953.92 -> get the the another cart over here. And
instead of the image, let's use a cart
2965.12 -> header. So this is what we're going to add here.
So let's get rid of this image here. And let's add
2973.52 -> cart header instead. So
this is our current header.
2979.52 -> And it's going to add as nicely looking color.
Now since we have a header, obviously, we can add
2987.36 -> some footer as well. So let's use the example
of this one. Let me just copy paste this one.
2995.36 -> So let's add it here. Here we have a text muted.
Let's see how it goes. Without that first. So here
3002.64 -> we have footer. And if we add this text, muted it
just slightly mute this to make it less visible,
3010.56 -> as this is the footer, obviously, and this is,
we don't want to see this, like not screaming,
3018.24 -> to our use, right. So this is how you work
with that. And I think you can have really nice
3026.8 -> results. Using that, let's have a look at
predefined examples, because they're gonna
3030.72 -> give you also some idea of what you can achieve
with that. Here are examples with cards within
3037.04 -> the navigation, we're going to cover that in
the navigation part. So here you have also the
3042.72 -> image examples and how to work with them. But
let's slightly move further to this example. So
3050.64 -> here we have this horizontal card, which looks
really, really nice. So let me add another call
3059.12 -> over here. So let's call three asbestos
example. And let's just grab the image again.
3070.08 -> However, you don't have image here, we have
an image here. So what we're going to do
3077.6 -> here, we're going to replace this image, or
actually, this three dots with image now change
3084.4 -> the ratio. So I'll have 200 by 300. Now, let's see
how it looks. I think it's too small. So that's
3095.68 -> because probably here
3101.76 -> we would like to have it slightly bigger. Yeah,
now it looks better, right. So now we have three
3106.8 -> plus three plus six, it's something to 12 is
good. And here we have this horizontal card. So
3113.12 -> I think it really looks nice.
But other than that, we also have
3120 -> something which is called card groups.
So very often you will see and we're
3124.24 -> also going to build it at the very end of the
scenario, we're going to build a simple page.
3128.4 -> So you probably will see something like this when
you have a page and then you have your blog. And
3132.8 -> let's say you want to least like last three
articles on the page, you would see something
3136.56 -> like this. So what you could do, you could
create like three columns with the size of four,
3142.4 -> so four plus four plus four, or it could use card
groups, which would also looks nice. So again,
3151.6 -> it's pretty much the same as the normal card,
right you have a card here, the only thing you
3156.08 -> have to remember is to add this class card group
added up. So let's have a look at this one now.
3162.56 -> So we have a row here. And let's add a row,
the row with some margins in between. And now,
3172.32 -> let's replace this one with the image. So
I want to have this, this, this and that.
3185.6 -> And I want to have this image here. And this
how it looks like I think it really looks
3198.64 -> it looks really, really nice. So this is this,
this card groups how the looks like. And as you
3206.08 -> can see, there are many, many more here is the
example of of the cards next to each other. So
3213.36 -> obviously, we're not going to cover all of that,
because there's, there's, there's there's a lot
3218 -> examples, but let's get back to a few more
examples, because they're also interesting,
3224.08 -> you will probably see them in for example,
like admin dashboards. So you can have this,
3228.8 -> this card having different stats, so you
can reuse the same colors, which you've seen
3235.76 -> when it comes to buttons. So simply by adding
this classes like background primary, to our cart,
3245.84 -> right, so here we specified, this is just a simple
card. Let's have a look at this example. Um,
3252.16 -> so let me add my hand see what we have space here.
Let's want to feel it added here before below the
3261.68 -> card group. So let's have
another row and have call three.
3268.64 -> And let's have this card here and
let's get rid of this for a second.
3275.76 -> So this is like normal basic cart now, right?
But if we start playing with the colors, so I'm
3283.28 -> going to revert this text white and the background
primary. What are we going to see is that it
3290.32 -> will change color to something like dad. So let's
duplicate this one. So we have called 312 Troops,
3298.48 -> I know, we all should have four guards 1234. And
let's change the colors of it. So I like this,
3310.4 -> this dark one. So let's go here and choose
background dark and text wide for the second one.
3318 -> So underneath, this is the
first. So this is the second one.
3327.28 -> By the way, this m V stands for margin bottom,
so it's adding some margin margin on the bottom
3334.56 -> here. Don't worry, we're gonna cover margins.
In few seconds, you can see no black one.
3341.28 -> And yeah, let's just do two more. So let's
say info with the text dark for the next one.
3352.56 -> And for the last one, that's everyone to have text
wide and dangerous. So this is the last card here.
3363.76 -> And while these are our
cards, and again, another row,
3370.32 -> for last examples, let me just copy them to
make it faster. So let's just do 123 and four.
3385.44 -> So this row, it's pasted. And
these are examples of the outline
3392.72 -> cards. By the way, it doesn't work here that
Miss, you know, it actually does it just
3399.76 -> looks this way, right? Heather? No setting
does it work, you're probably because
3415.28 -> they have to be placed within a call not row. So
here, we're gonna have them. Yeah, so this are,
3424.4 -> these are border with cars or cars with border,
and different examples of this. So as you can see,
3433.12 -> there are plenty of variation over here, which you
can use, obviously, you can also easily align them
3440.72 -> and play with it. And like everything. In
Bootstrap, you can also work with SASS variables
3448 -> to change, for example, the distances
between cards or, or background color
3454.16 -> or anything like that. So yeah, I mean, I really
liked this component. And I've been using this
3461.92 -> a lot in my project. So I strongly encourage
you also to have a look because it's very,
3468.88 -> very useful component. Okay, now we'll jump to a
different category, which is content and exactly
3478.4 -> typography in the Bootstrap. So let me
quickly create a new folder to organize
3485.76 -> it slightly. So we'll move to content. And I'm
just gonna grab the index. So our template from
3495.36 -> components, and let's open this in Visual
Studio code. Okay. So bootstrap comes with
3507.36 -> predefined styles for the for the different
types of typography. So starting with headings,
3518.24 -> just copy paste this one, we also need to create
a new file here typography. So this is one of the
3525.52 -> so called ut utilities and Bootstrap have more
of them. Now I can paste it, you're going to
3538.8 -> this one, and then on ready to pull it within
our container. So let's have a roll here.
3548.64 -> And let's save it open. And let's see what's
interesting about the about the heading. And
3558.56 -> actually the whole typography is that
unlike almost everything in Bootstrap,
3563.28 -> it is responsive, right? So let's check this
element. And let's see the computer size.
3572.64 -> computed styles. So let's have a look at the font
size, which is going to be 31 point 95 pixels.
3580.08 -> However, if I'm going to start adjusting the
screen size, you can see that this value is
3587.52 -> actually changing. So now it's 40 pixels. And then
if we shrink it, it's going to become smaller to
3597.12 -> what is it now 24 pixels. So This is this is also
very, very useful why working with with Bootstrap,
3606.64 -> because obviously, it looks just better it adjust
to the screen size. Now, what bootstrap offers you
3614 -> as well is the class which will make the actually
any element to look like the hand. So there are
3622 -> situations, there are situations where we don't
really want to have use h1, h2 for, let's say
3632.64 -> different reasons like SEO. So let's say these are
paragraphs looking like headings. And if we just
3643.52 -> apply this classes like h1, h2, h3, we're gonna
get exactly the same look right, so we have it
3651.12 -> here, actually, we can do it even better. So let's
do it like this. So we could see the difference.
3658.88 -> So these are headings, let's call them real
headings. And let's call MD six two times,
3674.4 -> let's move this one inside first
comb and this one into the other one.
3681.12 -> So, now, we should see them side by side
3686.32 -> let me close this one and slightly make it
bigger. So, now you can see that they look
3695.2 -> exactly the same. So, if you want for
some reason to your whatever paragraph
3702.08 -> looked like heading you can do it with
use of this will serve also comes with
3708.88 -> this display headings. So there are slightly
bigger so, if you really want to something
3713.2 -> to stand out to be more visible, you can do it
with what is this place. So, let me just show
3721.12 -> you that. So, you use classes like display one
display do and this will give you that result
3728.96 -> what else obviously, it comes with a lot of inline
text elements in line tags. So we can highlight we
3738.72 -> can actually cross out text you can ask why why
they are like duplicated right. So we have to for
3750.72 -> for this one right. So, here you have this this
text is meant to be treated as deleted, and this
3757.44 -> line of text is meant to be treated as a lot
longer accurate. So, the difference is actually
3765.04 -> semantics, right. So, for example, in case of this
s here, it represents elements that are no longer
3773.76 -> relevant or no longer accurate, while this one
was deleted. So, this is like a very, very subtle
3782.72 -> difference. But this is what is it all about. So
that might be new to you. But there are different
3790.4 -> since 1805, that is nothing really does matter. So
you should carefully use it. But other than that,
3797.12 -> as you can see you have support for
like, you know, making the bold or
3803.2 -> you know, highlighted text with the use
of outsell let me just add it to our
3809.6 -> to our example. So again, we could let's
have a new row here. And let's have
3818.56 -> just put it like this. Right, so we're going to
have all the examples in one place. As always,
3828.56 -> there are more many more examples, like
abbreviation like blockquotes. So maybe
3834.96 -> maybe let's have a look closer look at the blog
close as they might be useful for you. So oh grow.
3846.08 -> So whatever we want to use blockquote. On let's
do some paragraph and Lorem here. So that's how
3857.12 -> the normal looks like so it doesn't really
look different. However, if we add this class
3869.28 -> to it. Now, it looks differently. So this is the
this is the example over here. So this is the
3878.8 -> basic blockquote however, you can also use the
more extended version with a footer right like
3887.92 -> here, so we can add this specific caption with
the class blockquote footer which will make it
3897.12 -> looks differently. So let's do this. Side by Side
call. And the six, actually, I want to have two,
3907.04 -> or maybe, let's say even, or I'm gonna change
the size, I'm gonna have three of them. So the
3915.76 -> second one is with the footer. And this one
will be the basic one. And then the one, which
3924.96 -> shows you how you can actually align text with the
use of the text alignment. So we're going to check
3932.64 -> that here, you can already see that by using text
center or as the plastic center on our element,
3939.44 -> we can, we can change the alignment of the
text. So let's use the last example here. Right.
3948 -> So let's just do it this way, just to show you how
to do it by yourself. So I'm just going to add to
3955.12 -> this feature class, text. And, and the reason
the reason it's, its end now is because and not
3965.44 -> right and left is because since was five, there
isn't support for art, TL. So from, you know,
3973.92 -> in many countries, we do read from from left to
right. So in your case, it will be from left to
3979.68 -> right and live if you're watching me on the
camera, but obviously, this is not the case
3985.6 -> for all the countries. So in the in the Arabic
countries, it's the other way around. So while
3991.2 -> they added the support for the RTL, they also had
to change the naming because obviously the left
3997.68 -> doesn't necessarily always means that so if
you use RTL than then it could be confusing.
4004.4 -> Now with a start and end, and you're going to see
more on that, when we go to the spacing utilities.
4011.12 -> Now let's just have a look how it looks
like. So here are our block quotes,
4015.76 -> you can see them here and this one is aligned
to the right side. Finally, bootstrap offers you
4025.6 -> an option for the for the list. So if
for some reason you don't want your list
4033.6 -> to have any kind of you know, dots or points,
so you can use this list unstyled here, so
4043.92 -> let's do it quickly. So we are going to
have you l aware of class. Least unstyled.
4055.12 -> Okay, and inside that I want to have ay
ay, ay, with the content. Line Number.
4075.04 -> And we want to have like five of
them. Oh, no, we want to have like
4085.36 -> $5, obviously. So now we're going to
have this line over here. And then again,
4093.44 -> I'm going to quickly do the new order list.
And with some numbers here, a lot multiple by
4104.96 -> so three, oh, by the way, if you're wondering
what I'm doing, I'm just using an iPad,
4110.24 -> which allows me to create
easily the different amount of
4121.44 -> elements simply by using this shortcut. So if you
don't know that, I strongly encourage you to check
4128 -> the tutorial on the AMA, because it's gonna make
your life much more easier. Why did it like this,
4134.4 -> I wanted to show you that this class applies only
to the to the to the immediate choice of those
4142.64 -> of any element you use it on. So this sublines
they already have styled again. And then finally,
4150.32 -> if you want to use inline, so this is the case
usually when you do some kind of navigation,
4155.28 -> right? So you want to have like a nav bar right?
What they have over here, for example, this is the
4160.56 -> this could be used or created with the use of
of the list, inline list. So all the elements
4167.36 -> will be basically printed next to each other
and no, not one below the other. So again call
4175.04 -> and the six multiplied by two times. And I'm
going to get this one from the documentation.
4182.88 -> And I'm going to go grab that one from here. And
this will show us this next to each other. I'm
4189.76 -> going to add some spacing later on for you. So
when you when you refer to this file later on,
4196.32 -> you will clearly see so I'm going to add
something like this Heading One least
4205.92 -> styles and gutters or why? Right, so you'll
have this separated so you can easily refer
4218.72 -> to it and realize what we are actually talking
about. Maybe he can barely find a word here
4228.48 -> we'll get some space in between. Okay, let's
move on. So what is also important to mention
4238.64 -> here is that, as I mentioned you, in the beginning
of this section, the fonts are responsive.
4245.36 -> So this is cool. But bootstrap went even further
step farther. And they came with this responsive
4254.32 -> font sizing. So RF s project. So this is a
separate project. And this you can find it
4261.6 -> on GitHub. Actually, this is really cool. Because
that allows you to change not only the font size,
4269.12 -> and that's how they came up with the
name, right. So originally, they wanted to
4273.36 -> adjust the font size, depending on the screen
size. However, now they they went even further,
4280.08 -> because initially it was default, the look to
resize the font. But nowadays, RFS is capable for
4286.32 -> scaling, actually, you know, basically every value
of any CSS property with unions like no margin,
4294.32 -> pilings, border, radius, and so on, and so on. So
let me just show you a quick demo over here. So if
4301.44 -> you if you if you watch carefully, you're going
to see that when the screen resizes over here,
4306.48 -> also the different div different things are
changing cure. So not only the font size,
4313.6 -> but also the padding and margins. And
this, this, this make it you know,
4318.88 -> to look much better. For example, on the on
the very big screens, like you know, 4k Now,
4326.08 -> we are going to go into this one because it's
a separate project. But I think it's worth to
4333.04 -> just just just be aware of the fact because
you might need to do certain point of time,
4341.2 -> when it comes in, you have to work on the phones
or some padding to make them look good are on
4349.76 -> for example, very, very, very huge screen. So
that's where this RFS might be very useful.
4359.92 -> So let's move to the images now on
Bootstrap allows you to easily make images
4366.32 -> responsive. So let's have a look at the
following example. So I'm gonna create
4373.92 -> a div with a border. So you could
see how it looks like. So let's have
4380.64 -> let's have a div, we're going to give it some
custom styles. So for the sake of this tutorial,
4387.76 -> so with let's say 40%. And also I want to have a
border, five pixel red solid, so we could see it.
4399.76 -> Okay, now obviously, we need some content into
it, so we could see it. So let's add image.
4408.32 -> And let's add some logo here. Now we can
clearly see that this is our, this is our div.
4418.88 -> So if we check this inspector, now, it's become
even smaller now because inspector pop ups here.
4425.12 -> So now the 40% is even smaller. So yeah, this
is this is the, this is the diff, right? This,
4433.36 -> this part, the bluish one. And this, this, this
orange is not. Okay, so as you can see, sometimes
4442 -> the image the content, just simply go out of
our borders. And what you can do, how you can
4447.84 -> quickly fix it is by simply adding a class to our
image called Image fluid. And this will make our
4456.32 -> image responsive so yeah, I mean, that's, that's,
that's really basic, but also very, very, very
4462.4 -> important. Feature feature. Then if we go to, if
we go farther, let me do h1 and y five and let's
4476.96 -> go to the top now and let's let's have this image.
However, I'm gonna change this to image thumbnail.
4493.28 -> So that will give our image something which
is let me enlarge it here. So it's gonna give
4503.84 -> this style this border, rounded
border around it. Let's also do
4513.92 -> let's make it a little bit more. So what are the
use of with 25? Let's just make it slow. Now,
4520.16 -> finally, the last option you can see here is
how to align how to actually align images with
4530 -> use of Bootstrap. So let's do that. Now. Let me
close this one. And then let's have alignment.
4541.6 -> So basically, we're we'll be using the
float utility, which we're going to discuss
4549.6 -> in a second. So yeah, let's just do, let's just
copy this image again. So this was the one.
4556.56 -> And let's change this one to the float, let's say
out. So this will move on, let's make it smaller.
4578.08 -> So this will move our image to the end.
And now obviously, if we are working with
4584.32 -> the floating, we need to remember to use the
clear fix. So clear fix. So because otherwise,
4593.2 -> maybe they can show you that. Let's
have some paragraph him here. Otherwise,
4600.64 -> other elements will be floating around. So
maybe I will even use Lorem 50. So you could see
4609.12 -> what I'm talking about, oh, it's not
enough. Okay, fine, let's use 100.
4618.32 -> So this is floating our image. So now,
if we add the video fix over here,
4629.52 -> basically, that's gonna fix that state. Now,
okay, let me get rid of this paragraph. We
4635.6 -> don't need it anymore. Because I want
to show you also how you can actually
4641.12 -> center the image with use of bootstrap
classes. So let's get this image again.
4649.6 -> And we can simply do that by adding by using the
Flexbox. So diblock, X, outer, and through 25.
4665.12 -> And this will center our image like this one. One
more thing, actually, I didn't mention is that we
4672.88 -> can easily for example, make our image or give
our image rounded corners, like here, simply by
4685.6 -> by adding this rounded class to it. And last
but not least, if you're working with picture,
4695.6 -> it's also supported by Bootstrap. So here, you
have the syntax for working with the pictures
4701.52 -> and making them also responsive, like
we did with the previous examples.
4712.16 -> Okay, so now let's move to the utility. So
because this is also one of the most important
4717.2 -> part of the bootstrapping, Ash, especially
taking into account that recently, downwind,
4723.12 -> become more and more famous. And this is
so called utility first framework. So I
4728.88 -> would like to also show you that a lot of this
utilities options are available within Bootstrap,
4735.52 -> as well. So we're going to go through the
utilities. But I want to start, as always,
4740.32 -> from the most, I believe, the most common and most
important one, which is spacing, however, we're
4745.76 -> going to go through all of them. So what I did, I
prepared this sample div with some content here,
4755.12 -> which is actually styled using styles.
And I'm going to recreate this for you
4762.16 -> just using the bootstrap classes. So we will
achieve exactly the same effect with with the
4767.76 -> use of the bootstrap utilities. So let me do now
let me do it. Like this. I'm gonna grab this div,
4777.2 -> and I'm gonna add it below. And let me get rid
of all stuffs over here. So we don't need this,
4787.2 -> this that and nor this, okay, so we have
just simple DS here. And let me also add
4801.2 -> some margin here, actually, we can already start
with discussing the spacing. So you've already
4809.2 -> seen me using some of them in the previous parts.
So let's quickly go through the to do. So it's
4817.44 -> fairly simple, because you stay in order to use
this utility, you simply add the proper class like
4824.16 -> Mt five, for example, which will stands for margin
top five, and this will give us some a little bit
4831.12 -> space over here. Now as you can see, already,
M stands for margin P stands for punting. And
4841.68 -> there are different way you can combine it. So
like we did, so usually you start with property,
4848.56 -> and then side, so you do like margin, and then
side which is stopped, and then the value, so
4854.88 -> the size is from zero to five, it's also accept
outer, which we're gonna use in a second.
4861.68 -> Basically, bootstrap defined a spacer, so
like a basic value, and different different
4867.76 -> numbers in different values here from zero to
five, are actually multiplying this by default
4872.96 -> variables, like here is 25% of the basic spacer.
So this one will, will make it to 25%. And then
4880.4 -> it will the two will multiply all by half. So
it's actually it's gonna, it's gonna use half
4887.12 -> of the value three is the default spacer, and then
a foreign fiber selector, again, a bigger amounts,
4893.6 -> like one half times more, and a three times more
than the basic value. So well, yeah, let's, let's
4900 -> see, let's see, how does it work in practice.
And also, by the way, this is something which
4904 -> I also mentioned to you already. So bootstrap in
the version five, change the naming convention,
4910.08 -> so before we had top, bottom, left, right, so but
now it starts at the end because of because of
4918.24 -> RTL, right, so right to left or left to right. And
depending on which one you use, before we go to
4925.44 -> the spacings. Let's, let's, let's add some border
here, because that will just make it a little bit
4934.48 -> easier to see what we want to achieve. So what
I'm going to do, I'm going to add the border
4942.88 -> to this, which will give us this border,
it's very light, actually, I lost the
4950.08 -> top margin. Okay, that's cool. And now, to make
it a little bit thicker, I'm going to add border,
4957.68 -> one to define the size. And also I'm going to
do border dark. Okay, so this is going to make
4965.68 -> it slightly bigger. So this is what you can see
here. Now you can again, obviously define whether
4972.24 -> you want to have the entire border or on just
the one of the borders or one of the corners. So
4978.96 -> you can obviously define color of the border like
we've been doing before. So with the colors, you
4987.04 -> probably already noticed that we've been using
this primary secondary success danger and so on,
4990.4 -> let's have a look how the colors utilities
looks on work like so we have this basic colors
4995.92 -> defined, and we can use them for both coloring our
content like text, or also to do the backgrounds.
5006.8 -> So this is here background, which uses
exactly the same, you know, colors,
5011.36 -> it just uses different classes. So background,
primary background, secondary, and so on, and
5016.16 -> so on. There are different color variations over
here, right, you can even specify the gradients,
5022.88 -> you can you can specify the opacity.
So this is all possible with Bootstrap.
5030.4 -> Now talking about the colors as everything is
almost everything within a bookshop, it's it's
5035.52 -> customizable. So there are there are variables
which you can adjust if you want to change the
5040.56 -> skin color. But you know, I hope you get to the
point that if you're using ever like you know the
5046.96 -> primary secondary and so on and so on. So
once we define decide to change the color
5052.48 -> scheme to change the layout of your page in
the future, you just changed a single value
5056.8 -> and it's going to update everywhere in the in
the page Okay, so we've got this one what we
5062.88 -> are missing to have the same kind of result over
here we need to also shrink it a little bit. So
5071.52 -> let's do with a wave the size. So if we
go to the sizing god you're gonna see
5078 -> something which I already used before. So
I want to enter W shifty, we're gonna set
5084.32 -> this width to the 50% right, and we
need to center it, we need to center it.
5091.28 -> So for for the centering and this. We also did it
in the previous but let's just go to the position.
5102.32 -> So our position something different
positions is where you can define
5109.2 -> your, your position value like static relative
absolute, what we're looking for is within the
5118 -> spacing. So where we just started, just don't
below, it's horizontal centering. So we're
5123.28 -> going to use an X outer which going to set our
margins to, to auto from on both sides or so m x,
5134.4 -> I think I didn't mentioned it. So I think is a
good time to say about it, because maybe you've
5141.2 -> seen it already. However, except for the specific
directions like a top bottom, a start and the end,
5148.32 -> you also have the excesses, right, so the X will
work on the x axis, and the Y will work on the Y
5154.72 -> axis. So the horizontal and the vertical one,
okay, so now once we have work on the on the
5162.72 -> alignment, and the border, let's see how the this
partings look, in work. So let's do, let's do
5175.68 -> something like this, let's say we're gonna
have padding left, actually start five,
5182.8 -> this is gonna add as this padding from the
left side, which you can see over here,
5187.6 -> obviously, we could do it from the right
side. So then we need to switch to end
5191.84 -> binding and we can do the top, we can have
different values. So we could have B, D,
5197.68 -> five and P start on three, let's say. So we will
see the divisor and difference. Then again, we can
5205.12 -> do p x five, which is going to give us paddings.
For both from both directions left in the right,
5212.8 -> or we can just say if we don't specify the
direction itself, it's going to apply this
5217.28 -> to all the directions on top right, bottom and the
left as well. Now the same applies to the margin.
5225.92 -> So let's work on that using this paragraph. So
I'm going to add to class here. So then again,
5231.84 -> you can see that if I do margin, top five, this
I've been using this a bit, it's going to add
5238.32 -> me the margin here, if I want to do margin y.
So in both directions, it should change this,
5246.48 -> just base over here, let's let's see how it works
without. So this class is incorrect now, so we
5251.84 -> don't have any margins here. If I go to five,
it will add both from the top and the bottom.
5257.6 -> So yeah, I will leave it to five. So it's going
to add margin from each and our interaction.
5263.76 -> And finally, this div what we what we have
here, we have a width 50. So you already know
5270.72 -> that right? So class, it's Don't be 54 or 50%, we
need to we need to align it. So let's do m x out
5282.4 -> L. We said in the center. What else we have here,
we have a text alignment, we didn't talk about it.
5290.4 -> But we I think I've used it already in the
previous example, but let's just see how
5295.04 -> it works. So for this, we just need
to do text center. And this will do
5301.52 -> the same here. So this this text alignment was
there before in the way we were talking about the
5310.24 -> typography. So this is this is something you've
already seen. Now what else we have here we have
5317.12 -> background. So if I go with background light,
and believe I'm going to get a little bit
5324.72 -> a bit great over here, it's slightly Gray,
I'm not sure if you can see it. So there's the
5329.44 -> background dark then which should give us pretty
much the same dark gray color and finally, text
5337.44 -> wide for the white color. So, this is kind of
what you can find here in the clips right. So,
5345.44 -> you can either use this primary secondary,
but there are also colors which are
5352.16 -> predefined, like you have the blue,
indigo, purple and so on and so on.
5357.84 -> You can also use the grayscale, right. So,
you have a gray 100 degree 300 and so on. So,
5362.4 -> you can achieve this as well with simple use
of classes, what else we have here. So we
5368.32 -> talked about backgrounds, we talked about the
borders, we talk about the colors, this play,
5372.88 -> obviously you can you can define whether you want
to how you want to display a given element. So
5379.84 -> you don't need to change the display property you
can just add simply add the for example, D none.
5390.64 -> So this will this will make our paragraph totally
disappear. Let me revert the change. And now the
5397.76 -> paragraph is back. What is also interest thing
is that you can also use the breakpoints, right,
5402.48 -> we already learned about the breakpoints, we're
talking about the grid. So we can actually applies
5407.2 -> an apply this on the certain breakpoints
on the certain screen size. So for example,
5412.96 -> if you want to see, let's say, we want to
be something visible only on the, let's say,
5420.72 -> medium size, let's do let's add this here.
So now our our div is visible. However,
5439.84 -> obviously, this is doing a remove dots.
So now it got disappeared. And when we
5448.56 -> increase the size of the screen, we should
see that it will pop up once we reach our Oh,
5464.64 -> nowadays, so because we had dienen. So basically,
we don't display this on starting from smallest
5470.88 -> screen, then we have the empty blocks. So if
you're on the medium size breakpoint between
5476.24 -> medium and large, now we can see it and then if we
go to large, again, it's going to be disappearing,
5481.68 -> right so if you want to do this on the specific
screen size, that we that's how you can do it.
5487.2 -> So you can specify a very complex rules. Or if we
just get rid of this, the LG neon, then it will
5493.52 -> be just simply invisible on the small screen
until we got the medium size. And then after
5500.24 -> we start making bigger, bigger, it will be
visible, right. So this is a very, very useful to,
5505.28 -> for example, you know, hide something on
the mobile or show something on on mobile.
5510.88 -> So let's get familiar with this one, because
it's gonna be very useful. Now flex, obviously,
5518.08 -> Flex is very important in web development.
So again, instead of using the flex styles,
5528.88 -> or procedures, properties, you can simply add the
classes, which gonna be using and utilizing the
5536.56 -> flex. So we're gonna do another example. On that,
let's grab something from here. So, yeah, I mean,
5548.4 -> as you already know, I mean, if you're
not familiar with Flex, then obviously,
5552.8 -> please do check the tutorial on Flex fast, because
otherwise, it's gonna be a little bit confusing.
5558.88 -> But other than that, if you are actually
familiar with Flex already, then you can use
5565.12 -> just you can you can easily see in a
recommendation, how to apply this flex properties
5573.04 -> with just simple use of the classes, right, so
the classes utilities, which will do this for us,
5581.36 -> and we don't need to type the CSS, our sub so
basically Long story short, just to enable flex,
5587.92 -> you should do the D flex we're gonna make, we're
gonna apply flex to this to this container.
5594.24 -> And then we can we can start
working on a different example here.
5601.52 -> So let's just grab one of
those from here. And let's
5609.44 -> let's check this out. Let's add a
border so we could see it bothered Argh.
5625.12 -> Margin to foster Sonic, you already know.
And now let's just check how it looks in.
5633.28 -> In console. So you'll clearly
see that this the flex class
5646.32 -> is setting this display to flex. And then the flex
row is setting this top row. And then obviously
5655.52 -> we can we can we can we can we can just play with
it, we can have like flags, row reverse, right? So
5666.08 -> this will reverse the the order right? So now
it's 123 here though it's like 123 here in the
5673.92 -> code. We're going to go to columns, right?
So if you want to set change to columns,
5679.84 -> instead the rows you can also do it just simply
changing this class. So we have columns now
5687.2 -> and so on and so on that which gives you a lot of,
you know, option just justified content is really
5692.8 -> thinking about justification. Bootstrap also helps
you to vertically align so everyone who was trying
5698.88 -> to vertically align or sent or something,
you know that in the past, it used to be
5704.8 -> a real pain for the developers
to deal with with the CSS, now,
5711.76 -> you can simply just use the align middle, and
that will just set it to a middle. So also very,
5720.4 -> very useful. Utility float we've been using
already with images, right? So simply said,
5725.76 -> float start for then keep in mind not using
left, right, this start and the end. What else
5733.84 -> the interaction right, when you click on it,
it's going to select the entire text rank,
5739.92 -> this doesn't have to be zero. And this can be
selected. So a lot of you do this, which just
5745.92 -> makes your life easier, you can change the opacity
of the symbol class and the value over here.
5755.04 -> Change the overflow. So then again, if you want
to have a scroll or not, if you want your content
5760.96 -> to overflow, simply say overflow visible
just underclass and your content will become
5767.68 -> automatically visible hidden, if you want to cut
it out, like we could do with our image example,
5772.88 -> right? If it was too big, we could just set it
to overflow hidden and then our image want to go
5778.48 -> out of the out of the deep out of the parent div.
Obviously, if we didn't use image fluid, for make
5788.88 -> it responsive, then it will be obviously even
visible fully right. So the part of the image will
5795.12 -> be just got position we talked already, right.
So you can arrange, you can set it to static
5802 -> relative. And then if you go decide to to go with
the absolute or relative, you can also specify
5812.16 -> like position absolute top 50 Start 50. And this
will set it at the corresponding shadows are we
5820.16 -> haven't used it, I believe. So let's just
quickly have a look. So as the shadow large,
5826.8 -> so we could see the result easily. And let's
add it to our div here. So this is going to give
5834.48 -> nice shadow around the element over here.
And then finally, we talked about sizing like
5843.28 -> we said with a width and height, and spacing
margin bindings, text. So this is this is
5853.6 -> about for example, rubbing and overflow for the
text right here. Vertical line and visibility
5861.84 -> which you can, which can be also adjusted
with the use of visible or invisible class.
5874.16 -> Okay, so now let's get back to content
and specifically to the table. So
5878.56 -> I've got you two tables here. And we're gonna
make one of one of the stable responsive table
5884.96 -> responsive. And also, we're gonna show you
what else we can do with the bootstrap classes,
5890.4 -> how we can easily change and adjust it. So first,
let's, let's make it let's make this responsive.
5898.72 -> So what I'm going to do, I'm going to add this
table responsive. MD some specifying not only do I
5908.16 -> want this table to be responsible, I'm specifying
the break point from which onwards, I want this be
5916 -> responsive. So as you can see, the upper table
is just getting shrinking, shrinking, shrinking,
5923.68 -> and the bottom one got the scroll, which
allows us to easily browse it for example,
5928.64 -> on the mobile right. So this how you can this is
how you can you can do it and there is much more
5938.24 -> which you can actually do with the with the tables
using using Bootstrap. So let's have a look. And
5947.68 -> just a few examples because again, obviously as
you can see, there are a lot options here like
5952.88 -> you know, we can play with table Footer Header
styling them easily. So I just want to show you
5959.12 -> a few examples, which are used most often
here we got the table responses. So yeah, so
5968.08 -> it can be always responsive. Or it can be on the
specific breakpoint. So what else we can do with
5977.44 -> with the with the table. We can easily and this
is something which bootstrap was working on
5985.92 -> very hard when it migrated from Bootstrap
for 205 I mean, dirty so if we do table
5996.96 -> dog is gonna change our table to the dark
mode, which is very handy because you know,
6002.96 -> we're just single switch, you know that a lot of
pages do have now right? This this night mode,
6008.4 -> which programmers do love so much, at least I do.
What else if you want make it bordered simply just
6018.48 -> type table bordered, bordered, and this will add
as the borders. And as you seen, this actually
6025.6 -> can also specify which borders you want, which
ones you don't want to let's add table hover,
6031.6 -> and let's see what's going to happen. So now we
can, when we hover over the given row, it's gonna
6038.16 -> highlight. So it's also very, very useful when it
comes to the big tables with large amount of data.
6047.68 -> You can also to make it easier for your
users to to read the data you can add,
6054.64 -> they will strip which will basically make every
odd cell having a different color. And you can
6061.6 -> also change colors, right? Like everything with
Bootstrap. Again, the table, primary, for example,
6067.36 -> is going to change the color or info. And you have
a nice overview of all this variance here. Right,
6075.84 -> so you have all the colors and options here. Yeah,
so these are the most important utilities, which
6082.24 -> you can use with your tables. As you can see,
it's very, very easy. And you can very quickly
6089.44 -> change and adjust your existing table because
what you have to do this is just very plain
6095.6 -> table HTML table, or do you have to do is just to
add a proper class to it. And it's going to look
6101.44 -> mid text to bootstrap. Okay, so now I would
like to talk about the two other components,
6111.2 -> which are very useful to make your site more
dynamic. So if you're creating some platform,
6117.04 -> or you know, some dashboard admins, very often you
want to throw some kind of notification. So the
6123.36 -> two interesting components, which bootstrap offers
you to use, the first one is called alerts. So um,
6128.88 -> this is how it looks like. You might be you
know, you familiar with those kinds of arts,
6134.72 -> whenever you are working with some platforms, you
click on something. And then usually, in the top,
6140.24 -> you can see this kind of alert, this is very easy,
like most of the components within a bootstrap.
6147.52 -> But what is most important for, except for the
fact that this is a simply simple to use, simple
6154.56 -> to create, that you can add icons to it, if you
change color, is there, dismissible. So you know,
6161.44 -> whenever you show it, you can also get rid of it
by just clicking this X icon. So that tells it how
6167.36 -> to how to build it. And yeah, as you can see, this
is this is very simple, because you just need to
6174 -> use a proper classes. So the first use alert, and
then a color. So this is the primary one. So we
6182.08 -> just use an alert and alert primary. And if you're
going to make a dynamic should also keep in mind
6188.08 -> to to use the roll. And now Bootstrap, utilize
the SVG icons. So if you want, you can easily add
6198 -> your icons to the alerts. So simply
add SVG. And I'm going to show you more
6205.12 -> icons soon. And finally, if you use a
bootstrap plugin, and the Alert Plugin all or
6217.52 -> the compile the bootstrap JavaScript version,
which we are using here, then simply by adding
6225.84 -> this data attribute are actually adding this
button here, right. So this is this is button.
6232.56 -> And the one you can see over here, this
is just a button which looks like this.
6237.92 -> And by giving them this Class button
close and this data, be as dismiss
6244.56 -> attribute, it will work and it will automatically
do the job. So it would just remove. So
6251.52 -> just keep in mind that when you dismiss, it's
actually being completely removed from the page
6257.92 -> structure. Now let's move to the next
one, which is Toast and toast are
6264.72 -> a little bit smaller elements on the page, which
are also dismissible. And they can be also shown
6272.8 -> on request. So let's let's, let's check this
one. So I'm going to copy and this example here,
6281.84 -> I'm going to create another row for it.
Actually, we don't need row specifically because
6290.08 -> by default, it's not visible and we need
to use the we need to use the JavaScript to
6297.28 -> create a button which will basically,
which will basically make it live. So,
6305.04 -> as you can see, it's popping up here in the bottom
right corner. So actually, let's use this example,
6314.08 -> which we have here, because what is important
here is add a space of JavaScript, and we're
6319.28 -> gonna go through it. So let's have a button, and
the toast. So basically, the structure is pretty
6331.44 -> simple. If you use this code probably doesn't
make sense to, you know, type it all by yourself,
6339.2 -> simply copy the example and then adjust whatever
you need. So here you can have an image, right,
6344.56 -> this is the image to use. You've got the header,
Bootstrap, and then some some extra information
6352.08 -> button close with your you know, from alerts, and
then the body of your message, you can customize
6357.52 -> it, you can add images, you can get add content,
it's up to you. And then we need this piece of
6364.96 -> Java Script over here. So let's add script tag
here. And let's paste it see if this works.
6375.52 -> So here we've got our toast on the left side
this time. So as you can imagine, you can easily
6384 -> adjust either content or behavior. So whether
you want to whether you want to show this, this,
6392.48 -> this toast on the left on the right side, you
can, you can easily customize it, if you want
6400.24 -> a few of them, right, so you want to stack them
here, we have just single, single notification
6406.24 -> single toast over here, however, maybe you want
to show two or three or four or five or more,
6411.44 -> then they will they can also stack one below
each other. So you can you can you can just just
6419.04 -> do that. Don't forget to add some spicing to it.
Now maybe let's have a look at this piece of piece
6427.68 -> of JavaScript over here. Because what it does,
first, it creates a link to the into the button,
6435.84 -> right so to the button you can see over here. So
we assign it to those trigger. And then we are
6443.6 -> getting this toast live example, which is here.
Life toast right, so you, you get your toast by
6456.08 -> my ID, and then you whenever this is clicked,
you simply use the Show option. There should be
6467.76 -> the other example here. And the rest of us tried.
So if you have multiple tools you can also use
6479.84 -> you can initialize them this way. So simply
just search for all the elements with the class
6487.84 -> toast, and then you end up with the list of the
array of the Altos you have, and then you can,
6495.92 -> you know, you have five different dose, you can
basically trigger all of them or just provide you
6501.12 -> know, like number 123 or five. Very often you also
want to, you know, dynamically create them so that
6506.608 -> it's also possible, let's see what what else you
can do. So for the placement, you can, you can,
6515.52 -> you can place them using different CSS options.
So, to middle center, let's have a look.
6524.4 -> Let's check this classes over here.
So here you have this div class at
6531.04 -> container and then you have position absolute
top 50 stocks 50. So this will be the center.
6539.6 -> Bottom, so you can play with it and
see how to place them in, in the in the
6547.28 -> in the place you actually wanted to be placed of
your badge. So well yeah, I mean, that's, that's
6553.84 -> really, really cool. And let's go to metals which
are available. So you can obviously we can show we
6559.68 -> can we can hide. We can dispose if you didn't
want to get this get instance as well. Yeah,
6568.64 -> this allows us to screw up the, the our toast
and then we can dynamically change the content of
6576.88 -> it. So technically, you could also have just one
dose and keep on changing the content you want to
6582.08 -> display to to do so. Yeah, I mean, really put your
hands on it because it's a thing you're gonna use
6589.6 -> it a lot. Sooner or later. You will need this
kind of certification in your project if you're
6593.76 -> building something more advanced. So this is a
very, very handy tool. To show us a notification
6601.6 -> like the Facebook notification or messenger
or something, you are seeing this everywhere.
6611.2 -> Okay, now it's time to talk about the nav bar.
So the navigation bar, you can see on many pages,
6618 -> actually, probably all of them and they
have it now, what is so cool about this
6621.84 -> navbar is that it's responsive by design by
default. So as soon as you shrink your screen
6630 -> to the, you know, tablet to the mobile size, it's
gonna automatically collapse. And then you can
6636.88 -> use the circled hamburger, to basically show or
hide the content, which is there, which saves a
6644.8 -> lot space, especially when it comes to mobile
devices. So let's have a look on how does it
6650.96 -> work with Bootstrap. As always, bootstrap gives
us like a basic example, which we can work on,
6657.44 -> it's a little bit complex. So obviously, we're
not going to go through all of this classes,
6662.24 -> because that's not the point to you know, to learn
it, and know it by heart each and every line.
6668.72 -> And that's not the point is we have a ducks for.
And so simply, you can start by just grabbing
6675.92 -> the basic navbar and then do some adjustments
to it. So that's what I did. Here, I've got
6681.92 -> the, I've got the basic example what I changed
here, because I wanted this to be dark. So
6689.2 -> actually, you know what, let me let me do this
from scratch again. So let's get rid of this nav
6694.68 -> bar and just use the basic one. So this is the
basic and bar. And now we want to work on death.
6702.16 -> So personally, you could or might want to change
is whether you want to have the full width or not,
6709.84 -> you can simply adjust it and change it by
changing this container, either to fluid,
6716.64 -> or if you keep the simple container,
then it will get them to to the center.
6724.08 -> So as you can see, this is going like
here. And then if you get a container,
6729.36 -> it's more to the center, you can see
it clearly on the on the bigger screen.
6735.76 -> So this is fluid. And this is normal container.
So if you want to have this margins from
6742.64 -> the left and the right, then you should go with
the container one and this one I'm going to stick
6747.2 -> to now, let's say you want to have
I want to have a logo in here.
6752.8 -> Very simple. This is this is called this is part
which is called brand. And you can see this over
6760.8 -> here. And here is navbar brand, right. So this is
what we what we've got here, we want to change it,
6767.2 -> just scroll down and find what you like. So I
would like to have the image over here. So I'm
6772 -> going to add this image over there. So let's say
it's not bar and I want to have an image here.
6779.84 -> And let's grab some existing image because
obviously I don't have the bootstrap one here.
6786.32 -> So let's just replace it with some logo. And here
it is, let's change the color the size actually
6795.92 -> make it a little bit slightly bigger. Okay, I
think it looks better now maybe even slightly.
6804.8 -> Bigger, right? That could be nice. And now I like
the dark one. So I wanted to do the dark one. So
6813.76 -> simply scroll down until you find a proper section
here we have the color scheme. So probably this
6819.2 -> what we are looking for right and have different
color scheme. And then again, you can see you can
6824.56 -> notice this pattern here. So like with the all the
other components, you just have to use the proper
6832.32 -> class, the color class. So you could use like a
primary, if you want to have a primary color, I
6837.12 -> will go with the navbar dark and background dark.
So if I go with the background dark only, let's
6844.4 -> change the light to dark, you will notice that
I've got the navbar However, my links the text
6851.6 -> over here, it's not really readable, right? So
that's why we need also this nav bar dark. So we
6857.12 -> change this nav bar light nav bar dark, and that's
gonna change also the font color. Okay, now,
6865.28 -> secondly, now, if you don't want something in
your nav bar, simply just search for it in here.
6874.24 -> I didn't want to get this disabled here. And by
the way, if you are not familiar, and it might be
6878.72 -> a little bit confusing right at the beginning,
because there are many elements over here.
6883.52 -> I strongly encourage you to just open the Web
Developer Tools and then go to the elements and
6890.96 -> try to just search for element you're looking
for. For example, this one, right, so this is the
6898.16 -> element and you can find Simple, press Delete,
and see whether you have the result you want,
6905.12 -> right? If something if you if you do something
wrong, let's say you remove the wrong element
6911.04 -> accidentally, then nothing easier, just refresh
the page, and you're gonna get back all the
6916.08 -> original HTML. And the same applies to whatever
changes you want to do. So let's say, I want to
6922.48 -> have this one, I'm going to edit this. And I'm
going to cap based. And I got two drop downs now,
6931.12 -> right? So now you can play have a kind of
sandbox, which you're going to work on. So yeah,
6938.48 -> let's see, let me let me get rid of this disabled
one, because obviously, I want all my links
6944.32 -> to be active, working in my nav bar. So this
cool, obviously, I would add some more links
6951.76 -> here if I be doing the real page. But that's up
to the use case you want to you want to achieve,
6960.56 -> right, you're going to find many examples with the
cold. Here container. So that's what we talk about
6968.64 -> the placement. All right, so we have option for
the default one. So the default will basically
6976.08 -> if I'm going to scroll down, it's gonna disappear.
Let's see, actually, let me add, let me add
6984.96 -> something at the bottom here. Let's do and if.
And let's do some nasty thing that's gonna add.
7001.2 -> Right, so it disappears. And then
if we do a fixed up door knock bar,
7008.4 -> so we have enough glass mixed up, it will
just stick to the top. So regardless of your
7015.68 -> scrolling or not, it will be always there. Now,
because it's because when we do it like this,
7023.92 -> the position is absolute. So now this margin
doesn't work anymore, we had margin over here
7029.84 -> on this element, let me just get rid of
it. So you will see there was margin here,
7035.68 -> but it doesn't work for that. So we would also
keep in mind to, to always keep this margin
7040.96 -> from the top for each and every element because
otherwise, nobody will simply it will ignore the
7046.48 -> the margins, which are there, you can also do
the fixed bottom if you have it on the bottom
7051.52 -> and stick it up so that it will just stick to the
top when you start scrolling, if it's not there,
7056.32 -> right. So if for example, this was our nav bar,
and we started scrolling, it will just stick,
7062.32 -> go here and then stick at this at this height,
just to the top like the sticky one. Um, yeah,
7071.2 -> a lot of different options here. And Yang
also wanted to show you two more things.
7077.28 -> So one is this external content option.
So if you for some reason want to use this
7083.6 -> function with the outside the nav bar itself,
you can do it in Bootstrap give you this example.
7089.76 -> Very simple, right, so we have just nav
bar, a very simple one, as you can see,
7094 -> not many, not many classes, and Toggler
over here. And what's going on here is that
7102 -> by using this data, Bs target attribute, and using
the same name, as we have here, we are actually
7113.04 -> combining this, this this this button, this
hamburger, we are connecting this to this element,
7119.68 -> so it knows which one to collapse if you have
more of them. Don't forget to use the unique
7123.6 -> IDs over the new component introducing disrupt
five off Canvas. So the menu on the right the
7130.08 -> side menu which you can also use same way as
you do with the navbar. So simply use the base
7135.84 -> example and then just start playing with this
around and changing adjusting to your needs. So
7143.92 -> this mostly about the navbar probably sooner or
later you're gonna need that you're gonna use it
7152.16 -> for for the big with the building or even the
application, right, a lot of the application
7157.92 -> use it like I know Instagram and so on.
So take time to play with it. Because
7165.28 -> because you will be using this for sure. And
now let's move to knifes nuts and dumps. So
7171.52 -> another category of components which you can find
which I'm finding very useful and you can I hope
7178.56 -> you will also gonna like so the base
nav is you know used for the navigation.
7185.68 -> If you want to have this just the links right
if you can call it just the menu on certain
7192.8 -> page so it's not so strictly like a nav bar is
not always stick. It's something like you have
7200.72 -> Now let's see on some pages amazin.com, for
example. So as you can see this navigation and
7208.72 -> looking at background, the basic navigation, which
is below the nav bar over here, so the base nav.
7215.6 -> So this is exactly the same, what you've
got here, by the way, we've been talking
7220.72 -> about different components, look how the Amazon
page is built navbar. So we just discussed this
7226.64 -> nav over here, slider or carousel, so gold
cards, we've been covering a few minutes back,
7236.24 -> and yeah, and then footer and some links here.
So this is the basic setup, which you use and
7242.24 -> which bootstrap offers you and with
use of them, you can just recreate
7246 -> literally any page in the internet. So this is the
base navigation. It's again, very, very simple,
7251.92 -> right? You just have a basic structure. And then
we just use as many links as you want. However,
7258.96 -> what is even more interesting are so called taps.
So what the dumps are tabs allows you to change
7267.52 -> the content. So this are our tabs here, let me
show you. And then they look in an inspector.
7275.92 -> So this is the entire so this, this is these are
tabs, and this is the content tab content, right?
7287.52 -> It's very small here, obviously, it could be much,
much bigger, it could be even with the entire
7293.84 -> page, right? So it could take the entire page.
And we could change the content of the page,
7298.72 -> while changing to different tab. This is very
handy. You can see this a lot when you work with,
7305.76 -> for example, the admin panels, right? So imagine
this is the settings page. And you want to say I
7311.44 -> don't know, like here, right? So the some
settings, some general settings, profile,
7317.68 -> adjustments, and whatever, right. And the same
with the vertical one. So imagine this is some
7323.04 -> kind of you know, application, and you can
edit your profile. So he will be your personal
7328.88 -> information, here will be some work related info
and so on. So this is very useful. And you can see
7337.04 -> that this is very dynamic, right? So you don't
have to reload the page, you're gonna have all
7341.2 -> of that on the single page. And then again, if you
go to dues and scroll to the appropriate section,
7354.56 -> you will get this taps, right home
profile contact, very simple usage,
7361.52 -> right. So we have two sections here, we have
pills, which are here 123. And then we have this
7370.24 -> kind of placeholders. So we have three
of them as well. And now what do we
7376.48 -> have to do? So this is the content going here?
What do you need to do, you need to just make sure
7381.76 -> that you have the corresponding corresponding
IDs over here. So look, this is the Home tab,
7390.56 -> right. So this is this is called home.
So we have this aria labeled by home.
7397.2 -> And Id is pills home. And this and let me actually
show you this in a source code is going to be much
7407.44 -> better visible. So let's go to our tabs. So this
is the example. Alright, so this is pills home.
7419.76 -> And this pills home corresponds
with this button here. So
7426.32 -> it has to match this data BS target. So it this
target, and this has to be the same. So if you're
7436.16 -> just adding a new one, let's add something
new here. So Contacts Tab, let's add a new
7443.84 -> one. And let's call it to own either No, maybe
just other. So we'll just change this to other.
7455.52 -> Also this one. Right, and now we
need to have the new nav item here.
7463.12 -> So I'm gonna make a copy of this. And now what
we need to do here is we need to change this to
7470.16 -> other other so this ID has to go and correspond.
This is the other and this is obviously other
7481.04 -> and that's how we get the new tab in in our
Bactrim. Right. Very simple, very, very easy
7489.28 -> and exactly the same way if you want to work with
the vertical, which example you've got over here
7499.28 -> Okay, now I would like to talk a little bit
about something which is not specifically a
7504.72 -> bootstrap component, because it's separate. The
project, however, is created by the same team. And
7510.08 -> I'm thinking about the icon. So if you go to the
extent and icons, you're going to see this page,
7514.88 -> where you're going to see a list of alternative
options. So if you're familiar with font also,
7520.56 -> or this, aka the icons, or whatever, I can see
we've been using, there are some options here. So
7527.44 -> you know, feel free to use them. However,
Bootstrap, recently came up with their own
7534.24 -> set of icons, and I really liked it, I feel
like they're really really good looking icons.
7542.08 -> And what's most important, there are like 1500s
already. So it's a lot. And I'm pretty sure that
7548.16 -> most of the icons you might be looking for to use
within your project inside your project, you're
7554.88 -> gonna find it here. So how to use it, it's very
simple. You have all icons, we start here. So if
7560.48 -> you're looking for something, let's say Wi Fi, you
simply just search for it, and then you choose and
7566.24 -> click on it, and then you're going to get three
options. First, you're going to have examples,
7571.12 -> we're going to see that you're going to have a
preview how it looks like and how you can use
7575.04 -> it with the sample examples of like, you know how
it's going to look in the button or in the input.
7581.04 -> Now what you can do now, to use it, you can
either download this, like SVG, so simply hit
7588.08 -> and save, and that's going to save you the image.
And then you just loaded as you do with any kind
7596.16 -> of an image you use on the page. Other option,
which we're going to cover later is to use it as
7602.32 -> icon, but then you need to include the font, the
CSS for that, I wanted to show you this before we
7609.44 -> move to to the icon font. So this is simply the
HTML is SVG. So this is like a row code of this
7615.36 -> icon. So this path is basically different, you
know, the SVG consists of this lines paths. And
7621.12 -> this is just you know, these are the points. So
the browser now know how to draw this icon. So
7629.92 -> it's very simple to use, because you just
copy this, and then you simply paste it.
7635.68 -> And here it is our icons,
right? You can change the size
7640.24 -> to something bigger, let's say 50, using this
width and height properties, or you can also do
7646.4 -> it like you would do with any other HTML element.
So we can just create some class, let's say icon
7653.12 -> and create some custom style for it. So I'm
going to call it icon and define a width.
7663.84 -> Have 200 pixel. And that's gonna work as
well. Now, coming back to the installation,
7669.68 -> so the icon installation, simply hit the
Install button, that's going to scroll down
7674.8 -> to this section. As you can see, there are many
options, how you can install it, you can do NPM,
7682 -> you can download the entire entire library, or
you can use the CDN. So I'm going to use this one.
7687.68 -> So let's just paste it in our head doc. And
now coming back to icon, let's grab something,
7695.04 -> we can simply just copy this icon found this I tag
and pasted here down below, or next to our icon.
7704.64 -> It's small, obviously. So again, how to change the
size, you can do it with styles. So set the font
7712.24 -> because it's like font, so just send the font size
to whatever it is 50 pixels per second, or 200.
7720.8 -> You can also change font color, obviously, you
just work with it like you will be doing with the
7728.16 -> any other font. And as I said, I mean,
you know, I think you have pretty much
7736.24 -> every icon you could possibly need
in a project like so, you know,
7740.88 -> some hamburgers over here. Yeah, I mean, just
give a try. And I really like this. And I really
7747.12 -> like having those icons and everything
within the same ecosystem of Bootstrap.
7757.04 -> Okay, so now let's talk about so important
components that bootstrap finally decide
7762.72 -> to provide a separate section for it within
the docs. And because recently in the visual
7769.12 -> for, they didn't have it and we have like the
separate category for forms. So bootstrap as,
7777.6 -> like with the other components, it's making our
life easier by supplying us with the certain
7786.56 -> classes, which makes our inputs and other form
controls simply look better. And let's, let's
7796.08 -> see what we have here. And what we're going to do
is we're going to build some Some contact form.
7802.56 -> So, we're not going to go into each and every
control because that would take like, you know,
7809.36 -> probably a few hours just to just to cover all
of that. But we're going to build like the very
7816.8 -> common contact form. And then I'm going to show
a couple more examples of what you can do also,
7822.24 -> with the form. So yeah, let's jump into it. Let's
open this in live server. And now what we're gonna
7830.16 -> do, we're gonna start with some text, let's
say, so let's have text center, and inside it,
7838.96 -> I want to have h2 Get in Dodge. So that's, that's
gonna be our heading. And then let's have P, lead.
7853.6 -> Something about questions. Do
not hesitate to contact us.
7864.56 -> Okay, now, let's add some row. And we're
going to also add just the FY content center.
7874.88 -> So it will be always centered. And let's also add
some margins here. And we're going to add some
7885.04 -> for to before we're going to add forms, let's
add, also some column. So there's going to be
7892 -> large, there's going to be six on the large
screens, and on the smaller one, is going to just
7899.04 -> take the full width, and inside it, let's
start creating our form. So I'm going to form
7904.72 -> I'm going to leave that action empty for now
because we are not adding any logic to it,
7909.92 -> we will just creating the front end part
for it. And let's start with the label. So
7915.76 -> if we do simple label for email, because we know
that that's what we're gonna start with, it kind
7921.48 -> of looks like this. And let's add input type
email. Okay, and then let's give ID email. And
7932.48 -> we can also have, we can have placeholder,
obviously, something like my email.com. So this is
7942.88 -> how it looks like, just by using the normal forms
and loading Bootstrap CSS, however, we can, we can
7949.92 -> make it even better. Because if we add class form,
label to our label, and we're going to add class
7959.6 -> form control.
7964.64 -> That's what's gonna happen. And yeah, let me let
me add, show you a few more examples. And then
7971.28 -> we're gonna also talk about variation you can have
with with Bootstrap, forms and inputs. So let's
7981.12 -> add another one. And let me just copy paste this
one, because we will have it for name, and name,
7990.4 -> and name. And then that's our example.
Okay, we not gonna bother with the
8002.96 -> spacing cue, we're gonna, we're gonna fix
it later. So we have two inputs. Now, let's
8009.84 -> add some select. So we can add, again, label. And
there's going to be four subject of our email. And
8020.48 -> we're going to add again, class form, label.
And then we're going to hold the subject. Okay,
8027.68 -> and now we have subject, so just normal select,
except for the fact that we're gonna add
8036.56 -> should we don't need this name, but
I'll just keep it class form, select.
8043.92 -> And then we're going to add some options here.
So option, and it's going to be let's say pricing
8051.36 -> should be pricing. And it's my copy of it,
what else we could have here possibly technical
8065.28 -> and some others, or general, whatever you
want to call it. Okay, so this is our,
8073.36 -> this is our select now. And if we want to have
some default value selected, then we just add
8082.56 -> this selected to the given option, and
it's gonna work like a charm. And finally,
8088.08 -> let's add some text area. So the user could
write us some, some message. So again, label
8096 -> and that's going to be our
query. So right message.
8103.6 -> And then we're going to have a text
story on. And obviously, whoops, text
8111.28 -> are real. It's gonna be query query calls
rows, we're going to set it to default, and
8118.8 -> then we're going to add class form control.
8126.48 -> Okay, so this is it maybe a little bit smaller.
Groups are meant to be smaller, not bigger.
8137.28 -> And then finally, let's add maybe some div
8142.8 -> with tech center, and we're going
to add some button here. So button,
8148.4 -> its type is going to be submit. And class is
going to be btn BTN. Primary. Let's use primary
8159.84 -> send. Okay. Thanks. And if I can
spell it properly. Yeah, so that's,
8171.12 -> that's it. It's, it's, yeah, it could be working
for him. However, let's tune it a little bit.
8178.88 -> With bootstrap five, we can easily
create pretty nice, pretty nice effect
8185.28 -> on called something called floating labels.
So I'm gonna show you that in a second.
8189.92 -> Just one more thing here is that we
could also have a placeholder, I believe.
8196.88 -> Right, something? Yeah, this is it, and it's
gonna disappear when we start typing in the
8203.392 -> school. However, if we want to use this floating,
then I'm going to get rid of it, I'm going to show
8211.12 -> you a nice trick, I believe, which you're going to
use when working with Bootstrap form. So let's do
8217.68 -> form floating. And then let's do some spacing,
EMI five. And now what we're going to do here,
8226.64 -> we're going to just put it this inside the roof.
And what happens now is that we don't need this.
8237.359 -> We don't need this Asha, we don't even have this.
8241.6 -> We even have this classroom. So we were missing
this class form label, which should be there.
8249.28 -> However, when you work with floating, we don't
you should remove it. And then let's change the
8254.64 -> order of it. And so the text area comes first.
And now see what's going to happen. says, let's
8263.439 -> do let's do this, like that style. And height of
200 pixel. Okay, and a little bit smaller and 115.
8280.08 -> And then we have form floating text
area. And in doesn't work curse,
8288.88 -> we are actually missing this placeholder, I
believe. Yeah, it can be empty, for some reason.
8303.84 -> Yeah, so now we can see you have this nice
floating label over here. And we can actually
8310.96 -> do pretty much the same with our inputs. So
let's do this. Now. Let's use it for name. Okay,
8320.399 -> so then what we have to do is, we have to switch
our label with the input that goes down below.
8329.6 -> And now it's working fine. So, you can
also achieve this very interesting effect
8335.84 -> on your inputs simply by using this this
div with the form of floating class.
8343.6 -> Yeah, so this is it, this is how you actually
work with it. Obviously, the there are more
8350.08 -> inputs here you have a range option. You have a
steppers and have input groups. I think this is
8357.84 -> also interesting where you can combine input
with other elements. So I prepared for you
8365.52 -> some examples over here. So you can examine
that by yourself and play with it. So if you
8373.2 -> want to play with some checkboxes, you have
a really nice option like this intermediate
8378.479 -> checkbox right so we have like checked unchecked
and this one is intermediate step available,
8385.76 -> some ranch some file upload and and few more
examples also of the validation that's also
8392.56 -> interesting because you can easily add the
validation messages to the to your input.
8400.72 -> And then that's also a fairly simple where
the with the bootstrap because as you can see,
8407.92 -> bootstrap comes with predefined labels, you
just find that this invalid check, right for
8415.2 -> the input. And then you say what you want to
what do you want to write? So you have this
8421.359 -> invalid feedback, right? So this will
you must agree before submitting.
8427.359 -> And you also have this positive
feedback. So here are valid feedback,
8433.68 -> which you use, together with along with the
input. And this, this obviously gives the user
8442.24 -> a nice positive feedback, you know
that the message is that everything
8446.479 -> was fine. And it did I know, for example,
the password he provided was strong enough.
8455.12 -> Okay, so we covered a lot of different
components, which bootstrap offers us,
8461.68 -> let's see what we haven't covered yet. And
which we're not going to do in this video,
8466.64 -> because it will take definitely too much time.
But these components are not that common,
8471.6 -> but they still can be useful for you. So for
example, the accordion right, so the kind of
8477.04 -> collapse the difference between columns and the
coordinates that accordion by default works like
8482.479 -> this, which means that you can have only one
active item, right? So we I cannot expand two
8488.56 -> at the same time, I just have to use the one. And
then again, this is pretty much simple. I mean,
8495.439 -> there is a lot of code over here.
But obviously, I think you can easily
8501.92 -> play with it and understand how does it go,
because you can see that there's accordion items,
8508.08 -> which are recurring elements, right. And then
if you want to just add or remove it, you simply
8513.84 -> copy, paste, add new one, and then you have you
change the heading. And then the content. What
8521.28 -> else we have here, we talked about others, badges,
you also we often use them however, again, nothing
8528.56 -> fancy, nothing, nothing complex here is just the
span of the class badge. And the to kind of give
8535.2 -> you this look, you will see this being used,
for example, in the notification, like here,
8542.16 -> or like this. So pretty, pretty straightforward.
Breadcrumbs. Again, if you want to show user,
8548.08 -> where are you now, what are you doing? I mean,
if you are going farther into for example,
8553.92 -> documentation, like here, you could show it, that
we are the components and then a breadcrumbs.
8561.12 -> Maybe with two levels, it doesn't make much sense.
But for example, here, if you go to variables,
8565.76 -> maybe that would make more sense for that. We
were talking about the buttons, you can obviously
8575.52 -> use button groups as well, if you want to work
with them. So if you won't have to multiple
8582.08 -> buttons combined into each other, we talked about
the carousel drop downs, we didn't talk about this
8588.399 -> specifically. But they were pretty much the same
as you've seen in the nav bar. So that allows you
8595.6 -> to show you know more info on demand, right, so
you can have some info in the nav bar. And then
8604.64 -> if you want to have more links, you can just add
more and more dropdowns lists groups pretty much
8610.72 -> straight forward. Similar to cards and panels
we've seen, so the panels, but they're just,
8616.8 -> they're just just either using lists. And
that's how you that's how they look like.
8625.439 -> Models. This is also very, very interesting and
important components. So let's have a look at this
8632.319 -> a little bit closer. So again, mechanic
is pretty, pretty much the same. So first,
8639.28 -> you just copy the model into your
page. So let's add it here to our body.
8648.72 -> So this is this is this model and it's
going to be visible until we actually
8656.24 -> fire this off. So we would have to add the
this piece of JavaScript to it. So this will
8667.28 -> fire when we click on the button.
So let's add this button over here.
8675.84 -> Okay. And we will need to actually use this
8691.84 -> this, I copied. I copied this model and this
is different example. The IDs are different,
8697.76 -> but it's triggered by our Data, target database
targets so that you need to make sure that this
8706.319 -> matches. So you have this example model here
and they have example model here over there.
8711.92 -> So then again, for the model itself, you have
header, you have body, and you have footer.
8718.16 -> So, pretty much like we been doing with cards.
So you can design it as you want, you have
8724.16 -> different buttons over here is dismissible.
And then you can simply just add the trigger,
8729.04 -> it is possible also to use JavaScript for that.
So if you want, you can, you can do it from
8737.12 -> JavaScript. And you're gonna find more information
how to do it here and change the configuration,
8741.12 -> whether you want to have a beggar applied like
this shadow in the back this this gray, which kind
8747.84 -> of makes your eye focusing on the model. So all of
that can be controlled from, from the JavaScript.
8756.72 -> And as always, there are like different options,
because you can have like full screen models, you
8762.64 -> can have large models, small models extra large,
so you can you can decide and work on different
8771.76 -> sizing. And also, also when you want to display,
whether it's on the center, or maybe to the right,
8778.479 -> and so on, you can embed different different
things like that, for example, the YouTube videos,
8786.88 -> so a whole lot of possibilities to choose from.
And finally, number three, obviously, when you
8794.24 -> have models, you can also use different methods
to show toggle, right, also change it from show
8802.08 -> to hidden, hidden to show show, hide, and dispose
and so on. So we talked about NASA nerf bars off
8808.96 -> Canvas we also covered. So, yeah, popovers is
also interesting. That's also why we actually
8815.84 -> used when we actually used Popper, in the first
place, the popovers are pretty similar to the
8825.04 -> tooltips. Right, so let's see tooltips first.
So the tooltips, you know, when you hover over
8831.68 -> a certain element you're gonna get you can show
the user a certain tooltip with extra information,
8839.76 -> which will make this easier for them to, you
know, get more familiar how to use your website.
8845.68 -> And when it comes to popover, it's pretty much
the same, however, you need to click to toggle
8850 -> right. So if you click on it, it's going to appear
and stays there. And if you want to hide it,
8856.24 -> you need to unclick it. And you can decide whether
you want to whether you want to use or actually
8862.56 -> to specifically unclick on the button, or you
want him to unclick anywhere. Finally, spinners
8871.68 -> and scrolls by so let's start with spinners. This
is what you use when you want to load something,
8878.479 -> right. So you just use it. And then usually
what we do, in such case we are actually
8888.64 -> it doesn't work because I put it probably inside
Yeah, inside model. So let me get it out of oil.
8898.88 -> Yeah, so this is the this is the spinner so
you use it when you want to show that something
8902.96 -> is loading, you can use it and combine it with
for example, buttons, right so now when a user
8908.319 -> clicks on something and waiting for the feedback,
you're just giving him more information that he's
8913.04 -> actually waiting for something and the page is
doing some logic in and behind. And then once it's
8921.04 -> done, you simply just use your js to change it
to hide this element or to replace with something
8928.479 -> else progress. So the progress bars pretty
straightforward here. So, depending on the value,
8937.28 -> you set is in this attribute value now, it will
basically fill up the progress bar to show the
8947.84 -> current status you can add labels like percentage,
you can change colors and are obviously different
8956.08 -> the color version of of this as well as the
multiple bars. So if you want to show like you
8966.24 -> know for example, that certain amount consists
of three different values and then you can
8971.359 -> use different colors to show it and finally as
close by so, this is this is also very useful.
8979.92 -> Which you can also see very often on the pages for
example, we are using this at our MD bootstrap.com
8986.88 -> If you go and check and in kind of navigation,
we are using the scrolls by over here. So this
8994.96 -> gives user you know the nice feeling where he she
exactly is Now, while using this documentation.
9004.72 -> So this is also handy. It's not that common,
it's, it's a little bit more complex. But
9010.56 -> sometimes you might want to use it. Like here
you have a navigation. However, you don't
9015.359 -> know where exactly you are, obviously, I mean,
you can imagine here, but this visual hint, it's
9022.8 -> always useful. And you can see, especially when
it comes to, you know, technical documentation.
9032.88 -> Okay, so we cover a lot of components. Obviously,
there are some more to go through, how are
9040.319 -> we going to do it in this video, but let's wrap
it up, and actually use whatever we learned
9046.88 -> in this course, to build a proper website.
So I'm going to start with this, this this
9052.24 -> template where we have the Bootstrap,
CSS, and J is loaded. And let's start
9057.84 -> building our page. So I want to start with
the header. And inside this header, I would
9062.64 -> like to have some nav bar. So let's find it out.
Let's go to components and then check for Neph.
9070.72 -> Bar. And I'm going to grab the basic example.
And we'll start to avert, it's gonna be good
9077.52 -> for the starting point. And I want to get rid
of this disabled. And I want to let's see what
9085.12 -> else I want to I want to make it dark actually.
So now let's start with getting this disabled out.
9095.76 -> And let's see how we can change the color here
it is. So I want to have no more dark and bar.
9105.52 -> And background dark. Yeah, this looks cool to me.
And I think that I might want to use container
9115.6 -> instead of the container fluid, which
will basically center my content.
9122.64 -> Okay, so let's now do something which is called
jumbotron, it's not there in in Bootstrap five.
9133.439 -> However, it was for for bootstrap used to had
something like this in the past, so just like a
9140.56 -> catchy element, which we can use to, you know,
to catch someone's attention. And I would like to
9149.439 -> use it here on the bench. So let's go and do some,
let's do some grid. So I'm gonna do the main part.
9158.319 -> So I'm gonna just do the semantically
correct. And then let's do a container.
9169.12 -> And inside this container, let's have a
row. And let's have a row. And then inside,
9176.319 -> I would like to have Call MD seven, and then
call nd five. So I didn't want to have them to be
9186 -> equal, I want them. However, I still want
them to sum up up to 12. So the left side,
9194 -> I would like to have some image with
obviously, the image fluid class.
9201.2 -> And let's grab something from big sum, which you
already know. Oops. Put it here. So we have it
9212.08 -> here on Oh, we already see that we are missing
some spacing. So let's added class, M, why five?
9221.6 -> Okay, so here we have image. If we change ID,
we're gonna get some other image. So we can
9229.439 -> play with it, and search for something which
will suit you most. And as far as the right
9238.16 -> part is concerned, I would stick it to some
some catchy tagline. So let's have an h1. And
9245.6 -> then that's our tagline. Okay, and within this
tagline, and that's also add, for example, some
9257.28 -> paragraph and to get it a little bit down, and
let's add some Lorem. I know 13. Will that be
9268.24 -> sufficient? Yeah, I think that's, that's
okay. It can be too long. Obviously,
9275.28 -> normally, we would use some catchy text over here.
It can be too long, because he's learning to read
9280.88 -> quite fast. And then let's add some button.
So we're going to have a button. So the type
9287.92 -> is baton, and the class is BTN. And then btn
primary, and then margin, top would say five
9300.399 -> And then that's a call to action. We want user to
do something cure. Yeah, maybe there's too much.
9308.319 -> How about three? Yeah, I guess this better.
And I would still do it. Either. Let's do this
9318.479 -> class, Mt. Five. Yeah, I think now it looks cool.
So this blue color response with the image. So
9328.88 -> I really liked. Now, let's, let's
add some call to action here now. So
9338.479 -> I'm going to show you how to create actually, the
9346.16 -> component, which is not during
Bootstrap, like we did with jumbotron,
9349.76 -> just to show you that Bootstrap is not only
about the components, it's also about the
9352.96 -> utilities and classes, which you can use to
create and to design your own ideas. So let's
9361.84 -> add another row over here. And now within this
row, just add the full call to be semantically
9369.04 -> correct. And then let's do something like
that. I want to have BG secondary color.
9378.479 -> BG secondary. Okay, and add some text. Here,
Lauren 10. Okay, it doesn't look good yet,
9391.92 -> but we will make it beautiful soon. So we've got
the kind of dark background, so probably it will
9399.2 -> be wise to change the text to white or something
lighter. Okay, and now see what I'm gonna do. I'm
9408.56 -> actually on a also wrap it up as Card button.
So I'm using the bootstrap component here. And
9420.72 -> I'm gonna do some spacing Q. So am I five, as
well as be while for? And let's also add the card.
9435.6 -> Okay, and I want this everything to be text
centered. And yeah, I think I think that's okay.
9446.08 -> Perhaps even smaller. Yeah, something
like this would do. Yeah, maybe even.
9457.52 -> offered that looks cool. No, no, let's add some
cards here to show our latest blog posts. So
9470 -> I'm going to add another row. And now let's see
what we've got here. So let's get back to cards.
9476.16 -> And either we're going to use three cards with
an image, so we can copy the basic example or,
9487.28 -> or we would go with this card group. So I don't
know which I like more. I think we haven't done
9498.319 -> card group yet. So let's do a card group. In
here, however, would like to. Now we don't have
9509.12 -> the one the button. So let's do we're going
to add this manually. So let's do this here.
9518.64 -> I have a call. And now let's, let's place it
like this. And now let's add some images. So
9528.72 -> I'm just gonna replace this one where it
soars with number 200 201 and then 202.
9547.52 -> So this guy, give me an S images, and let's
just add a button. So I can type everything
9554.8 -> yourself or you can just copy paste an existing
sample. And let's, I know should we put it above?
9566.479 -> Or should we put it below so that's right
below. So I will do no multicar sir. So
9573.76 -> I'm just gonna click here, here and there
with my Alt pressed and now I can type in
9582.56 -> in a few in a few places at the same time, so
I'm going to add text center and inside this I'm
9594.56 -> going to put our our button I'm gonna change
it to read more. And actually, you know what,
9599.359 -> I just To the letter A. Because we need this to
be a hyperlink, and then No, our just I'm not sure
9612.08 -> if you can see this clearly, I'm just editing this
three lines at the same time, read more. Yeah. And
9620.64 -> this will go here. And actually, I think I should
I should do the other way around. So I should
9632.16 -> actually, you know what, let's get rid of this.
We don't I think user is not interested in
9636.72 -> whether it's been updated or not. Three
minutes, because it's a blog post,
9642.24 -> maybe if we were doing the magazine, that would
be more important. And you know what, as well, I
9649.439 -> don't want this to be centered, to be honest, when
I look at it now. So let's just get rid of it.
9656.56 -> And stick to the basics. Okay, that's cool.
And now finally, I'm gonna do, I'm gonna do
9663.359 -> some shortcut here, I'm gonna get the form. So
let's have this form here from here. And that's,
9672.56 -> actually I want to have this container. And
so yeah, we'll need this row. Or I can see.
9687.439 -> Up here it collapse. And now let's, let's cut
this one. And let's change to the landing.
9695.52 -> Who want you to find my role now. So this is main,
this is number roll number one, row number two,
9703.439 -> row number three. And is it yes, this is the
one except for the fact that we need some
9716.479 -> spacing here as well. Okay, and finally,
let's go and find some bootstrap five footer.
9728.479 -> This is one of the option. But let's just, let's
just have something like sticky folder. Okay.
9745.279 -> So this is footer, I'm gonna get this
footer. And I'm gonna go and add it here
9756.8 -> as a footer. And obviously, I'm gonna
change it to dark. And light. Let's see.
9765.76 -> Yeah, so this is our sticky footer at the bottom.
And then we will do something like copyright,
9776.399 -> HTTPS and the bootstrap.com. And the boot, strap
that calm. Cool. So yeah, maybe this is not the
9788.72 -> most complex site you've ever seen. But I think
we've created this like in what it was 10 minutes,
9796.64 -> perhaps, man, I think it's even less. So I hope
that I just gave you this idea how quickly you
9804 -> can really prototype your pages with the use of
the bootstrap components. And you can really,
9810.16 -> really nicely just organize everything and
because obviously, you could write all of
9815.6 -> that by yourself. But it would take much,
much longer be mean, you would be actually
9823.84 -> reinventing the wheel. So you will be
fighting with you know, making this
9828 -> making this responsive. And this obviously,
by default, is responsive. So it will adjust
9834.479 -> the screen it will look perfectly on each and
every screen. You have a you have also scripts
9841.279 -> here. So you know to create this drop down, you
can do it yourself, but it's there. It's been
9845.92 -> tested by millions of users. So there is no point
doing this. So I hope you enjoyed this tutorial.
9857.6 -> Okay, so finally, I wanted to show you the last
thing is how you can easily publish your page. So
9863.439 -> what do you have to do to publish your page
you simply open the command line I have the
9867.2 -> one which is building in Visual Studio code, but
you could also use a command line from a Windows
9873.439 -> or terminal from Mac OS whichever you're using.
Navigate to the folder of your choice and then I'm
9880 -> gonna go to CD landing, because this is where the,
the page we we just created and the Free Code Camp
9890.319 -> is just a generic folder with all the sub
folder there is no index html file. So
9895.2 -> I will need this index html file actually lending
to be there. And actually, you know what, let's,
9902.08 -> let's also rename it into index html. So as you
know, then the browser will know that this is,
9910.8 -> this is the entry file. And then what you have to
do is just simply type MDB publish, and it's gonna
9916.8 -> ask you whether you want to use NPM, or yarn,
I'm going to stick with the NPM. It's gonna ask
9922.16 -> about the neck. So let's do the Free Code Camp.
Bootstrap five, let's say, and few more options.
9931.279 -> I'm going to just accept the default ones. I'm
going to hit Enter, and what you're going to see
9935.439 -> is that this gonna be updated within just a second
and you're gonna see the URL over here, when you
9940.56 -> click it, boom patch has been just deployed
to the server. And this is, this is their,
9946.72 -> this is secured with SSL and it's absolutely free.
If you don't have it, yet, simply navigate to MTB
9954.053 -> go TOCOM. And there's where you can find the
installation procedure. So, you have to install
9959.84 -> this MDB tool so you'll be able to do NDB in your
command line, so npm install manager MTB CLI,
9968.479 -> and just create the free account so you'll be able
to do MDB publish on your account with your your
Source: https://www.youtube.com/watch?v=-qfEOE4vtxE