Things to carry while travelling

 Kapda

1)3 jeans.

2)5 chaddi.

3)4 short pant.

4)1 taulia.

5)1 Topi.

6)1 paijama.

7)3 T-shirt.

8)3 Shirt.

9)Ganji 5.

10)1 inner ware mota.

Freshing

1)Tooth brush.

2)Tooth powder.

3) Tongue cleaner.

4)Pocket perfume.

5)Sandle.

6)Fair Handsome.

7)Socks 2 pair.

8)Facewash.

9)

Mobile 

1)Chota earphone.

2)Sony headset.

3)Mobile.

4)Jiofi device.

5)Mobile charger.

6)C type charger.

7)Sadguru book.

Next Destinations:
1. Rajgir

    

RajGir

1. Brahma Kund

2. Vaibhar giri parvat

3. Sapt-Parni Gufa

4. Pandu Pokhar- Yello Band

5. Vipulachal Hill

6. Son Bhandar

7. Jarasand akhada

8. Vishwa Shanti stoop

9. Ghora Katora Dam-> ECO Park

10. Glass Bridge

Online fun activity links

 1. https://www.drawasaurus.org/

Nice food receipe links

List of known food items:

1. Aloo paratha. https://www.facebook.com/727067790661677/posts/3121560191212413/?extid=ethbWWuWaaRITnJO&d=null&vh=e

2. Sattu paratha. 

https://youtu.be/BqENkx8ZDn8

3. Puri sabji. 

https://m.facebook.com/story.php?story_fbid=1988653967933885&id=186455501487083&extid=OxW3MByAxfVs659i&d=null&vh=e

https://m.youtube.com/watch?v=C5ViTyoQ7UU&feature=youtu.be

https://www.facebook.com/Zaykakatadka/videos/256797195584458/?sfnsn=wiwspmo&extid=TBSrFqXKbX5xyhUF&d=n&vh=e

4. Kachori sabji.

5. Chole chawal.

https://youtu.be/uKUvtyjw8R0

6. Kadi chawal.

 https://youtu.be/YIEl_ri7Pks

7. Paddu chatni.

 https://youtu.be/sCmgmOMuQ1M

https://youtu.be/HpyQ53WWssM

8. Idli sambhar chatni. https://www.facebook.com/727067790661677/posts/3133224880045944/?extid=rj52BgfltSQPrv3S&d=null&vh=e

9. Veg biryani.

 https://youtu.be/1U3Xmm_JMmo

 https://youtu.be/oCGd0QpxrZ0

10.chana daal ka pakodi ka sabji aur chawal.

11.Tomato rice.

 https://youtu.be/yOeidlJW86U

12.paneer paratha.

13.Sooji Nashta.

https://youtu.be/irHa5fIGxE0

14.Aata uttapam. https://www.facebook.com/186455501487083/posts/1974271322705483/?extid=iLBceuq8QwpqD9IU&d=null&vh=e

15.Besan Sooji k dose. https://www.facebook.com/421464397949388/posts/2864499180312552/?extid=J1yHA6Z5DDMobro1&d=null&vh=e

16.Vegetable pulav. 

https://youtu.be/jYRt4mdys-M

17.Bisibile bhat. 

https://youtu.be/FAfHg-6R-mE

18.Upma chatni.

 https://youtu.be/b_euxDBjwAo

19.Aata ka dosa.

 https://youtu.be/E6VwLLkY9cc

20.Sooji ka uttapam.

https://youtu.be/0fLXkf1zmtg

21.Sandwich.

 https://youtu.be/oReFzHyE5sU

22.Poha with chatni. https://www.facebook.com/727067790661677/posts/3035386056496494/?extid=T96RQUqj2PbdMuDT&d=null&vh=e

23.Chola Bhatura. 

https://m.youtube.com/watch?feature=youtu.be&v=NIOw5J2lX8M

24.Veg noodles.

https://youtu.be/oDo_w-cuOqM https://www.facebook.com/727067790661677/posts/2917008791667555/?extid=jPESKh8amszMK37V&d=null&vh=e

25.Mix veg paratha. https://www.facebook.com/727067790661677/posts/2878206038881164/?extid=aIglyOWnSjlh230a&d=null&vh=e

