hi everyone and welcome to this course

on bootstrap 5. in this course you will

learn how to design a website with the

help of bootstrap 5 you will also learn

how to minimize the usage of CSS with

the help of bootstrap

you have to keep in mind that the main

objective of bootstrap is to minimize

the use of CSS because you know like

building a website with CSS takes so

much time and so much effort and energy

and that's why it's better to use like a

predetermined templates and

predetermined lines of codes with the

help of bootstrap 5. so that's what

we're gonna see in this course we're

gonna see how to minimize the use of CSS

and how to use utility classes to design

the website

bootstrap is one of the most popular

front-end Frameworks for developing

responsive mobile first websites

so that is basically what bootstrap does

it's a framework of CSS which helps you

in designing an attractive and

responsive website

this framework exceptionally enhances

the entire Outlook of your website

so bootstrap does an amazing job at

making your website beautiful and it

also makes an amazing job at helping you

create this page in no time

bootstrap 5 is the latest version of

bootstrap it's one of the most used

Frameworks of CSS with the help of this

framework you can design your website in

an exceptional Manner and by only using

a few CSS properties the main motive of

using bootstrap is to minimize the use

of CSS do you know why it's because the

use of CSS makes the code lengthy and

prominently adds to the size of the file

as a consequence the risk of Designing a

slow and unresponsive website increases

however with bootstrap 5 you can get the

same result as with CSS but by only

using three to four bootstrap classes

instead of 10 to 11 CSS properties in

other words bootstrap 5 is here to make

our life easy and to help us save time

so that's the goal of bootstrap 5 and

that's why we use it it makes our life

so much easier it saves us time and it

helps us create amazing websites

all right so again why should you use

bootstrap 5 as I told you earlier the

main purpose of using bootstrap instead

of CSS is to minimize the code lengths

and the file size in this way you can

have a faster and more responsive

website without having to deal with the

lengthy code the advantage of using

bootstrap is that all of the responsive

templates come packaged with pre-styled

ready to use components so everything

comes packaged for you just use with

pre-styled ready to use components so

all you have to do is just to

incorporate those pre-built templates

and include them in your website design

let's now explore how bootstrap 5 works

so bootstrap is a collection of

different classes of CSS that are coded

in a way that does not add to the size

of the file

let's go to the bootstrap website where

you'll learn how to use this web

designing framework as you can see on

your screen I've already opened my

browser here I write bootstrap in the

search bar and press enter now you can

see multiple options on the screen I'll

click and follow the first search result

this is the official website of

bootstrap first of all I'll visit the

get started tab of this website

here is a little introduction to this

useful framework

okay let's now discover the customize

tab

inside the customize tab we go to

um okay let's go to the components tab

and begin by designing buttons so to

design a button using CSS you have to

use approximately 20 different classes

but in bootstrap you just have to

specify the type of the component in

this case it is button then you'll need

to use a single class and it will

automatically creates the button you

want

all right so what is the limitation of

bootstrap the only limitation of

bootstrap is that it offers limited

options when it comes to colors but that

is not a major issue it is because you

can easily customize the color by using

bootstrap with some CSS you can easily

use CSS to change the color of the

bottom but for now I'm just providing

you with an overview of how bootstrap

works

all right so do you see how all these

multiple functions are working because

of a single class

here the type button and the classes are

specified and they helped us create this

button
the color options are categorized as a

primary secondary success danger warning

info light and dark you can also manage

the size of the buttons as large or

small

you also have different options to

customize button controls as you can see

and slide controls are also there

it is such an easy to use framework

you can incorporate any of these

bootstrap functionalities by copying the

component codes pasting them into your

code editor and linking them to your

website

alright so that was it for the overview

of this amazing framework let's now talk

about the different versions of

bootstrap

the latest version of bootstrap is 5.1 X

but always be careful about your

bootstrap version

never opt for a beta version that is

temporary and is designed to Simply test

and generate user feedback and responses

on some features that are still under

development

if you use the beta version once your

work is complete

and once the beta version is removed

from operation you will lose all the

work that you've done using that version

so that's why it's better to avoid using

the beta version

all right and now on to the next lecture

there are two different ways of using

bootstrap 5. the first way is to use the

CDN link

the other way is to download the

bootstrap file CDN stands for Content

delivery Network

technically CDN is a group of

geographically distributed servers that

speed up the delivery of web content by

bringing it closer to where users are

cdn's cache content like web pages

images and videos in proxy servers near

your physical location

all right now when it comes to

downloading you can also get access to a

file that

you may link to your code edit

Better Learning Experience

in the last video you learned that there

are two different ways of using

bootstrap 5. one way is through CDN

links and the other way is by

downloading a file using CDN links is an

easy way out as you can see on the

screen you are provided with a CSS link

and another Link in JavaScript you can

copy both of these links in case you are

unable to find these links anywhere on

the website you may search for them in

the docs section of this website

find them copy them and then move them

towards your vs code

as you can see here I have a folder

named bootstrap in my vs code

here I will create an index file with an

HTML extension

keep in mind that your bootstrap file

will work

in the form of HTML tags only

here I will write bootstrap inside the

title tag of HTML then here inside the

H1 tag I write this is our first

bootstrap class

I save it and I paste it into my browser

to see the result now let's check what

is its font size and font style

so it's font size is 32 and the font

style is times the enrollment now I will

use the bootstrap CDN link to change the

style of what appears on my screen I

will simply copy the CDN link from the

website and paste it after the title tag

in my vs code this is how CDN links are

used you cannot post

these links anywhere except in the head

tab

so be careful you just can post them in

the head tag

so the only way to ensure that these CDN

links are working well is to put them

inside the head tags

currently you do not need to use the

JavaScript link but these links are

required when you design components that

may collapse

like when you need to show and hide

content

now it's time to try the second

procedure by using downloaded bootstrap

files now I will download this bootstrap

file in my system while showing you the

right way to download it I'm going to

the official website of bootstrap I

download the latest version of bootstrap

on my desktop

and as you can see here it's in my

download folder on my system it will

take some time for this file to download

but once downloaded

um we can move on to the next step

all right so I've saved all the

downloaded bootstrap files in this

folder the key aspect here is to keep

your files in an accessible location or

in the same folder of a drive

it makes it easier for you to define the

paths when needed that's why it's better

to keep them in the same path okay so go

to that folder and open CSS click the

main file of bootstrap you can directly

save it here to keep your folder

organized but you may also save specific

folders for grid relation and utilities

however most people prefer using the

bootstrap CSS file

I'll go to my vs code I've removed the

CDN link let me split the screen and

show you what the web page looks like

now I'll use the file that I've

downloaded

I'll use the bootstrap folder in this

link

then I'll use the CSS folder after that

I'll use the file name bootstripe.css

from this folder okay

let's refresh the file in the browser

and here is the output

so we can have the same results by using

any of the two defined procedures

however to use bootstrap 5 with the help

of CDN links you are required to have a

working internet connection

but if you download

that you have the file saved on your

device it's okay you don't need an

internet connection

that is the only difference between both

procedures between

having to use the CDN links and between

having to download the files to your

system

all right and now on to the next

lectures in which you'll learn how to

use bootstrap classes in your vs code

all right let's now talk about bootstrap

breakpoints as you can see on the screen

I've opened a bootstrap 5 support page

called breakpoints here the available

breakpoints of bootstrap are discussed

in detail the web page displays the

breakpoints of bootstrap 5 along with

their class infix and dimensions

class infix just refers to the tier of

classes that we'll be using

the X small breakpoint has no class

infix

it is for the dimensions that are less

than 576 pixels for small breakpoints

the class infix used is SM and it's for

the dimensions greater than or equal to

