Contents

Starter template:-................................................................................................................................................... 2
Container: - .............................................................................................................................................................. 2
Grid basics:-.............................................................................................................................................................. 3
Basis structure of Grid:- ....................................................................................................................................... 3
Typography:-............................................................................................................................................................ 4
Colors: - .................................................................................................................................................................... 4
Background: -........................................................................................................................................................... 5
................................................................................................................................................................................. 5
Table:- ...................................................................................................................................................................... 5
Contextual Classes: -Contextual classes can be used to color the whole table (<table>),
the table rows (<tr>) or table cells (<td>). ......................................................................................... 5
Table-responsive: - ............................................................................................................................................... 6
Image: - .................................................................................................................................................................... 6
Buttons: -.................................................................................................................................................................. 6
Button size:-......................................................................................................................................................... 6
Button groups:- ........................................................................................................................................................ 6
List :- To create a basic list group, use an <ul> element with class .list-group,
and <li> elements with class .list-group-item: ................................................................................. 7
Dropdown:-.............................................................................................................................................................. 7
................................................................................................................................................................................. 8
Cards: - ..................................................................................................................................................................... 8
Carousel with indecators:- ....................................................................................................................................... 8
Collapse:- ................................................................................................................................................................. 9
Navbar:-

............................................................................................................................................................................... 10
Tooltip: ................................................................................................................................................................... 10
Utilities ................................................................................................................................................................. 12
[A] Borders: ........................................................................................................................................................ 12
1. additive: ................................................................................................................................................. 12
2. Subtractive: ............................................................................................................................................ 12
3. border color: .......................................................................................................................................... 12
4.border-radius: ............................................................................................................................................. 12
Width: ................................................................................................................................................................ 12
Height: ............................................................................................................................................................... 12
Spacing: .............................................................................................................................................................. 13
 Display: ............................................................................................................................................................... 13

Starter template:-
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>

Container: -
 We have two classes in it
o The .container class provides a responsive fixed width container
o The .container-fluid class provides a full width container, spanning the
entire width of the viewport
Grid basics:-

The Bootstrap 4 grid system has five classes:

 .col- (extra small devices - screen width less than 576px)

 .col-sm- (small devices - screen width equal to or greater than 576px)
 .col-md- (medium devices - screen width equal to or greater than 768px)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

**These all (sm,md,lg,xl) are basis on breakpoints

Basis structure of Grid:-

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->

<!—It makes equal size of grid -->

<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

***Create a row (<div class="row">).

***Then, add the desired number of columns (tags with appropriate.col-*-* classes).
The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star
represents a number,
which should add up to 12 for each row.

Typography:-
 <blockquote> :-

<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United
States and close to 5 million globally. </p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>

 <pre> :- it show text as we type it. It keep remember on Whitespaces also.

 Align class:-
o .text-left
o .text-right
o .text-center
o .text-lowercase
o .text-uppercase
o .text-capitalize

Colors: -
 .text-muted
 .text-primary
 .text-success
 .text-info
 .text-warning
 .text-danger
 .text-secondary
 .text-dark
 .text-body (default
body color/often black)
and

 We can also add 50% opacity for black or white text with the .text-black-
50 or .text-white-50 classes
Background: -
 .bg-primary
 .bg-success
 .bg-info
 .bg-warning
 .bg-danger
 .bg-secondary
 .bg-dark
 .bg-light

Table:-
Class Effect
.table light padding and horizontal dividers
.table-striped adds zebra-stripes to a table
.table-bordered adds borders on all sides of the table and cells
.table-hover adds a hover effect (grey background color) on
table rows
.table-dark adds a black background to the table
.table-borderless removes borders from the table

Contextual Classes: -Contextual classes can be used to color the whole table (<table>),
the table rows (<tr>) or table cells (<td>).
Table-responsive: -
<div class="table-responsive">
<table class="table">
...
</table>
</div>

