BootStrap

Bootstrap is front-end designing framework, which is used to create a responsive website.

Where as a responsive website I a device friendly website, which can run on each kind of devices
as per as their configuration.

How To Create a responsive website using bootstrap:

1. Go to https://www.getbootstrap.com/
2. Choose version as par choice
3. Copy CSS and Js Library
4. Paste your libraries in head section of webpage.
5. Use pre-defined classes as per as designed.

Container: To provide left and right margin with tag, we used container class.

Syntax: class=”container”

Container-fluid: To provide left padding, we used this class.

Syntax: class=”container-fluid”

Text-center: To shift text content in center of page, we used this class.

Syntax: class=”text-center”

Text-start: To shift text content in left side of page, we used this class.

Syntax: class=”text-start”

Text-end: To shift text content in right side of page, we used this class.

Syntax: class=”text-end”

Text-color: To set color on text, we used this clas.

Syntax: class=”text-color-name”

Bg-color: To set background color in page and tag, we used this class.

Syntax: class=”bg-color-name”

Display: To set frquent font-size of text, we used this class.

Syntax: class=”display-1/2/3/4/5/6”
Heading: To show text content as heading, we used heading classes.

Syntax: class=”h1/h2/h3/h4/h5/h6”

Color: Bootstrap provide 9 standard color. Which given below:

1. Red= Danger
2. Orange= Warning
3. Green= Success
4. Light Gray= Secondary
5. Dark Gray= Dark
6. Blue= Info
7. Sky Blue= primary
8. Light White= Light
9. White= white

Grid: To create row & column layout, we used these grid classes.

1. Row: To create row section in web page, we used this class.

Syntax: Class=”row”
2. Col: To create columns in row, we used this class.
Syntax: Class=”col”
Class=”col-device-code-size”

Device Code:

1. Large Device: lg
2. Middle Device: md
3. Small Device: sm
4. Extra Large Device: xl

Size: In bootstrap, the height unit of page width is 12. So as pas this unit we have to decide size
of column width.
Table: To create responsive and flexible table in our page, we used table class.

1. Table
Syntax: class=”table”
2. Table-striped: To show table strip,we used this class.
Syntax: class=”table-striped”
3. Table-hove: To show hover on table, we used this class
Syntax: class=”table-hover”
4. Table-bordered: To show border on table, we used this class.
Syntax: class=”table-hover”
5. Table-color:To color table, we used this class.
Syntax: class=”table-color-name”

Card: To create card in our webpage for showing items and products, we used card classes.

1. Card
Syntax: class=”card”
2. Card-header: To Create header section of card, we used this class.
Syntax: class=”card-header”
3. Card-Body: To Create body seciton of card, we used this class.
Syntax: class=”card-body”
4. Card-footer:To create footer section of card, we used this class.
Syntax: class=”card-footer”

Form: To Create Responsive Form, We used form class.

1. Form
Syntax: class=”form”
2. Form-group: To create entity group we used this class.
Syntax: class=”form-group”
3. Form-control: To create responsive entity we used this class.
Syntax: class=”form-control”

Button: To create a bootstrap button for form, we used this button classs.

1. Btn
Syntax: class=”btn”
2. Btn-color: To set button color, we used this class.
Sytnax: class=”btn-color-name”
3. Btn-outline-color: To set button outline, we used this class.
Syntax: class=”btn-outline-color-name”
Modal : This class is used to show a pop up dialog in our webpage.

1. Modal
class=”modal”
2. Modal-dialog: This class is used to show modal dialog.
Syntax: class=”modal-dialog”
3. Modal-content: This class is used as container class for modal header,footer and body.
Syntax: class=”modal-content”
4. Modal-header: This class is used to show modal header.
Syntax:class=”modal-header”
5. Modal-body: This class is used to show modal body.
Syntax: class=”modal-body”
6. Modal-footer: This class is used to show modal footer.
Syntax: class=”modal-footer”
7. Fade: To fade background we used this class.
Syntax: class=”fade”

Attribute:

1. Data-toggle: to perform toggling, we used this attribute.

Syntax: data-bs-toggle=”modal”
2. Data-target: To target modal, we used this attribute.
Syntax: data-bs-target=”#id-name”
3. Data-dismiss: To close modal, we used this attribute.
Syntax: data-bs-dismiss=”modal”

Nav: This class is used to create navigation.

1. Nav:
Syntax: class=”nav”
2. Nav-item: This class is used for nav-items.
Syntax: class=”nav-item”
3. Nav-link: This class is used for nav-links.
Syntax: class=”nav-link”

Height: To set height of any tag, we used height class.

Syntax: class=”h-25/50/75/100”

Width: This class is used to set width of tag.

Syntax: class=”w-25/50/75/100”
Margin: To shift tag in our web page using bootstrap, we used margin classes.

1. Margin : class=”m-1/2/3/4/5”
2. Margin left: class=”ml-1/2/3/4/5”
3. Margin Right: class=”mr-1/2/3/4/5”
4. Margin Top: class=”mt-1/2/3/4/5”
5. Margin bottom: class=”mb-1/2/3/4/5”

Padding: To shift content in our web page using bootstrap, we used padding classes.

1. Padding: class=”p-1/2/3/4/5”
2. Padding Left: class=”pl-1/2/3/4/5”
3. Padding Right: class=”pr-1/2/3/4/5”
4. Padding Top: class=”pt-1/2/3/4/5”
5. Padding Bottom: class=”pb-1/2/3/4/5”

Display: To set display feature in tag, we used this class.

Syntax: class=”d-none/flex/block”

Justify-content: This class is used to shift content at specific place.

Syntax:

Class=”justify-content-start/center/end”

Carousel: This class is used to peform image sliding.

There are few classes for perform image sliding.

1. Carousel
Syntax: class=”carousel”
2. Carousel-inner: This class is used as container for carousel-item.
Syntax: class=”carousel-inner”
3. Carousel-item: Carousel item class is used as container for images.
Syntax: class=”carousel-item”
4. Carousel-caption: To show carousel caption we used this class.
Syntax: class=”carousel-caption”
5. Active: This class is used to set first image for sliding first.
Syntax: class=”active”
Navbar: To create responsive navigation, we used navbar tag. There are multiple navbar classes
for different different purpose.

1. Navbar
Syntax: class=”navbar”
2. Navbar-expanded: This class is used to show navbar in large device.
Syntax: class=”navbar-expanded-lg”
3. Navbar-color: This class is used to set navbar color.
Syntax: class=”navbar-color”
4. Navbar-brand: To show images and text as navbar icon, we used this class
Syntax: class=”navbar-brand”
5. Navbar-toggler: To show toggler, we used this class.
Syntax:class=”navbar-toggler”
6. Navbar-toggler-icon: This class is used to crate toggler icon.
Syntax: class=”navbar-toggler-icon”
7. Navbar-collapse: This class is used to create collapse.
Syntax: class=”navbar-collapse”
8. Collapse: This class is also used for collapse.
Syntax: class=”collapse”
9. Navbar-nav: To create navigation, we used this class.
Syntax: class=”navbar-nav”
10. Nav-item
11. Nav-link

Attribute:

1. Data-bs-toggle
2. Datab-bs-target