Bootstrap in Hindi Thumbnails

First Page
Next Page

कई साइटो को Grid मे Images, Video, Text इत्यादि को रखने के लिए Bootstrap के पास Thumbnail के साथ ऐसा करने का एक आसान तरीका है. Bootstrap का उपयोग करके Thumbnail बनाने के लिए आसान होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Thumbnails Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="row">
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt="Thumbnails">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt="Thumbnails">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt="Thumbnails">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt = "Thumbnails">
            </a>
         </div>
      </div>
   </body>
</html>

Output

Adding Custom Content

किसी भी तरह के HTML Content को Headings, Paragraphs, या Buttons जैसे Thumbnail मे जोड़ना बहुत आसान होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Thumbnails Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.bootstrap-demo{margin:30px;}
</style>
</head>
   <body>
      <div class="row">
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                  alt="Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                  alt="Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                alt = "Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                  alt="Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Output

First Page
Next Page


Bootstrap Articles in Hindi

Bootstrap in Hindi Introduction
Bootstrap in Hindi Grid
Bootstrap in Hindi Pagination
Jumbotron and Glyphicons
Bootstrap in Hindi Tables
Bootstrap in Hindi Carousel
Bootstrap in Hindi Navbar
Bootstrap in Hindi Images
Bootstrap in Hindi Thumbnails
Bootstrap in Hindi Forms
Bootstrap in Hindi Dropdowns
Bootstrap Hindi Tooltip Plugin