26.Khichdi.

https://youtu.be/IIXnTKfwjt8

https://youtu.be/YTlANcLwcMQ

27.Naan Sabji.

https://youtu.be/3iQgO0XSo3c

28.Pav bhaji.

https://youtu.be/sAnPUIvPc1I

https://youtu.be/Qe8ejVPAFu8

29.Methi k parathe.

30.Daal fry with Rice.

https://youtu.be/vkaWqGo5MDg

31.Pongal.

https://youtu.be/rwdEnXUd24A

https://youtu.be/osXQbeC8XSk

32. Rajma chawal

https://www.facebook.com/186455501487083/posts/1996095733856375/?extid=GNWpoFBNyb5leCc0&d=null&vh=e

33. Paneer biryani

https://www.facebook.com/186455501487083/posts/2000237076775574/?extid=EIjHssnCosdhuRvR&d=null&vh=e

34. Besan uttapam

https://www.facebook.com/186455501487083/posts/2000319866767295/?sfnsn=wiwspmo&extid=ofni6B07i5cIPkEx&d=n&vh=e

Git Tutorial

How to push changes to git branch
step-1: git clone link of git file
step-2: navigate to .git file location, after this only you can apply any git command
step-3: git add filename or git add * to stage files
step-4: git status to see the modifications
step-5: git commit -m "Comments"
step-6: git push

How to download or checkout to old commit

Step-1:First navigate git bash to gitIgnore file

Step-2:git checkout 87ce1db58ca8

How to merge two branches in visual studio :

1. Download master branch code
git checkout master

2. First create a local branch from master
git branch iss53
git checkout iss53

3. do the development

4. Commit the changes
git comit -m "checkin my code"

5. push this branch to git hub
git push

6. once both the branch available to github then only you can merge them
git checkout master

git merge iss53

News Feed Pending

https://medium.com/free-code-camp/follow-these-simple-rules-and-youll-become-a-git-and-github-master-e1045057468f

https://medium.com/@XiaohanZeng/i-interviewed-at-five-top-companies-in-silicon-valley-in-five-days-and-luckily-got-five-job-offers-25178cf74e0f

If you are able to communicate to google search engine and produce quality results then you are a smart searcher.

https://docs.microsoft.com/en-us/office/open-xml/working-with-comments

Nuget Package Manager for Open Office XML
https://www.nuget.org/packages/DocumentFormat.OpenXml/

openoffice xml c#
https://csharp.hotexamples.com/examples/DocumentFormat.OpenXml.Presentation/Slide/-/php-slide-class-examples.html

http://qaru.site/questions/6694928/openxml-bulleted-list-with-multiple-bullet-charcter

Why we should always choose a leadership position in life?
A labor class people will not get a chance to go and work in foreign countries. but A leader class people will go often. The main business is among the level of our communication and our problem solving skills. As a leader we will always have a better level of communication than a labor. This helps us to take part in different level of Problems. An organization doesn't directly depends on labor. There is a hierarchy of positions inside. A leader is always more conscious about the project where as a labor thinks only his part of work. A leader needs to spend more than office hours.

https://hi.quora.com/%E0%A4%B6%E0%A4%BE%E0%A4%A6%E0%A5%80%E0%A4%B6%E0%A5%81%E0%A4%A6%E0%A4%BE-%E0%A4%B2%E0%A5%8B%E0%A4%97%E0%A5%8B%E0%A4%82-%E0%A4%95%E0%A5%8B-%E0%A4%95%E0%A4%BF%E0%A4%B8-%E0%A4%AC%E0%A4%BE%E0%A4%A4-%E0%A4%95%E0%A4%BE

How to backup blog:
https://support.google.com/blogger/answer/41387?hl=en

API Performance Testing:
https://www.guru99.com/jmeter-tutorials.html

Entire machine learning:
https://www.youtube.com/watch?v=9f-GarcDY58

PostgreSQL 9.2.24 Documentation
https://www.postgresql.org/docs/9.2/libpq-example.html

Bootstrap Learnings

URL: https://getbootstrap.com/
Download the required files for working with bootstrap.

Starting template:
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template

