Bootstrap – Grid System In Hindi

आज के पाठ में हम यह पढ़ेंगे कि किस तरह से हम बूटस्ट्रैप Grid System की मदद से किसी वेबसाइट को Responsive बना सकते हैं |

दोस्तों Bootstrap को अपने वेबसाइट के साथ कैसे जोड़ना है यह मैंने आपको पहले ही बता दिया है | मैं नीचे के उदाहरण में मैं बूटस्ट्रैप और JQuery के CDN के का उपयोग कर रहा हूं | अगर अपने बूटस्ट्रैप को अपने कंप्यूटर पर डाउनलोड कर रखा है और आप चाहते हैं तो आप अपने कंप्यूटर से ही बूटस्ट्रैप को लिंक कर सकते हैं और Bootstrap को कैसे लिंक करना है यह मैं आपको पहले ही बता चुका हूं |

अब नीचे के उदाहरण को देखिए:-

<html>
<head>
  <title>Bootstrap 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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>Grid System</h1>

    <div class="col-xs-4 col-sm-5 col-md-3 col-lg-4">
     Hi my name is santosh.<br>
      I have depth understanding of Core PHP, OOPS , MVC Framework like Codeigniter and very Good experience in
making single page application with AngularJs.I am Very Good In error Solving.
    </div>

   <div class="col-xs-4 col-sm-5 col-md-3 col-lg-4">
     Hi my name is santosh.<br>
I have depth understanding of Core PHP, OOPS , MVC Framework like Codeigniter and very Good experience in making single page application with AngularJs.I am Very Good In error Solving.   
    </div>

     <div class="col-xs-4 col-sm-2 col-md-6 col-lg-4">
     Hi my name is santosh.<br>
I have depth understanding of Core PHP, OOPS , MVC Framework like Codeigniter and very Good experience in making single page application with AngularJs.I am Very Good In error Solving.   
    </div>  
</body>
</html>

ऊपर लिखे Code को copy करके अपने Text-Editor पर Paste करिए उसके बाद उसे index.html नाम देखकर अपने कंप्यूटर पर Save करिए फिर उससे अपने Web Browser पर खोलें और अपने Browser के Size को कम करके देखिए की आपको क्या Output मिलता है |