576 pixels

MD class infix is used for medium

breakpoints and it's for the dimensions

greater than or equal to

768 pixels

similarly the large breakpoint is

represented using

LG and its break point are greater than

or equal to 992 pixels it means that the

medium breakpoint cannot be larger than

992 pixels in dimension after that we

have two other breakpoints extra large

and extra extra large that are

represented using XL and XXL

respectively

so when the large Dimension reaches a

break point of

1200 pixels it is considered extra large

and when the extra large reaches a

dimension of

1400 pixels or greater it is considered

as extra extra large this is all about

the breakpoints

here

they have also discussed the SAS

breakpoints if you don't know what SAS

means here is a definition for you so

basically SAS refers to synthetically

awesome style sheets SAS is an extension

of css3 adding nested rules variables

mix-ins selector inheritance and more

all right it's now time to conclude this

lecture you will learn about changing

the color and background of the text in

the next lecture

in the previous lecture you learned how

to download and use bootstrap how its

classes work and what are its break

points now you will learn about the

different colors of the text available

in bootstrap here I will write H1 as

hello word and save it now I want to

Define its color I write class text

okay so since I don't know what to put

here I'll press Ctrl spacebar by default

its color is black but I'll select the

primary color and save the code

and as you can see the color of the text

has changed in the browser window we

have a limited option of colors other

than primary now I'll select secondary

and save it and here you go just take a

look at the results the color has

changed to a lighter shade of black if I

use info in place of secondary the text

will appear in light blue

if I choose to use warning the text

appears in yellow and for the danger it

appears in Red so the actual colors

relevant to these classes are showing up

similarly again change the color of the

text in a paragraph you can also have

these color options for the background

so keep in mind that multiple properties

can be used in the same class even

though you just have a single class in

the element

with a paragraph tag for example you'll

see how we can change the text color as

well as the background color with the

use of a single class

all right so now I'll change the

background color of the paragraph let's

set it to Black and here you go then we

can do the same with the H1 tag and here

we go so this is how you can design the

text of a website

in the upcoming lectures

you'll be introduced to the concept of

customizing bootstrap classes

in the previous lectures you learned

about the process of changing the text

color as well as the background color of

the text

in this lecture you'll learn how to

customize the bootstrap code to use

colors other than the ones offered in

bootstrap 5.

here I'll use a paragraph and I'll

Define its class as text info just look

at the screen in front of you you can

see that the text color of the text has

changed to Blue since you've already

defined the class you cannot Define

multiple classes but you can have

multiple values for that defined class

so let's define

the background color is dark now I want

to customize this color how can I do

that to be able to customize the color

I'll use the style tag and create a

style sheet I'll define a class first

because to use multiple colors on your

website you need to have a separate

class for each element

I'll use the class customize color then

I use the aqua background color but as

you can see on the screen the

customization did not work do you know

why do you know why it didn't work it's

because I've already used the bootstrap

class to define the background color

okay so to fix that I need to use

important and save it

okay so I'll basically need to use the

exclamation mark important and save it

I'm doing this to specify that I want to

display

the customized color irrespective of the

bootstrap class that I've used in other

words by default the bootstrap class

Works before the CSS class but but if

you want to reverse things around and

apply your defined CSS styling you'll

need to use the exclamation mark

important property every single time

this property adds more importance to

property or value than normal

so that's how you solve the issue you

just use the exclamation mark important

property

right now you're having a look at a

website called meta brains

this website displays a few columns and

cards related to courses

in this lecture you will learn about how

the grid system of bootstrap works and

how you can incorporate it into your

website using breakpoints

because when we use a grid system there

is a dimension at which we've to use

media queries

the use of bootstrap reduces the use of

media queries in CSS alright let's now

move on to the main topic of this

lecture

So currently the large screen that

you're viewing here has a width of 1700

pixels approximately

the three cards displayed in the two

rows will split further into rows after

a certain breakpoint

as you can see

we now have three rows with two columns

each

always be careful about responsiveness

and focus on avoiding the use of the

scroll bar

the scroll bar is not the best way to

explore a page it will create an issue

on your website all right so upon

bringing the widths

to an even smaller value The Columns

will arrange themselves in the form of a

single row

we've now reached the minimum possible

value for

of the screen width

I don't think there is

zero I've used a CDN link just to avoid

having

a source link issue I've used my CDN

link here

and not a downloaded file so we already

talked about this before downloaded

files will provide the source code file

and it won't be an issue to run the file

see the end links always work on the

internet but the downloaded file need no

internet
to work

so it's a good practice to use the

downloaded file

for production and not the CDN links

okay so now I'll create a div and Define

the class as a container I'll Define

another div with the class row this is a

key concept

always Define div of classes container

and row when designing a grid system

it is advised to use container fluid to

avoid having extra space

error or a scroll bar if you don't

Define the class row your grid system

will not be displayed okay now I'll

Define a div as columns 1 2 and 3.

let's now Define a background color

success for all three columns

The Columns are now having a background

color of green

now I'll copy and paste the same code

twice

can you see how the number of columns

has been Multiplied on the screen

after a certain break point of the width

size on the screen the data collapses

and the text shifts to the other row

we use bootstrap

to avoid facing the problem of the

scroll bar and make our website

responsive and adaptable to different

screen sizes

another noteworthy Point here is that

we've not yet defined the width of the

screen in the cold class

it means that we've not yet specified

the screen size

in the next lesson we'll play around

with different screen sizes large medium

and small and see how the results differ

but in this lecture as you may have

noticed whenever we use coal our page

used a predefined width automatically

but in most cases we Define the screen

size as large medium or small so we'll

see how all of this works in the next

lecture all right and now on to the next

lecture

all right so in this lecture you'll

learn to use the main grid system by

targeting specific screen sizes

you've previously learned that whenever

you intend to use a grid system you must

define a class name container fluid and

then you define a div of class equal to

row

now just look at the screen I use six

div and label them from one to six

just look at the output on screen now

this div is not displayed in a single

row do you know why it's because I have

not defined them using a bootstrap class

all right

now I'll define a class call

in each of the six div

and as you can see the width has now

been defined equally amongst all of them

next let's say I want to arrange these

six divs

in two different throws so what should I

do oh by the way in a grid system you

can create only 12 columns in a row let

me show you so I'll add dash one to the

call and each of the six divs

it means that now every div will consume

the width of one column only

the number one that we added simply

defines how many columns will be there

when you add dash one it means we're

consuming one column out of the maximum

of 12. for this div alone

then one column for the word two then

one column four the word four then one

column for the word five and so on

for example if you want to have just two

columns in desktop screens and phone

screens you could use two call dash md-6

for your desktop view and two call Dash

xs-6 classes in your columns for your

mobile phone screen because the max is

12 columns remember that the maximum is

12 columns anyway if this sounds

confusing to you just dismiss what I

just said we'll see a concrete example

right now all right so I'll copy and

paste this six div which means that the

total number of columns is now 12. after

that I change the column size of the

last div from one to four it simply

means that we want the last div to

consume four columns but unfortunately

as you can see we don't have four

columns available in the first row

so the output is now showing us 11

columns in the first row and the rest of

the four columns will be displayed in

the next row automatically because as I

said before there is no place available

anymore the maximum number of columns is

12 and when we want to consume four more

in the last div

there is no space for it

all right so keep that in mind Arrow can

hold a total of 12 columns only

now I'll change the width of the fifth

div to six so the fifth column will

occupy the widths of six columns and as

a consequence the remaining columns will

be shifted to the next row

this becomes evident when I change the

background color of the fifth div

okay so if all previous explanations

sounded complicated to you then I hope

that by changing the background color

things are clearer to you now as to how

the div for five consumes six columns