copy all the link from starter template and download the files for working offline.
for the demo purpose. now remove all integrity and cross-origin attribute from link tags.

Tutorial Link:
https://www.youtube.com/watch?v=Udyaj2hf6wM&list=PLvQjNLQMdagNNLxYL_2Tg-CUxjSufZlGC&index=25

Lession starts here:
<!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="bootstrap/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Lesson 1: Container-->
    <div class="container">
    <h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>

<div class="container-fluid">
    <h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>

<!-- Lesson 1: Container END-->

<!-- Lesson 2: Grid System in Bootstrap 4 -->

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>


<div class="row"><!-- A row consist of 12 columns-->

<div class="col-md-6" style="background: red">Hello World</div><!--merging 6 columns-->
<div class="col-md-6" style="background: green">Hello World</div><!--merging 6 columns-->
</div>

<!-- Lesson 2: Grid System in Bootstrap 4 END-->

<!-- Lesson 3: Offset in Grid System in Bootstrap 4 -->

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4 offset-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
</div>

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-lg-4 offset-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: green">Hello World</div><!--merging 4 columns-->
</div>

<!-- Lesson 3: Offset in Grid System in Bootstrap 4 END-->

<div style="background-color: black">
<!-- Lesson 4: Text formatting in Bootstrap 4 -->
<!-- Lesson 4.1: Text coloring in Bootstrap 4 -->
<p class="text-danger">Hello World</p>
<p class="text-success">Hello World</p>
<p class="text-info">Hello World</p>
<p class="text-warning">Hello World</p>
<p class="text-primary">Hello World</p>
<p class="text-secondary">Hello World</p>
<p class="text-muted">Hello World</p>
<p class="text-dark">Hello World</p>
<p class="text-light">Hello World</p>
<!-- Lesson 4.1: Text coloring in Bootstrap 4 END -->

<!-- Lesson 4.2: Text allignment in Bootstrap 4 -->
<p class="text-left">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-uppercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-lowercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-capitalize">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-right">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

<!-- Lesson 4.2: Text allignment in Bootstrap 4 END -->

<!-- Lesson 4.3: Backgrounds in Bootstrap 4 -->
<p class="text-center bg-danger">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-success">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-info">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-primary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-secondary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-warning">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-dark">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-light">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-white">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
</div>
<!-- Lesson 4.3: Backgrounds in Bootstrap 4 END -->

<!-- Lesson 4.4: Buttons in Bootstrap 4 -->

<button class="btn btn-primary">Home</button>
<button class="btn btn-secondary">Home</button>
<button class="btn btn-success">Home</button>
<button class="btn btn-info">Home</button>
<button class="btn btn-danger">Home</button>
<button class="btn btn-warning">Home</button>
<button class="btn btn-dark">Home</button>
<button class="btn btn-light">Home</button>
<button class="btn btn-default">Home</button>
<button class="btn btn-link">Home</button>
<br/>
<button class="btn-sm btn-primary">Home Small</button>
<button class="btn-lg btn-primary">Home large</button>
<br/>
<button class="btn btn-outline-primary">Home</button>
<button class="btn btn-outline-secondary">Home</button>
<button class="btn btn-outline-success active">Clicked Button</button>
<button class="btn btn-outline-info">Home</button>
<button class="btn btn-outline-danger">Home</button>
<button class="btn btn-outline-warning">Home</button>
<button class="btn btn-outline-dark">Home</button>
<button class="btn btn-outline-light">Home</button>
<button class="btn btn-outline-default disabled">click disabled</button>

<br/>
<br/>
<button class="btn btn-danger btn-block">Home</button><!--button in full horizontal width-->

<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->

<br/>
<br/>
<div class="btn-group">
  <button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
 
</div>
<br/>
<br/>
<div class="btn-group-vertical">
  <button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
</div>

<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->

<!-- Lesson 4.4: Buttons in Bootstrap 4 END -->

<!-- Lession 4.5: Typography in Bootstrap 4 -->

<p class="h1">Home</p>
<p class="h2">Home</p>
<p class="h3">Home</p>
<p class="h4">Home</p>
<p class="h5">Home</p>
<p class="h6">Home</p>

<br/>
<br/>