We can also decide when the table should get a scrollbar, depending on screen width
by using .table-responsive-sm, .table-responsive-md, .table-responsive-lg
, .table-responsive-xl.

Image: -
.img-fluid Make an image responsive
.img-rounded Adds rounded corners to image
.img-circle Crops image to be circle
.img-thumbnail Adds rounded corner + border

Buttons: -

 .btn :- this is compulsory class.

 . btn-block: - to create a block level button that spans the entire width of the parent
element.
 btn-* *: - create colorful design
o We can replace * * by primary,secondary,success,info,warning,danger,dark,light,link

 btn-outline-* * :- it outlines border

Button size:-
 btn btn-lg
 btn
 btn btn-sm

Button groups:-
 Use a <div> element with class .btn-group to create a button group.
 Use the class .btn-group-vertical to create a vertical button group.
List :- To create a basic list group, use an <ul> element with class .list-group,
and <li> elements with class .list-group-item:

<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>

 Use the. active class to highlight the current item.

 add the .list-group-item-action class if you want a grey background color
on hover.
 The .disabled class adds a lighter text color to the disabled.
 Use the .list-group-flush class to remove some borders and rounded
corners.
 For Contextual classes .list-group-item-success, list-group-item-
secondary, list-group-item-info, list-group-item-warning, .list-
group-item-danger, list-group-item-dark and list-group-item-light

 To create a list group with linked items, use <div> instead

of <ul> and <a> instead of <li>.

Dropdown:-
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>

 The .dropdown class indicates a dropdown menu.

 To open the dropdown menu, use a button or a link with a class of .dropdown-
toggle and the data-toggle="dropdown" attribute.
 Add the .dropdown-menu class to a <div> element to actually build the
dropdown menu. Then add the .dropdown-item class to each element (links or
buttons) inside the dropdown menu.
Cards: -
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example
text to build on the card title and make up
the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

Carousel with indecators:-

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Collapse:-
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-
target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-

parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-
parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-
parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
Simple collapse: -

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

Navbar:-

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>

Tooltip:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-
placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-

placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-
placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-
placement="left" title="Tooltip on left">Tooltip on left</button>

 To create a tooltip, add the data-toggle="tooltip" attribute to an element.

 Use the data-placement attribute to set the position of the tooltip on top,
bottom, left or the right side of the element.
Utilities
[A] Borders:
1. additive:
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

2. Subtractive:
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>

3. border color:
syntax: border border-* *
 can replace * * by primary, secondary, success, info, warning, danger, dark, light.
4.border-radius:
Use class

rounded rounded-top /left/bottom/right -circle rounded-pill rounded-0

Width:
Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-100):

Height:
Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-100):
Spacing:
The classes are used in the format:

{property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-

{size} for sm, md, lg, and xl.
Ex: pt-1, mb-sm-5

Where property is one of:

 m - sets margin
 p - sets padding

Where sides is one of:

 t - sets margin-top or padding-top

 b - sets margin-bottom or padding-bottom
 l - sets margin-left or padding-left
 r - sets margin-right or padding-right
 x - sets both padding-left and padding-right or margin-left and margin-
right
 y - sets both padding-top and padding-bottom or margin-top and margin-
bottom
 blank - sets a margin or padding on all 4 sides of the element

Where size is one of:

 0 - sets margin or padding to 0

 1 - sets margin or padding to .25rem (4px if font-size is 16px)
 2 - sets margin or padding to .5rem (8px if font-size is 16px)
 3 - sets margin or padding to 1rem (16px if font-size is 16px)
 4 - sets margin or padding to 1.5rem (24px if font-size is 16px)
 5 - sets margin or padding to 3rem (48px if font-size is 16px)
 auto - sets margin to auto

Center an element with the .mx-auto class (adds margin-left and margin-right: auto):

Display:
As such, the classes are named using the format:

 .d-{value} for xs
 .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

 none  To hide elements simply use the .d-none class

 inline 
 inline-block
 block
 table
 table-cell
 table-row
 flex
 inline-flex