in this way we can customize the grid

system as per our requirement or as per

our clients requirement okay now if I do

the same for the div of two you'll see

the output the same happens the div of 2

consumes five columns and everything

else will be shifted

okay so as you can see now if I change

the width of my window things will

remain pretty much the same all right

now what if you want to work with a

specific screen size such as large

medium or small

to do that let's comment on the already

generated div and create a new div

having a class call and multiply it by

12.

I'll save it then I enter the data in

each div

okay now if I want to divide them how

can you do that

for instance what will you do if you

want to display four div in a row on a

large screen

you will simply Define the column width

of each div as three and Define the

screen size as large LG

similarly

you will specify the screen size as

medium and Define the column width as

four and for the small screen you will

specify the column width as 12.

you will have to Define these

specifications in every div

now save and refresh to see the desired

result on the screen and as you can see

I've got three rows with four columns in

each row

right now

we are working on the large and extra

large screens when changing the width

size you will see the specified number

of rows and columns

you can also change the background color

of the entire grid system or you may

Define separate colors for each row and

column of the grid system

the choice is yours if we have different

colors the separation will be more

evident

another thing to note is as you can see

there is no space between the rows and

columns this is something that we'll

talk about in the next lecture

all right

let's move on

hello and welcome to this new lecture on

gutters and bootstrap as you can see on

the screen I've already created seven

different divs in my vs code how did I

create these divs well I created seven

divs with a container fluid class and

then I defined a call row with a column

width of four

additionally as you may have noticed

there is no mention of the screen size

here

I've simply specified that I want four

columns in a row irrespective of the

screen size

I have specified background color as

primary

we've talked about this in earlier

lectures all right so the main purpose

of this video is to teach you how to put

space between the divs here as you can

see the divs in the same row

have a space between them while the divs

in the same column have no space between

them to tackle the situation all you

have to do is to make some changes in

the class row simply insert G5 which

means gutter 5 refresh the page and here

you go we have our output

this is how you do it now let's have a

look at the space by pressing F12 which

represents the developer tools

I'll click here and you'll see dot G5

and Dot

gy5 it's showing in the spacing REM here

now let me tell you how to determine the

actual value of the gutter look at the

screen the space of each gutter is 1.5

REM which is equal to 24 pixels

if you want to verify this and see what

space you will get beforehand you may

simply visit the bootstrap website to

check the gutter variables so after

seeing all of this how can we Define

gutters like what is gutter

it is simply the space between the boxes

the tunnel between two divs there are

only two ways of using gutter you can

either directly Define a gutter value or

you may associate it with the x-axis or

the y-axis as per your requirements now

regarding the value of gutter

it ranges from one to five this is how

the gutter property Works in bootstrap 5

basically
and now on to the next lecture

typography is one of the utilities of

bootstrap bootstrap includes dozens of

utilities what are utilities they simply

represent classes with a single purpose

and help in reducing the frequency of

Highly repetitive declarations the

typography utility helps in managing the

font size using bootstrap do you know

how

here I've taken a paragraph inside which

I Incorporated the text of hello world I

saved it and it's been displayed with

the default font size but

I want to have a font size of H1 this

utility is thus used to give your normal

text the font size of the heading tags I

can simply add here class equal H1 and

will have what we want now let's take a

span tag and write this is his pen

I save it and then add here class equal

H3

and as you can see now the text has

changed the font size of H3

there is another interesting thing that

falls under the umbrella of typography

let's discuss that using a div tag

saying this is a div

I'll Define its class as display one

and as you can see the font size of

display 1 is greater than the one of H1

but its boldness is lighter as compared

to heading tags

the greater the number of display tags

the smaller will be the font size

display 6 is the smallest one we'll now

discuss another class let's define a div

tag as simple text now you want your

simple text to appear bold on the screen

if you don't wanna

make your text bigger or smaller and you

want to make the text bold we'll write

only class f w Dash bold

you can see that my text is bold now if

you compare bold class with bootstrap 4

then the Bold class and booster 4 is

called font weight bold

but now with bootstrap 5 it's been

updated to FW Dash

bold

I will simply Define the class as FW

dashboard

I hope that it's now clear to you how we

can change our normal text

to heading and how to make our text bold

while using bootstrap classes

and now on to the next lecture

in this lecture we're going to do the

classes related to images

let's start with the image tag select

the source of your desired image and

save it

can you see the scroll bar in the bottom

here this is because the file is not in

full screen mode but when I go to full

screen

you'll not see any scroll bar

okay so to solve this problem I'm going

to add class

I I'm gonna add a class named

image img's Dash fluid

this class will automatically convert

the width of the image to 100 and the

height will be adjusted according to the

height of the image you can see now that

no scroll bar is displaying here if I

make the screen full size then the image

will look like this but if I decrease

the width of the page then the image

will fit in okay now if I give the class

as image thumbnail you will see a white

border displayed around the image

another tag of images is rounded it will

not apply here as we've already used

another class

by using the round property the corners

of the images will be rounded

let me take another source of images by

images PNG
you can see a new image displaying on

our screen now we need to adjust the

width and height of both of these images

I'm giving the attribute of width and

height to both images

200 for the height

for the first one and 200 height for the

second one

I'm also taking a width of 200 for the

first one and the same for the second

image

in the first image you can see that

there is a space on the upper part of it

that is because I've used the thumbnail

attribute

now I have removed the image thumbnail

and you can see that it is equal in size

image thumbnail centers the image of the

div and it also makes the corners of the

images rounded

you can see that both images are in the

beginning okay let me give you another

class for both images

which is float start

can you see that the image are

at the beginning and that no effect

is applied on them

so I'm giving the name of the second

class as float and and as you can see on

your screen the second image has moved

to the right it can also move the image

to the center

okay so now I'm going to take a div with

class text Center here and put an image

tag and give an image source

now my image is displayed in the middle

because I gave a class of float start to

the first one and I gave a glass of

float and to the second and gave a class

text Center to the last one that's why

it's being displayed like this in the

center

the class with our text Center will work

on our text

and also on our picture so that we can

use our class in this way

in this lecture you'll learn how to

create a table using bootstrap it's

similar to creating a table in HTML

however with bootstrap you can change

the entire Outlook of the table using a

single class

to begin with I'll use a table tag and

then I'll use a said tag inside this tag

I'll introduce a TR tag and a th tag for

heading I'll copy the th tag and paste

it for four different headings I'll

Define the th values as hashtag first

second and third respectively following

that I'll begin another block of body

tags I'll again create a TR tag and a th

tag that will highlight the text the

next step is to create a TD tag with den

and another TD tag with Allen and yet

another with Joe

this will separate the columns and rows

giving you a table like the output that

you see here in front of you

now what if I remove the Allen tab as

you can see will now have three columns

on the screen

I'll go to the then and type columns pan

too

and this is how the result appears

I will now make use of a single class to

beautify the table I'll edit the table

tag by defining a table class from

bootstrap just look at the result on the

screen in front of you what is stylish

output I have here in front of me

you can now customize the BG color text

color

font or font style as per your choice do

you see how easy it is to design a table

with bootstrap

so buy now you must have developed a

thorough understanding of how easy it is

to use bootstrap and now on to the next

lecture

all right so in this lecture we'll talk

about the most important properties

without which working with bootstrap is

useless

and these properties are margin and

padding so if you study TSS in detail

you must be familiar with these

properties

and using these properties is a bit

complicated in bootstrap 5 because the

names of the classes in bootstrap 5 have

changed

I'll show you what I mean okay so here

I'll use a div tag and write lorem in it

I save it now I will assign to it the

class I change the text color to light

and the font style to bold

okay so let's use the classes of

bootstrap I write the margin here

