এই কোড টুকু কপি করে index.html এ পেস্ট করে দিন।এই খানে বুটসট্র্যাপ এর স্টাইলসীট ও জেকুউরি কল করা আছে আপনার     আর আলাদা করে কল করা লাগবে না। নিচে কোড গুলর সংক্ষেপে বর্ণনা দেয়া হয়েছে।
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"> এই টি দিয়ে বুটসট্র্যাপ এর সিএসএস কল করা হয়েছে।
<meta name="viewport" content="width=device-width, initial-scale=1"> এই কোড টুকু ব্যবহার করা হয়েছে রেস্পন্সিভ ওয়েব ডিজাইন এর জন্য এইটি  ছাড়া  রেস্পন্সিভ ওয়েব সাইট এর কোড গুলো কাজ করবে না।
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->   এই কোড গুলো ইন্টারনেট এক্সপ্লোরার এ এইচটিএমএল ৫ সাপোর্ট এর জন্য ব্যবহার করা হয়েছে।কারন এইচটিএমএল ৫ ইন্টারনেট এক্সপ্লোরার  ছাড়া বাকি সব ব্রাউজার এ সাপোর্ট করে।এই কোড গুলো শুধুমাত্র  ইন্টারনেট এক্সপ্লোরার  এর জন্য প্রযোজ্য।
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  এইটি দিয়ে jQuery বা  JavaScript plugins এর প্লুাগিন কল করা হয়েছে।
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> এই টি দিয়ে বুটসট্র্যাপ  এর জাভাস্ক্রিপ্ট কল করা হয়েছে।
<script src="js/bootstrap.min.js"></script>
আশা করি উপরের কোড গুলো কেন ব্যবহার করা হল তা বুঝাতে পেরেছি।head,body,Title,এই গুলো নিয়ে আর লিখলাম না আশা করি এই গুলো আপনারা জানেন।

ওপরের কোড গুলো সম্পর্কে আরও জানতে চাইলে গুগল এ সার্চ করতে পারেন।

 CSS :Cascading Style Sheets

আমরা এখন বুটস ট্র্যাপ এর সিএসএস সম্পর্কে জানব।.

Container ক্লাস দেয়ার  দেবার পর

আশা করি বুঝাতে পারেছি।এই টি ব্যবহার করলে সিএসএস এ গিয়ে margin:0 Auto;width; এই সব দেয়া লাগবে না সব বুটসট্র্যাপ থেকে আসবে।এখন আপনি যদি চান আপনার সাইট এর কনটেন্ট গুলো পুরো Screen জুড়ে হোক সেক্ষেত্রে  container এর  বদলে container-fluid টি ব্যবহার করতে হবে।

গ্রিড সিস্টেম

এখন আমরা  আলোচনা করবো টুইটার বুটসট্র্যাপ এর অনেক গুরুতপূর্ণ  একটি জিনিস গ্রিড সিস্টেম। গ্রিড সিস্টেম টি বুঝার জন্য  আপনারা নিচের ছবির টির দিখে ভালো ভাবে খেয়াল করুন।

টুইটার বুটসট্র্যাপ  এর সাপোর্ট কোন ওয়েব সাইট এ প্রথমে Container ক্লাস নিতে হবে এর পর Row ক্লাস নিতে    হবে,এর পর আপনি  কোন ডিভাসে কাজ করছেন সেটি নির্ধারণ করতে হবে।

আপনি যদি Large Diveces এ কাজ করেন সেক্ষেত্রে Col-Lg এর আপনার ল্যাপটপ বা ডেক্সটপ পিসির মনিটর Width যদি 1200px বা  তার বেশি হয়।তবে সেটি Large Diveces।যদি ওয়েবসাইট  এর  Project এ col-Lg দেন তা হলে container এর Width হবে  1170px.
আপনি যদি  Meedium Diveces বা Desktop মনিটর এ কাজ করেন সেক্ষেত্রে Col-md।আপনার ডেক্সটপ মনিটর এর Width যদি  992px হয়ে থাকে বা 1200 px এর কম হয় তাহলে এইটি Desktop  Diveces.ওয়েবসাইট  এর  Project এ col-md দেন তা হলে container এর Width হবে  970px.
নিচের গুলো আর বুঝালাম না।আশা করি এইগুলো আপনারা নিজেরায় বুঝতে পারবেন।
Small ডিভিইস এর কাজ করলে Col-sm
Extra Small ডিভিইস অর্থাৎ Iphone বা Smart Fone এর জন্য কাজ করলে col-xs

*মনিটর এর Width মাপার জন্য একটি সফটওয়্যার আছে সেইটির নাম হল
Lightshot বাব্যহার করতে পারেন. Download Link: https://app.prntscr.com/en/index.html*

এতক্ষণ আমারা চিত্র এর মাধ্যমে কাজ টি বুঝেছি  এখন আমরা বাস্তবে করে দেখবো।
আমার মনিটর টি large Device তাই Col-Lg ব্যবহার করছি

আউটপুট

এখন আমি চাইছি দুইটি কলাম এ ডিভাইট করতে। 6+6=12

আউটপুট

তিন কলাম এ ডিভাইট করতে হলে 4+4+4=12

আউটপুট

চার কলাম এ ডিভাইট করতে হলে ৩+৩+৩+৩ =১২

আউটপুট

আমি চাইছি পুরো  স্ক্রিন জুড়ে লিখাটি হোক।

আউটপুট

মোট কথা প্রতিটি কলাম এর যোগ ফল ১২ হতে হবে।