Learn JavaScript In One Video In Hindi (2018)

Learn Python In Hindi In One Video - हिंदी में (Latest Tutorial)

Learn Php In One Video In Hindi - हिंदी में (Latest PHP Tutorial 2018)

15 Minute Python Tutorial For Beginners In Hindi (Full & Complete Crash Course)

Learn Bootstrap In Hindi In One Video - हिंदी में (Latest Tutorial 2019)

Learn HTML In One Video

Learn jQuery In Hindi In One Video - हिंदी में (Latest Tutorial 2018)

Create A Responsive Website Using HTML, CSS And Bootstrap 4 In Hindi

Login And Registration Form Using Php & MySQL [Php Login System In Hindi]

C Programming Tutorial For Beginners: Learn C In Hindi

JavaScript Registration Form Validation - हिंदी में (Latest Tutorial 2019)

CSS 3 Tutorial For Beginners: Learn CSS In One Video In Hindi

C++ Tutorial For Beginners: Learn C Plus Plus In Hindi

Learn Python Programming For Free | Python Programming Tutorial In Hindi

Java tutorial in hindi

Android Development Tutorial in Hindi

Web Scraping Tutorial using Python and BeautifulSoup

Git & GitHub Tutorial For Beginners In Hindi - हिंदी में (2019)

Linux Tutorial For Beginners in Hindi

Numpy Tutorial in Hindi

Php Tutorial for Beginners in Hindi with MySQL Project

Learn JavaScript In One Video In Hindi (2020)

C Language Tutorial For Beginners (With Notes)

How To Make a WordPress Website | Wordpress Tutorial for Beginners | Elementor Tutorial In Hindi

Python Tutorial For Beginners In Hindi (With Notes)

Python Programming Course in Hindi (Advanced)

Android Application Development Tutorial in Hindi With Notes

React Tutorial in Hindi

HTML Tutorial For Beginners In Hindi (With Notes)

CSS Tutorial In Hindi (With Notes)

<p>In this video I have tried my best to teach you bootstrap in one video.<br />Make sure to check out the source code I wrote in this video and try to follow while watching this video. As promised the bootstrap cheatsheet is here: <br /><a href="https://rodaboatsyachts.com/assets/files/specifications/bootstrap-4-cheat-sheet-bc-1-0-gumroad.pdf" target="_blank" rel="noopener"> Download Now</a></p>
<h4>File index.html as described in the video</h4>
<pre class="language-html"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;

    &lt;title&gt;CodeWithHarry&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
  &lt;a class="navbar-brand" href="#"&gt;CodeWithHarry&lt;/a&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
    &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
  &lt;/button&gt;

  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
    &lt;ul class="navbar-nav mr-auto"&gt;
      &lt;li class="nav-item active"&gt;
        &lt;a class="nav-link" href="index.html"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
        &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          Services
        &lt;/a&gt;
        &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
          &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
          &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
          &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="contact.html"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
 
    &lt;/ul&gt;
    &lt;form class="form-inline my-2 my-lg-0"&gt;
      &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
      &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/nav&gt;
&lt;div class="container mt-3"&gt;
&lt;div class="jumbotron"&gt;
  &lt;h1 class="display-4"&gt;Hello, world!&lt;/h1&gt;
  &lt;p class="lead"&gt;This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.&lt;/p&gt;
  &lt;hr class="my-4"&gt;
  &lt;p&gt;It uses utility classes for typography and spacing to space content out within the larger container.&lt;/p&gt;
  &lt;button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"&gt;
  Signup
&lt;/button&gt;



&lt;!-- Modal --&gt;
&lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Signup to my website&lt;/h5&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
          &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
      &lt;h1&gt;Kuch Bhi&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




&lt;/div&gt;
&lt;/div&gt;

&lt;div class="container my-4"&gt;
    &lt;div class="row"&gt;
      &lt;div class="card col-md-3 mx-auto" style="width: 18rem;"&gt;
        &lt;img src="img/srk.jpg" class="img-thumbnail mt-2" alt="Responsive image"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
            &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="card col-md-3 mx-auto" style="width: 18rem;"&gt;
        &lt;img src="img/srk.jpg" class="img-thumbnail mt-2" alt="Responsive image"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
            &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="card col-md-3 mx-auto" style="width: 18rem;"&gt;
        &lt;img src="img/srk.jpg" class="img-thumbnail mt-2" alt="Responsive image"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title" id="harry"&gt;Card title&lt;/h5&gt;
            &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
&lt;/div&gt;

  

&lt;/div&gt;




  &lt;footer class="blog-footer container fixed-bottom"&gt;
      &lt;div class="float-left my-2"&gt;Blog template built for &lt;a href="https://getbootstrap.com/"&gt;Bootstrap&lt;/a&gt; by &lt;a href="https://twitter.com/mdo"&gt;@mdo&lt;/a&gt;.&lt;/div&gt;
      &lt;div class="float-right"&gt;
        &lt;a href="#"&gt;Back to top&lt;/a&gt;
      &lt;/div&gt;
    &lt;/footer&gt;


    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>&lt;|AD|&gt;</p>
<h4>File contact.html as described in the video</h4>
<pre class="language-html"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;

    &lt;title&gt;CodeWithHarry&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
  &lt;a class="navbar-brand" href="#"&gt;CodeWithHarry&lt;/a&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
    &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
  &lt;/button&gt;

  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
    &lt;ul class="navbar-nav mr-auto"&gt;
      &lt;li class="nav-item active"&gt;
        &lt;a class="nav-link" href="index.html"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown"&gt;
        &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          Services
        &lt;/a&gt;
        &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
          &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
          &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
          &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="contact.html"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
 
    &lt;/ul&gt;
    &lt;form class="form-inline my-2 my-lg-0"&gt;
      &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
      &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;div class="container mt-3"&gt;
	&lt;div class="row"&gt;
	&lt;div class="col-lg-8"&gt;
	&lt;h1&gt;Contact Us&lt;/h1&gt;
&lt;form&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="exampleFormControlInput1"&gt;Email address&lt;/label&gt;
    &lt;input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="exampleFormControlSelect1"&gt;Example select&lt;/label&gt;
    &lt;select class="form-control" id="exampleFormControlSelect1"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="exampleFormControlSelect2"&gt;Example multiple select&lt;/label&gt;
    &lt;select multiple class="form-control" id="exampleFormControlSelect2"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="exampleFormControlTextarea1"&gt;Example textarea&lt;/label&gt;
    &lt;textarea class="form-control" id="exampleFormControlTextarea1" rows="3"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;

&lt;div class="col-lg-4"&gt;
	
&lt;div class="card" &gt;
  &lt;img class="card-img-top" src="img/srk.jpg" alt="Card image cap"&gt;
  &lt;div class="card-body"&gt;
    &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
    &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;


&lt;/div&gt;




  &lt;footer class="blog-footer container fixed-bottom"&gt;
      &lt;div class="float-left my-2"&gt;Copyright code with harry &lt;a href="https://getbootstrap.com/"&gt;Bootstrap&lt;/a&gt; by &lt;a href="https://twitter.com/mdo"&gt;@mdo&lt;/a&gt;.&lt;/div&gt;
      &lt;div class="float-right"&gt;
        &lt;a href="#"&gt;Back to top&lt;/a&gt;
      &lt;/div&gt;
    &lt;/footer&gt;


    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

</code></pre>