if you want to give it from the top use

empty and if you want to give it from

the bottom use m b b stands for button T

stands for top

okay so there are five values in total

here the value of zero is zero the value

of 1 is

0.25 REM

the value of 2 is 0.5 REM 3 is 1 REM 4

is 1.5 REM and five is three REM in this

case we cannot give margin from the

bottom since we have no element in the

bottom so I'll give the margin from the

top let's say five

and you can see the result

okay so if you want to use padding the

same process will be applied like here

I'll write p t Dash five I save it and

this is what it looks like

okay now the issue is that new users are

unable to figure out the way to give

margin and padding from left and right

so previously in bootstrap 4 we used to

write

pl-5 so else was used to mean like left

but unfortunately as you can see it's

not working

okay so now I I'll write like ps-5 it

means padding from the start S5 and P

E-5 meaning the padding from the end is

five

so basically this solves our problem and

that's what you should do in bootstrap

five that's the syntax used in bootstrap

5. Okay so

bs5 meaning uh the padding from the

starters 5 pe5 meaning the padding from

the end is five and in a similar manner

we write like ms-5 and me-5 this means

the margin from the end and the start is

five

okay then I'll write P b-5 I'll save it

and this is what it looks like

now let me tell you one thing we've

discussed different screen sizes related

to the grid system like large small

extra small

Etc

so we'll use these properties here as

well

like how we can display our content

considering the green the screen size

we'll see it right away okay so first of

all I remove all of this I write Mt Dash

l g Dash five Mt md3

mtsm0 and save it and you can see the

result the margin on the large screen is

5 and as I'm reducing the screen size

the margin has also been reduced to

three

okay so remember one thing whenever you

want to display your content on a

specific screen you have to use all the

properties related to the screen size to

the specific screen size that you are

targeting for example you can use like a

large for the large screen size small

for the small one and medium for a

medium screen size okay in a similar

manner if you don't want to specify a

certain size you can write zero instead

like when you write 0

you're not specifying any particular

screen size

so

at the moment my margin from the top

side is zero

and the medium is three if I delete the

margin from the top

my browser will understand that I want

to keep the same size for the medium and

the large screen but if I want to give a

margin of 0 to the large screen I have

to give Zero from the top side otherwise

the browser will give

me the same size

to the large and the medium screen okay

so if I reduce the margin to zero

you can see the margin has disappeared

from the large screen so that's the only

novelty or modification that happened

with bootstrap 5 it's regarding margin

and padding they are now called the

start and end values instead of left and

right I hope that everything is crystal

clear to you now and now on to the next

lecture

let's now talk about form control so the

form is a major part of our website and

almost all websites use this property

along with the form submission property

now the question is in what ways can we

make our form presentable and attractive

so here I've used some of

the form some types of forms like email

address and password you can see the

value written here is the default value

which is shown because of bootstrap

okay so I'm adding a random value here

now if I delete this part

this is what it looks like

so if I uncomment this link tag you can

see the result next we'll use a few

classes which

will make or form more attractive so I

saved the file with the name

formcontrol.html you must know why I

have used the placeholder property here

and when it comes to the type property

it's used to limit the input that the

user can insert in the box like here he

can only enter a valid email address now

I write input equals to submit I save it

you can see this function is not working

because we haven't used the form tag so

I removed this part from here and paste

it into the form tag

now I write
the email address press on submit and as

you can see it works perfectly

this is how you can restrict your user

to submit only valid data now I'll use a

class that will make our form a little

creative

can you see this

the whole layout of the form has

improved by using a single class there

is a box Shadow here and the width has

also been applied automatically if I

maximize the screen the Box will

automatically adjust its widths

now I'll copy the class and paste it

here

save it I save it and as you can see

we have the result in front of us I'll

use another class with the name form

Dash label

and you can see the space over here has

been adjusted I'll also copy this and

paste it here and this is what it looks

like

okay so I've mistakenly used the input

twice here I will remove it

and here we go

now I use one more form control class

for the password I save it and you can

see the result all right so

that was the first lesson about form

control in the next lecture we'll

discuss this property in detail

let's move on

all right now we'll learn how to make a

drop down using the select element so if

you studied HTML you must be very

familiar with this already

um all right so we use the selector

attribute for the default value

but in bootstrap

yeah I mean in HTML we use the selector

attribute for the default value but in

bootstrap we learn how this property

Works in detail to make our website more

responsive and presentable so let's see

what's the equivalent in bootstrap all

right so before starting this lecture I

must tell you that we need to link this

CDN link otherwise the drop down won't

work

this is because it contains some

JavaScript coding which is necessary for

the drop down to work okay so now I'll

tell you how to copy this link so first

you have to open the bootstrap website

and in front of you there is a CSS and

JavaScript link and you can easily copy

it by clicking on this button here

you can also use a downloaded file

which which you already talked about in

previous lectures

so I'll go to the JS folder and you can

see this one or this bootstrap one

okay in my case I'm using a CDN links

because it helps uh in running the file

faster now what's the main purpose of

this we saw that the whole look of our

form had changed by using a single class

here also use a class with the name form

select and I'll save it

and you can see as I click on it this is

what it looks like

you can also customize it but it's not

necessary at the moment now let's adjust

its size

okay so here I'll copy it and paste it

and save it

then I write form select

LG and you can see the size has

increased

here I write form Dash select Dash SM

and you can see the result this is how

we can easily work on the sides next we

have multiple lines like if you want to

display this part of the drop down only

we can do that by using the multiple

attributes

so here I'll use the multiple attribute

and save it and you can see the drop

down is

not displaying okay so if I write more

content here you can see that a scroll

bar has appeared

yeah you can see the scroll bar in front

of you okay so you can also use this

property here I'll specify the size

let's say five and save it and you can

see the result if I increase the size to

6 the scroll bar would disappear and if

we increase the size to more than that

the scroll bar would appear again okay

so here I write size equals to 7 and you

can see the scroll bar has disappeared

so there is another property known as

disabled like if you want to disable any

input so I'll copy this part and paste

it here then I use the disabled

attribute and you can see the result

if I remove the size from here this is

what it looks like so one thing I wanted

to tell you is that bootstrap is always

preferred over CSS as we used a few

classes to make our form creative

however whenever we work in CSS and HTML

we have to use multiple classes which

waste our time

and yeah so that's the huge advantage of

using bootstrap it saves us so much time

and makes our life so much easier

all right so that was all about select

form and now on to the next lecture

all right

as you can see here I've taken a div and

used label and input tags in the input

tag I've written type equal checkbox

and I wrote default checkbox in its

label and in the label tag I've written

checked checkbox thus whenever the user

visits the website he can see the

default checkbox there

now I will uncomment this link here I'll

save it and you can see the layout of

the form has changed

so in this lecture we'll look at

everything in detail like how to make

the checkbox and radio and bootstrap

and yeah that's what we'll uh explore in

this lecture

okay so we just have to use a few

classes and we'll be good to go

so first of all I use a div and assign

it a class form check then I save it you

can see the result now it has taken some

margin automatically I'll copy this and

I paste it here

after that I'll use a class form Dash

check Dash input I'll save it and you

can see when I click on it the color

will change I copy this class as well

and I paste it here and as you can see

the color of this has changed as well

if I refresh the page the checkbox will

be shown by default

if I remove this from here and paste it

there

this is what it looks like

this is how we can make a checkbox

if you go to the bootstrap website you

will see that they have so many classes

and some of them are not useful for

beginners so

for now we're sticking to a

straightforward classes and yeah that's

what we're exploring in this lecture so

here I'll tell you about a few classes

with which you can quickly make a

checkbox now let's talk about another

class radio so I removed the checkbox