<p class="display-1">Home</p>
<p class="display-2">Home</p>
<p class="display-3">Home</p>
<p class="display-4">Home</p>

<!-- Lession 4.5: Typography in Bootstrap 4 END -->

<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 -->

<!-- Badge -->
<button class="btn btn-danger"> Home <span class="badge badge-primary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-success"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-info"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-secondary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-dark"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-light"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-warning"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-default"> 2.0 </span></button>

<!-- Jumbotron to set specific background for header and footer-->
<div class="jumbotron jumbotron-fluid bg-primary">
<p>Home</p>
 
</div>

<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 END -->

<!-- Lesson 4: Text formatting in Bootstrap 4 END -->

<!-- Lesson 5: image in Bootstrap 4 rounded-for round corner,img-thumbnail- for making the thumbnail boundary, d-block mx-auto- for keeping the image in center, img-fluid- for making the image as responsive -->
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<!-- Lesson 5: image in Bootstrap 4 END -->

<!-- Lesson 5: Alert in Bootstrap 4 -->
<p class="alert alert-danger">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-success">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-info">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-warning">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-primary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-secondary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-dark">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>

<!-- Lesson 5: Alert in Bootstrap 4 END -->

<!-- Lesson 6: Modal in Bootstrap 4 -->

<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Open Modal</button>
<div class="modal fade" id="modal1">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">Modal Header</div></div>
<div class="modal-body">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image> 
</div>
<div class="modal-footer">
  <button class="btn btn-danger" data-dismiss="modal">Close Modal</button>
</div>

  </div>

</div>
</div>

<!-- Lesson 6: Modal in Bootstrap 4 END -->

<!-- Lesson 7: Collapse in Bootstrap 4 -->
<div class="container">
 
  <a href="#pCollapse" data-toggle="collapse">Click here to Expand and Collapse</a>
<p class="collapse" id="pCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>
<br><br><br>
<button data-target="#paraCollapse" data-toggle="collapse">Click here to Expand and Collapse</button>
<p class="collapse" id="paraCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>


</div>


<!-- Lesson 7: Collapse in Bootstrap 4 END -->


<!-- Lesson 8: Cards in Bootstrap 4 -->

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 -->
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 -->

<div class="container card-group">
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body bg-info">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body bg-info">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body bg-info">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>
</div>
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 END -->

<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 -->
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBody"></image>
  <div class="card-body bg-info collapse" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBodyTest"></image>
  <div class="card-body bg-info collapse" id="msdBodyTest">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 END -->

<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 -->
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
  </image>
  <div class="card-body bg-info" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
  </image>
  <div class="card-body bg-info" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
  <div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
  </image>
  <div class="card-body bg-info" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>

</div>
 
</div>
<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 END -->
<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 END-->
<!-- Lesson 8: Cards in Bootstrap 4 END-->

<!-- Lesson 9: Table in Bootstrap 4 -->

<table class="table table-sm table-sm-responsive table-danger table-striped table-hover">
  <tr>
    <td>Name</td>
    <td>Name</td>
    <td>Name</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Name</td>
    <td>Name</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Name</td>
    <td>Name</td>
  </tr>
</table>

<!-- Lesson 9: Table in Bootstrap 4 END-->

<!-- Lesson 10: Nav & Tabs in Bootstrap 4 -->
<div class="container">
  <ul class="nav nav-tabs"><!--nav-tabs similar of nav-pills-->
    <li class="nav-item">
      <a href="#one" class="nav-link active" data-toggle="tab">Home</a>
    </li>
    <li class="nav-item">
      <a href="#two" class="nav-link" data-toggle="tab">Contact Us</a>
    </li>
    <li class="nav-item">
      <a href="#three" class="nav-link" data-toggle="tab">Login</a>
    </li>
  </ul>
  <div class="tab-content">
    <li class="tab-pane" id="one"> This is first tab.</li>
    <li class="tab-pane" id="two">This is second tab.</li>
    <li class="tab-pane" id="three">This is third tab.</li>
  </div>
</div>


<!-- Lesson 10: Nav & Tabs in Bootstrap 4 END-->
<!-- Lesson 11: Navbar Responsive in Bootstrap 4 -->