from here Android radio

and this is the result the issue here is

that when I'm selecting one radio the

other one is selected as well so I'll

write name equal

input Dash radio I'll save it I'll copy

this

and paste it here

make sure both names are written there

otherwise you won't be able to select it

okay so if you want to disable one of

these you can do that too here I'll

write disabled attribute so I'm using

the disabled attribute thus the user

can't click on it then we have another

class known as switches firstly I'll

copy this and I paste it here then I

changed the default checkbox to default

switch

and I save it now let's add the class

equal to form switch

I save it and as you can see we have the

result in front of our eyes

okay so I removed this part

and I change the type to checkbox I'll

save it and this is what it looks like

if you write radio here you will only be

able to select it but you can't remove

it then

okay so if I write check here this will

be selected by default so this is how we

can use different inputs to make our

form attractive and now on to the next

lecture

all right so in this lecture we'll

discuss the range and its classes in

bootstrap so first I'll use a label and

write select range

I'll save it now I'll create the input

of type range and save it this is what

it looks like okay then I'll use a class

with the name form range

and you can see the results

if you want to decrease the range you

have to use the grid system for that

we'll do that after creating a proper

form now I'll specify the minimum and

maximum width let's say Min equal to 0

and Max equal to 10

I'll save it and you can see the result

if I remove the Min and Max you can see

that it is smoothly passing through the

range but if I write the range the range

is fixed on a specific point rather than

going smoothly

if you want to specify the step like

here

I'll write step with value 2. you can

see

that we can select the point at 0 2 4 6

8 and 10. I hope it's clear now to you

and now on to the next lecture

so in this lecture we'll create a form

layout and learn how to divide our form

into groups

first I will use a div tag with class

attribute

and then I'll use this pen tag in which

I'll write username

so here I'll write input

uh I will use input and write type equal

text and the placeholder equal to name

I'll save it and you can see the result

now I'll change the layout of the form

by using a few classes in this div

I'll use the class input group then I'll

use another class here with the name

input group text

I'll save it and you can see the light

background color on the screen now I

will write a class in the input tag with

the name form Dash control I'll save it

and this is what it looks like I've

written some random words and you can

see the results like this

after that I'll use another div and use

a class with the name input Dash group

I'll save it then I'll use input android

type equal text and class equal form

control

and this is the result

now I'll use this pan tag and write

email you can write whatever you want

I'm just giving you an example and I

save it okay then I copy this class

and I paste it here and you can see the

result
I will use a placeholder here

and write email

and I save it

now let's move on to our next step here

I will use a label and write class equal

form Dash label this class helps in

adjusting the space

then I'll write enter your ID I save it

and then I'll use another div

in this div

I'll use the span tag and write enter

your URL and I save it after that I use

a class input Dash group Dash text and

you can see the result now I'll use

input tag and drawing type equal to text

and the placeholder equal to the website

link

and here I write class equal to form

control

and this is what it looks like

so the grouping is still left

so here it will copy the input class and

paste it and as you can see

these are so close to each other so I

use

a margin from the bottom let's say three

and as you can see there is some space

between them now

okay so I'll copy this and paste it here

and you can see the result

now I'll use a div Android class equal

to input group because whenever we want

to make an input group we have to use

the input group class

after that I'll use an input tag and use

a class with the name form control

you must be finding this convenient as

I'm using the same classes

so here I write placeholder equal

client name then I'll use this pen tag

and write contact

I'll copy this and I paste it here then

I save it and it looks perfectly fine

okay so I just change the placeholder

here and write email and as you can see

this doesn't look so good so I'll go to

this pen tag and write class equal input

group text

I'll go here and write

mb-3 to create some space so the class

isn't working here

so I'll go to the div tag and write

mt-3 I'll save it and you can see that

it is working

now let's create the text area in the

last one so I'll use a div and write a

class with the name input group

I'll save it and then I use this pen tag

here I'll use another class with the

name input group text

and you can see the result

I think

I made a mistake here so let me delete

this and then I use a class in the span

tag with the name input group text

and then I write description

I save it and then I use a text area

element and a class

and as you can see it looks a little

bigger because it has so many rows and

columns

so I remove them and you can see the

result

now remember that whenever you're making

a form you have to use a form tag

I'll show you how to do that

so here I'll use the form tag and delete

this part

and as you can see we have the result on

our screen

all right so it's important to use the

form tag otherwise the functionalities

won't work

all right and now on to the next lecture

in this lecture we'll use all the

classes that we used in the previous

lessons related to the form

first I'll use the div and add a class

with the name container fluid then I'll

create a form and here I'll use a class

with the name row g-3

after that I will make another div and

use a class with the name call Dash

lg-6 I'll save it then I'll go here and

make a label I'll make a class with the

name form label

this will help

to identify the label so here I'll write

username I save it and that's what it

looks like

okay now I will add an input tag and add

a place holder with the name username

then I will add the class with the name

form control and I save it and you can

see the form is taking the entire width

I want the username and password in one

line so here I will write password and

here as well

okay I save it and this is what it looks

like I haven't changed its type here

I'll change it and then I save it

now you can see the username and

password are shown in separate rows this

is because I've used one div here

so I removed this

and I make another div

and I'll paste it here then I'll use a

class with the name call Dash lg-6

here I write

the size of the medium screen and small

screen

this means the username and password

will be shown in one row on a large and

medium screen but it will be shown in

two different rows on the small screen

okay so now I'll copy this and I paste

it here I'll save it and you can see the

result

now we'll move to the next section here

I'll use another div and I write class

equal call Dash 12.

then I'll use the label and write class

equal form Dash label I save it after

that I'll name it email

I'll make an input and write email then

I write class equal form control and I

save it here I write placeholder equal

email at

com

now

we'll write some addresses so first of

all I'll use div and add a class with

the name call-6 this means all the

inputs will belong to column 6 then I'll

use the label and write address one here

I'll use input and add type and

placeholder I'll copy this and paste it

and I'll change the data so this is what

it looks like and here I write address

optional

so this is optional okay now we'll make

three tags in one single row so I'll use

a div and add a class with the name call

Dash md-5 I'll save it then

I'll use a label and write city after

that and use the input and add the type

and class with name form control

okay now I write the placeholder here

I'll copy it and I paste it here

then I write call nd4

so here I write region instead of the

city I'll save it and this is what it

looks like now I'll make another div and

write three you can see it's coming in

the next row this is because there are

13 columns here and I have told you

before that only 12 columns

can fit in one row so I'll change its

name and write code

and this is what it looks like

if you want to select any text and add

options you can also do that so here

I'll use a div and add a class and this

is what the overall form looks like now

I'll use a div and add a class with the

name call dash 12 and here I'll make a

button
so I'll specify the type as submit and

you can see the button now I'll type

something here and click on submit and

the form has been submitted successfully

so that was all about the form structure

you can also use validation but you need

JavaScript for that for now we're still

left with a few more basic properties so

let's move on and talk about them

so we have covered a lot of properties

in bootstrap now we'll use some advanced

classes

firstly I'll use a div and add an input

of type text then I'll use a placeholder

with the name username

after that I'll use a label Android

username in it

then I'll use a class with the name form

control and I save it

I've copied this div and I paste it here

then I write password in the label and

the placeholder I'll save it and this is

what it looks like

now I'll use a class here with the name

form floating I'll copy this and I paste

it here too you can see that the

username has entered into the input

category

here I'll increase the margin from the

bottom to Five I'll save it and you can

see the text floats when I click on it

but whenever we used the control form

the Box Shadow will appear so this is

how we can make our text float using the

form floating class and now on to the

next lecture

all right we've covered a lot of

concepts related to bootstrap we've

learned how to use different classes and

other properties which will eventually

help us create big projects in the

future in this lecture we're going to

talk about a component known as alert

and all the remaining lectures will be

covering the important components that

are mostly used in bootstrap if you're

unaware of these terms you can simply

visit the bootstrap website and get the

source codes from there but the problem

is that the source code contains a lot

of classes making the user unable

written paragraphs in them I will only

use a few classes here so first of all I

use a class with the name alert and I

save it so you can see that it has taken

some space here but it doesn't matter

okay

so now I can select any options from

these suggestions I'll choose alert

danger I save it and you can see the

result I'll copy this and I paste it

into all the div tags and you can see

the result here as well

I'll change all the names here primaries

secondary info success dark and I'll

change the text color to light and this

is what it looks like

and here I write Alert warning so

different colors represent different

alerts and these are displayed when the

user visits the website

so that was all about the alerts and now

on to the next lecture

so in this lecture we'll learn how to

make buttons as they play an important

role in the formation of your website

and it's easy to create them so first

I'll use a div tag and use a button with

the name submit and you can see what it

looks like

here I'll use two classes the first is

ptn and the second is BTN primary I'll

save it and you can see that the look

has completely changed just by using uh

two different classes

all right so now I'll copy this and I

paste it here then I write info and you

can see the color has changed

here I write success and this is what it

looks like

I can also give margin to it like here

I'm writing mt-5 and you can see the

result if you want the buttons in the

center we write text Dash Center I'll

save it and you can see the result if

you want them on the right side you can

write text and

and yeah so in bootstrap 4 we used left

and right button bootstrap 5 we're using

start and end as I mentioned previously

all right so this is how you can create

buttons and now on to the next lecture

in this lecture we'll talk about badge

so a badge is a form of a label that

identifies different things

whenever you visit any website you can

see different notifications and labels

which are categorized as badges

I'll show you right now so

I have used an H1 tag here and I write

hello inside of this H1 tag I'll save it

and you can see the result then I'll use

the span tag and write word

and this is what it looks like

after that I'll use a class with the

name badge and you can see that the size

has been reduced now I'll change its

background
as you can see that it has taken a

background color okay so this is similar

to the button but here we can easily

adjust its size so if you want to

decrease the size you have to use other

tags like here if I use H6 tag you can

see the size has been reduced

now I'll use a button and I add a class

with the name BTN bdn Dash outline Dash

info

and yeah so I think I haven't told you

about this property in the previous

lecture but this is simply used to apply

a hover effect to the buttons so here I

write success and this is the result now

I will use another span tag and write

fail I'll save it and this is what it

looks like

then I'll use a class with the name

badge

and I write BG Dash info now if you want

to decrease the boldness you must know

how to do that

all right so if we use the h110 the size

of the text will increase and you can

simply increase the font size and the

div all right so these are some basic

concepts about the badge it's not that

important it's just used to put the

label
and now on to the next lecture

all right we've discussed buttons and

badges in the previous lessons and in

this lecture we'll use these to make

cards

so there are a few classes related to

the cards that will assist us in the

process

first I'll use the div and write header

I'll save it and you can see the result

then I'll use an image tag write the

source and you can see that this is the

image folder

inside which we have lots of images here

so I'll select one of them I'll save it

and you can see the image here

the image is quite larger so we'll

adjust it here I'll use another div and

add a class with the name Card buddy

then I'll use the H1 tag and write

courses in it I'll save it and you can

see the result

after that I'll use the paragraph tag

and write lorem in it I'll save it

then I'll use a button add the type and

class with the name BTN BTN Dash outline

Dash secondary

I'll

draw a class with the name card footer

here I will write class equal card

header and I save it now I've missed one

thing so I'll copy and remove this I

will use another div and write class

equal card header I'll paste this now

and as you can see the image has

adjusted according to the screen

but I want the size to remain small so

here I'll use a class with the name card

Dash image Dash top

now the results are not that effective

so I'll change the image I'll maximize

the screen and show you how it looks

like

and here you go you can see the result

if you want to specify the width I'll

use the style tag and write widths equal

to 150 pixels this looks smaller so I'll

increase it to 400 pixels

and now it's okay it looks great so if

you want to customize it further you can

do that by selecting any class and

writing important here and then you can

change its color

now we'll make more cards so here I'll

use a div and the class with the name

row because we cannot add any card

without the row I'll use another div

here and right container Dash fluid now

I'll remove this part from here and

paste it here

okay so I've done this because I want to

make more cards so I'll copy this and I

paste it twice and as you can see there

are three cards here

they are collapsing a little bit so I'll

decrease the width of all

the cards to 300 pixels I'll save it

and you can see all the cards are now

in one row

now why have I used the row and

container fluid

so

if I remove the row from here you can

see the cards are shown in a column and

the container fluid is used to adjust

the widths and prevent the scroll bar

from appearing here

so as you can see if I remove it

the scroll bar

appears like when I remove it the scroll

bar appears

and this is how you can easily make

cards

you can also do a little bit of research

on Google and find out about different

HTML and CSS card designs

all right

so I talked about the basics but of

course if you want to explore this topic

deeper I urge you to go and do some

extra research

all right

I hope that

this is clear to you now

and now on to the next lecture

all right in this lecture we're going to

make a slider

and bootstrap a slider is different from

a carousel a slider slides the images

horizontally or vertically usually

horizontally usually with a momentum

effect a carousel rotates

the images readily and in a 3D feel by

using the distance and the depths of the

field

the glasses of slider and bootstrap are

named as carousel

all right so before diving deeper into

the topic I must tell you one thing you

should have this script link

in your file otherwise the classes won't

work and as you can see here I can click

on previous and next to slide the images

back and forth

so

you can also see these indicators here

in other words these functions won't

work if you don't have this link in

front of you here so you need to use the

script link

all right now we'll make a carousel for

our website

so first of all in order for us to make

a carousel I will need to use a div and

write ID equal Carousel indicators

then I write class equal Carousel slide

I save it now I'll use an attribute data

Dash BS that Dash right equal Carousel I

save it let's move on to our next step

so first I'll use a div and add a class

with the name equal to Carousel Dash

inner then I'll make another div Android

class equal to Carousel item

this inner content will be shown with

the help of Carousel inner and all the

items will be displayed with the help of

the carousel item

here I'll use the active class so

whenever I refresh the web page this

image will be on the front

all right so I'll use an image tag and

specify the source then I'll select the

image after that I specify the width and

height here I write widths equal to 400

and height equal to one thousand I save

it and here I write class equal D Dash

block so that all the images are shown

in one block

now I copy this part I paste it here I

change the images here and this is what

it looks like

let's move on to the next step

so I'll go to the top right here and

make a div I'll write class equal

Carousel indicators I'll save it then

I'll make a button and specify the type

after that I'll write data Dash BS Dash

Target this will help run the function

when we click on the image I'll copy

this ID here I paste it and I save it

then I'll use another attribute here

data Dash BS Dash side Dash 2 equal to

zero and you can see

this isn't working right now so I'll use

some classes here I write class equal

active then I copy this part and paste

it

there so that the indicators are shown

I removed the classes from here and I

change this to one and this one to two

now the problem I'm facing here is that

the images are fixed so I'll go

there and specify the width

I'll save it and you can see the images

here you can also see the indicators but

they are not working because we'll still

need to assign some classes here so

we're almost done with most of the work

we just have to add the icons

so that you can move through the images

I'll go there and make a button I'll

write class equal Carousel control prev

I'll save it then I specify the type and

use the attribute data Dash bs-target

after that I'll copy this and I paste it

here so adding the images is a very

simple step the problem arises at the

point where we have to link them that's

why I used an ID