<nav class="navbar navbar-expand-sm navbar-light bg-danger"><!--It does not come under any container class-->
  <a href="#" class="navbar-brand">LOGO</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#cl" >
    <span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="cl">
    <span class="mr-auto"></span>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">About US</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Contact US</a>
    </li>
  </ul>
  </div>
</nav>

<!-- Lesson 11: Navbar Responsive in Bootstrap 4 END-->

<!-- Lesson 12: Breadcrumb in Bootstrap 4 -->

<div class="container">
  <ul class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">About US</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Contact US</a>
    </li>
  </ul>
</div>

<!-- Lesson 12: Breadcrumb in Bootstrap 4 END-->

<!-- Lesson 13: Pagination in Bootstrap 4 -->
<div class="container">
  <div class="pagination">
 
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div> 
<div class="pagination pagination-lg">
 
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div> 

<div class="pagination pagination-sm">
 
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div> 

<div class="pagination pagination-sm">
 
<li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</div> 

</div>


<!-- Lesson 13: Pagination in Bootstrap 4 END-->

<!-- Lesson 14: Carousel Slider in Bootstrap 4 -->
   
<div class="">
  <div id="car" class="carousel slide" data-ride="carousel" data-interval="2000">
    <ol class="carousel-indicators">
      <li class="" data-target="#car" data-slide-to="0" class="active"></li>
      <li class="" data-target="#car" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
      <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
 
    </div>
    <div class="carousel-item">
  <image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
     
    </div>
    <div class="carousel-item">
  <image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
     
    </div>
    </div>
  </div>
  <a href="#car" class="carousel-control-prev" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
<a href="#car" class="carousel-control-next" data-slide="next">
  <span class="carousel-control-next-icon"></span>
</a>


</div>

<!-- Lesson 14: Carousel Slider in Bootstrap 4 END-->

<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 -->
<!--https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp-->
<div class="container">
  <br>
  <br>
  <a href="#" data-toggle="tooltip" data-title="Sample Text" data-placement="bottom">
ToolTip Sample
</a>
<br>
  <br>
  <!--https://www.w3schools.com/bootstrap4/bootstrap_popover.asp-->
  <a href="#" data-toggle="popover" data-title="Header" data-content="world Hello"  data-placement="right">
Popover Sample
</a>   
</div>


<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 END-->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
    <script src="bootstrap/js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
});
</script>
  </body>
</html>

Angular Material Syntax

How to Apply Angular Material into Angular application?
By using angular command:
ng add '@angular/material'

How to start using angular material:
Step-1:
Import any module from angular material like MatButtonModule into app.modules.ts.

Step-2:
add MatButtonModule in imports array.

Step-3:
Use the directives in Html.

Ex:

<button mat-raised-button>Click Me</button>

<button mat-button>Click Me</button>

Note:

In the above approach suppose if we have to import so many modules from angular material then it will create so many imports. So to avoid this problem and keep the app.module clean and simple.

we will add all the required material modules in a separate module and only that module we will import into app.module.

To create a new module
ng g m materialModule

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material';

const materialComponent = [MatButtonModule]

@NgModule({

imports: [materialComponent],

exports: [materialComponent]

})

export class MaterialModuleModule { }

import { MaterialModuleModule } from './material-module/material-module.module';

imports: [

BrowserModule,

BrowserAnimationsModule,

MaterialModuleModule

],

Typography:

This is for setting the style and appearance of text.

<button mat-raised-button>Click Me</button>

<p>This is for page level Heading</p>

<div class="mat-display-4">This is display 4</div>

<div class="mat-display-3">This is display 3</div>

<div class="mat-display-2">This is display 2</div>

<div class="mat-display-1">This is display 1</div>

<p>This is for section level Heading</p>

<div class="mat-headline">This is heading for h1</div>

<div class="mat-title">This is heading for h2</div>

<div class="mat-subheading-2">This is heading for h3</div>

<div class="mat-subheading-1">This is heading for h4</div>

<p>This is for normal text writing</p>

<div class="mat-body-1">This is heading for body</div>

<div class="mat-body-2">This is heading for body</div>

<div class="mat-caption">This is heading for body</div>