now if I click here a cursor can be seen

But I want the icons to display here so

I'll write data Dash BS Dash side equal

prev I saved it then I'll use this pen

tag in the button I'll copy this class

and paste it here and I write icon but

it won't work because I haven't used the

attribute if you want to write previous

or bad you can do that as well so here

I'll make the next icon I'll copy this I

paste it here and I change previous to

next so this is not that much visible

because the background is a little bit

lighter

now

these items are not working because I

have used the wrong idea and I I've

written like active in all the images so

the browser cannot understand which one

to choose I'll remove the class

from these two and I save it

and you can see the images are sliding

now

I have to use the correct IDs for the

icons to work so I write ID equal

Carousel example indicators and I save

it this is still not working as I

haven't used a hashtag so I'll put

hashtag I'll copy this and I paste it

here and as you can see the indicators

are working now but the icons are not

because there are still some issues in

this part

so here

I have made a spelling issue I write

slide instead of side

and it's finally working now finally

it's working this is how you can make a

slider

all right so let me do a little recap

so the use of ID is very important

because the icons and indicators will

only work if we use the correct ID

the carousel Dash slide is used to slide

these images and Carousel Dash

indicators is used to make these

indicators so it's very important to

remember these classes if you cannot

remember them you can visit the

bootstrap website and you'll see some of

the carousels there

and yeah so that's how you do it if you

cannot remember them you can simply copy

and paste uh you know like

the classes you can simply copy and

paste it if you cannot remember them but

it's preferable to write it on your own

all right so that was all about sliders

and now on to the next lecture

all right so we covered many of the

aspects of creating a Carousel and a

slider on our website with the help of

bootstrap let's now move on to the next

topic

the most important part of our website

without which no website can be built

and this is navigation so I'm gonna talk

about navigation and navbar which is the

top slide

part of the website

uh represents exactly that so we call it

nav bar it's

the top Slide part of the website if we

create this nav bar using CSS we have to

use many classes and properties

but with the help of bootstrap we can

use it simply by writing some code of 40

to 50 lines we can create a beautiful

nav bar and you can also customize it

all right let's get into it first I

write the navbar nav you already know in

HTML that the purpose of the navbar is

to create an F bar now when it comes to

bootstrap all the classes and tags in

bootstrap that are used under the nav

bar that you see here and now they are

used under the navbar and not outside of

it

okay so first of all I write the div tag

I give a class of container fluid and

save it

since I've not given any test

so it will not work

so

I didn't

give any test so it will not work now

I'll take another anchor tag to put the

logo in the nav bar so I write here the

name of the website meta brains you can

see the title appears but it's

underlined now to remove the underline

I'll use a class of navbar brand name

it's a class of bootstrap

that will help me use this underline

let's move to the next part so now I'll

use a class of navbar

one more navbar expand LG

these classes identify that we're

working in the nav bar

I'll use one more class of navarlight to

see the color and the color is light

because that's what I'm choosing like I

said nav bar light

furthermore we'll use classes anchor

tags and we'll give details

regarding the pages

so I write everything under this div

here I create the UI and then Li name

tag in the LI first I have tried an

anchor tag as this is my home page I

write the home page and copy it to the

required pages and paste it now write

the menu and save it next I'll write

here about contact us and privacy now

use some classes by going to the UI I

choose a class navbar and I save it and

yeah so do you see this the dots of the

list are no longer available here now

I'll use one more class of margin start

Auto

then I delete this because it's no

longer in use right now

then in all the Li

there must be one class I will use a

class of nav items to display the list

of items also we use a class in the

anchor tag nav link

now where I've used the nav link the

color changes to black as you can see so

copy all of this and paste it

okay

and then we move to the next part so now

we're gonna use tags in navbar you can

see the list tags appear to be different

and they are not in a single line

so to fix this take a div and cut it all

then paste it here

so apparently still

there seems to be no difference so we

have to use some classes

uh all right so I'll choose a class

called navbar collapse because there are

different displays on different screens

I'll use one more class called collapse

by using this

all right and the data hides it away

when it's displayed on a big screen

it will be in a single line

so as you can see if I zoom out

on my screen

you see the result now go to the nav bar

to write margin start Auto

and by using this data it shifts to

another side

and here we go you can see the result

so it shifted to the other side

all right now if you want to add space

right five

now we'll create sub menus in the menu

go to the menu create a UI tag and make

a list I'll create three lists

so there are three dots that appear now

enter the data in the anchor tag menu

one

now copy this and paste it the data

appears but it looks so creepy so let's

change this go to the main anchor tag to

create a class of drop downs toggle and

save it now a small Arrow appears in

front of us

I'll give an ID from which my data

collapsed now select the menu by using

the drop down and save it

give it one more class of

data.bs.toggle this is used to access

data when clicked on alright so in the

toggle I write a drop down and I save it

but there is not much difference because

there's something more

do it to change so now I'll go to this

UI as this is a drop down so we're

learning about the drop down menu and

then I save it and here you go

the data has been

filled out but there is nothing that

appears on screen so

to display the data we need to use

classes take a class of drop down items

and save it still nothing is showing up

now copy everything and paste it

and as you can see I've changed their

names

the menu is opening but

not in the right order because I've just

missed the class at the start of the LI

drop down so here

I just have to use a drop down class I

save it

and as you can see it's opening it the

right way

by using this method

you can make more lists

you can also divide them

alright so I'll just divide it after

menu two I write Li and use HR and class

drop down divider you can see the

division here for example see the

website meta brains

to zoom in and zoom out display is

managed by collapse now I want that

when the screen is small all the buttons

appear

we can create a button near the anchor

tag to do this you can use a class of

nav bar Toggler

now you can see the button of the nav

bar Toggler furthermore I write a type

button and use a new attribute after

data BS toggle of collapse which shows

us all the data all right next under

this button I'll create the nav bar spam

tag span tag

I'll write nothing inside this one just

I just create a span tag by writing the

navbar Toggler icon

and as you can see on the screen in

front of you this is the output that we

get all right so let's change it into a

button in the span class after the nav

bar Toggler

you can put the inverted commas now

we can see a bottom

all right so when the data collapses it

shows in a button as you can see it's

not working there

all right so for it to be working go

into the div tag and give the ID in F

bar tab now go to the Toggler button and

write

data.bs.target in Target call

ID hashtag

now the data is being displayed by

clicking on the button this button won't

work on the whole screen on big screens

it shows like this

all right now I'll check the responses

on the small screens when the button

appears

and here you go by this method you can

create an F Bar that can be checked up

to 300.

all right so in the previous lecture we

discussed about small and big classes

the creation of navbar the carousel

giving color

and the workings of the grid system and

bootstrap

let's now see how all of this works in

action how all these Concepts work in

action we'll see this through a project

that we'll be doing from scratch

all right so using bootstrap will

develop the structure for the website I

hope that you do remember why we use

bootstrap basically the use of bootstrap

is to work quickly and the main purpose

is to make the website responsive by

using fewer classes

let's get into it so first open a folder

and make a new folder named

bootstrap project selected and open it

now create a file named index.html and

create one more file named style.css we

also have to use some CSS files in this

create the folder named images just one

thing you need to be careful about if

you're using the downloaded bootstrap

then put a bootstrap folder into this

folder and attach the CSS file with it

otherwise you can do what I'm doing here

I'm using a CDN link I've not used

the bootstrap downloaded files so you

can choose

the method you like all right now I'll

use some images in this folder because

for our website we have to use some

images you can see that I've selected

some images we'll be adding these images

to our website so first of all I'll

create the structure of HTML for example

I give a title of meta brains before

starting I'll add some links to it first

I add a link

for to link my CSS file

and as my CSS file is not in any folder

I write the name of the file so here you

go now I'll go to the website of

bootstrap and try to use those links all

right so I'm on the bootstrap page

I'm on the bootstrap website and here I

can copy the link I need so I'll take

this one this link

um

which represents the JS deliver section

and I paste it into the CSS link now I

copy the second link and paste it here

so this is for JavaScript this is used

for all the collapse functions all right

open go live take a div tag and use a

class named Banner

to add some images in the background go

to the style sheet if you want to open

both screens use the collapse button now

use a universal selector and add margin

button

and padding to zero

one more thing we'll copy one more link

of Google

fonts

select class and give a background image

and write URL in it open the images

folder use the first image and save it

so it's not working unfortunately

um so I'm gonna leave it like this for

now because it's quite annoying for me

to do the collapse men all right

Now set the width to 100 percent

and the height to 100 VH

as this does not fit on the screen so

give the background position to Center

Center look at the image and adjust the

background size as cover

and here you go take a look at this it's

awesome

furthermore we'll create a navigation

using the nav bar and anchor tag right

meta brains in the anchor tag and save

it give a class of navbar brand and

change the color by using the class nav

bar dark okay so if I want to use like

Bold characters I'll need to write FW

bold all right so it looks like I made a

mistake

I didn't give a container so let's give

it a container

let's give a container to it give a

class named container if it takes so

much space cut it out and paste it to

the last one here

all right let's use the font family go

to the browser open Google fonts search

for a font called Railway

select the style click on import copy

this and paste it into your CSS file

then you save it

and here you go as you can see

we have an output that has changed

accordingly

all right and now on to the next step so

create one more div and take you I and

Li in the UI
give it class Nev items and multiply it

by six take an anchor tag right home

copy it and paste it all

again take a class nav

link and change their names to courses

Gallery features about us and privacy

then you save it

now

to change the color take a class text

light

and ball text by using FW bold and save

it

take a look at this some dots are

appearing so what can we do

you can also delete these dots

so in order for me to delete these dots

go to u l use a class of navbar Dash

nav and save it

this will delete the dots now

to put them in a single line use a class

collapse nav bar

collapse if we save it like this it will

hide away by maximizing the screen

because I didn't use expand largely so

you can write here an F Bar dot expand

dot LG and you save it

all right let's Now set the margin now

go to the u l take the class of

ns-auto and save it it will set the

margin Auto
so that was it for

navbar so that was all about the basics

of navbar now

on small screens

we use elements buttons names and

class by using spam tag so use a class

in the spam tag of

collabs.tuggler. icon

and can you see this can you see the

output it's great it's a small Dot and

chose the Arrow by clicking on it

so yeah that's what it shows us it

creates small elements now we'll use

some classes like navbar.tuggler and

save it as I've discussed before about

these classes by using the class button

the dot seems bigger now I'll use the

attribute

data.bs.tuggler collapse and I save it

now use the ID in the div tag idea with

the name nav Toggler

now I want to Target this ID I write

data.bs.target and I call this ID using

nav toggle

all right so this is not working because

I've written nav toggle which is wrong

the correct one is nav Toggler

so I I've changed it

and here you go

and now on to the next part now we'll

customize our panel go to navbar write

H1 and then learn everything in it and

you save it now use classes fw.bull

display.2

and here we go you can see that our text

characters are in bold now

text Dot Center text.light this class

will Center and Enlighten the text okay

so now give it Banner Dash heading and a

margin of 150 pixels and save it

this

lag P near H1 and take

some dummy text like lorem and as you

can see that alarm appears here in front

of you now to delete the scroll bar use

the command Control Plus alt Plus

Z I'll use the following classes

text.light FW dot bold text Dot Center

for lightning and

for the Bold characters and also to

center it on on my page

all right

right click here and use a class of

btnbtn.outline.warning.text.light

you can change warning to anything you

want like info and so on

now to center it I put one div here I

cut it I create the div again here I

paste it and call it

as class text Center

if you want to put it under this one you

can go to The Heading change the margin

to 250 pixels and you save it it will

display like this in the center

all right so if you want to make a

button manually and want to change the

color choose banner.bdr all my classes

are related to Banner when I'm working

in Banner

this practice makes you a professional

coder by using just

classes related to a specific topic

you will be much more organized alright

so right Dot banner.pdn and set the

background color to Aqua

it's not working unfortunately because

it seems that I made some spelling

mistakes so I just I'll correct it right

away and now

I changed the background to RGB

and I also changed the border to

non-important and it's outlined to

non-box dot Shadow none

to increase the effect I copy this I

paste it here and I created the

transition of 0.5 seconds now let's

change the color right box Shadow none

inside of it
you always have to write important in

bootstrap by using this you can create

buttons manually

all right now on to the next topic so

let's go to the next section of making a

Blog

go to the section make a class of blog

and save it now go to div make a class

of dot container and save it

you can see it's not displaying anything

on the screen because I didn't write any

content so create two divs and give the

first one class of call Dot lg.6

call.md.6

call.sm.2 copy it and paste it here I'll

work in these two divs as you can see

the First Column large is six and the

column medium is also six so six plus

six is twelve and the second class is

already 12. on a small screen it will

display in a single manner give a class

of blog.img save it go here and give it

you can see the image all right so

you can also delete the scroll bar and

correct the name of the container class

now give the background size cover and

background position to the center

now the div is attached to the upper one

for separating

all right so go to bootstrap and give a

margin of five

now go to the section column and give

the heading journey and

you can put the

text characters in bold

you can also add a paragraph where you

can see the lorem

next you can create a button of check

more and you save it

and you can see the result

in the small screen it's displaying like

this the scroll bar is not displaying

because we've created this in bootstrap

and yeah so that's pretty much it here

we created a panel and a blog post

and now on to the next topic so let's

create a footer make a div and give it

the class name of container take a row

class and make four div sort them one

two three four in div one take class of

code.lg.3 because there are four divs in

a row so I'll divide this by four take

another class of call.md.6 I need this

to be six by six and the last four

and last thing is for the small screen

to be displayed in a single row so now

go to the first div in H1 Android meta

brains and also write a paragraph so

next you can modify this by giving

text.warning

to make its font bold

you can use as well FW dot bold

also you can change the title background

color by using this tag bg.dark now go

to paragraph give it the class

text.light

and here we go we have our output all

right so for the separation

you can give a class of nt.3 now to make

listings in H1 you can write courses

give

a text color of text.light also give a

margin by writing mt.3 now write mt.3

text warning and make it bold

okay next you can write UI and make some

Li

and here we go you can see four lists

giving me names like python Java C plus

plus and Ruby if you want to remove the

list go to the LI

androidlist.style.type none and this

will remove the lists all right and now

on to the next section

let's now talk about adding Social Links

like Facebook

and so on

alright so you can copy this

you can paste it here

now just change their names write links

and names for example Facebook email

Tick Tock Instagram

and as you can see it will appear in the

list alright so next if I want to add

some contacts to add some context copy

the above data that you see in front of

you and paste it here just replace links

with contact us and update the contacts

by adding

an email address contact number and a

website and here we go you can see the

output in front of you

so that was it for our mini project that

was all about the menu project that we

did together

and yeah so

I hope that it helped you summarize the

different concepts we studied together

in this course

we created banners a blog post and a

footer

in total I've used 33 properties of CSS

and other classes of bootstrap in this

project so yeah

I like to do things in a very efficient

and effective manner if we did the same

project with CSS it would have taken us

so much time but by doing it with

bootstrap
uh we were able to get the same result

as you can see in front of you it's a

very beautiful website that we created

with the help of bootstrap

thank you so much for going through this

course I wish you the best of luck

and see you next time