বুটস্ট্রাপ ৫ একটি জনপ্রিয় CSS ফ্রেমওয়ার্ক যা ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের ডিজাইন এবং ডেভেলপমেন্টকে দ্রুত ও সহজ করে তোলে। এটি ব্যবহারের জন্য কিছু সাধারণ সেটআপ এবং ইনস্টলেশন পদক্ষেপ রয়েছে। নিচে বুটস্ট্রাপ ৫ সেটআপ করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
বুটস্ট্রাপ ৫ ব্যবহার করার সবচেয়ে সহজ পদ্ধতি হলো সিডিএন (Content Delivery Network) ব্যবহার করা। এতে কোনো ফাইল ডাউনলোড বা ইনস্টল করতে হয় না। শুধু HTML ফাইলে সিডিএন লিংক যোগ করলেই বুটস্ট্রাপ ৫ ফিচার এবং স্টাইলগুলো সহজেই ব্যবহৃত হতে পারে।
HTML ফাইলে সিডিএন লিংক পেস্ট করুন:
HTML ফাইলে <head> ট্যাগে বুটস্ট্রাপের CSS সিডিএন এবং <body> ট্যাগের শেষের দিকে JavaScript সিডিএন যোগ করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Setup</title>
<!-- Bootstrap 5 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content here -->
<!-- Bootstrap 5 JavaScript CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
এভাবে সিডিএন লিংক ব্যবহার করে খুব সহজেই বুটস্ট্রাপ ৫ সেটআপ করা যায়।
বুটস্ট্রাপ ৫ এর CSS এবং JavaScript ফাইলগুলো সরাসরি ডাউনলোড করে আপনার প্রজেক্টে লোকালি ব্যবহার করতে পারেন। এভাবে আপনি সিডিএন ছাড়াও বুটস্ট্রাপের ফাইলগুলি ব্যবহার করতে পারবেন।
css এবং js ফোল্ডারে থাকা ফাইলগুলো আপনার প্রজেক্টের যথাযথ স্থানে কপি করুন।HTML ফাইলে ফাইল লিংক করুন:
আপনার HTML ফাইলে নিচের কোডের মতো করে বুটস্ট্রাপ ৫ এর লোকাল CSS এবং JavaScript ফাইল লিংক করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Setup</title>
<!-- Local Bootstrap 5 CSS -->
<link href="path/to/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content here -->
<!-- Local Bootstrap 5 JavaScript -->
<script src="path/to/bootstrap.bundle.min.js"></script>
</body>
</html>
এভাবে বুটস্ট্রাপ ৫ এর CSS এবং JavaScript ফাইল লোকালি ব্যবহার করতে পারবেন।
বুটস্ট্রাপ ৫ ইনস্টল করার আরেকটি জনপ্রিয় পদ্ধতি হলো npm ব্যবহার করা। এটি Node.js ব্যবহারকারীদের জন্য সুবিধাজনক, কারণ এটি স্বয়ংক্রিয়ভাবে বুটস্ট্রাপের সমস্ত ডিপেনডেন্সি ইনস্টল করে।
npm ইনিশিয়ালাইজ করুন: কমান্ড লাইন/টার্মিনালে নিচের কমান্ডটি রান করুন:
npm init -y
এটি আপনার প্রজেক্টের জন্য একটি package.json ফাইল তৈরি করবে।
বুটস্ট্রাপ ৫ ইনস্টল করুন: বুটস্ট্রাপ ইনস্টল করার জন্য নিচের কমান্ডটি রান করুন:
npm install bootstrap
বুটস্ট্রাপ ৫ ফাইল ব্যবহার করুন: এবার আপনি আপনার প্রজেক্টে node_modules ফোল্ডার থেকে বুটস্ট্রাপ ৫ এর ফাইল রেফারেন্স করতে পারবেন।
HTML ফাইলে নিচের মতো করে CSS এবং JS ফাইল রেফারেন্স করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Setup</title>
<!-- Local Bootstrap 5 CSS -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content here -->
<!-- Local Bootstrap 5 JavaScript -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
এভাবে npm ব্যবহার করে আপনি বুটস্ট্রাপ ৫ ইনস্টল করতে এবং সেটআপ করতে পারবেন।
বুটস্ট্রাপ ৫ এর কাস্টমাইজেশন প্রক্রিয়া শুরু করার আগে, আপনি চাইলে Sass ব্যবহার করে স্টাইল পরিবর্তন বা কাস্টমাইজ করতে পারেন। বুটস্ট্রাপ ৫ এর সোর্স কোড SCSS ফরম্যাটে পাওয়া যায়, এবং আপনি এখানে নিজের প্রয়োজন অনুযায়ী কাস্টম ডিজাইন তৈরি করতে পারেন।
Sass ইনস্টল করুন: npm ব্যবহার করে Sass ইনস্টল করুন:
npm install sass
SCSS ফাইল তৈরি করুন: একটি নতুন SCSS ফাইল তৈরি করুন এবং বুটস্ট্রাপ ৫ এর SCSS ফাইল ইনপুট হিসেবে ব্যবহার করুন। উদাহরণস্বরূপ:
@import 'node_modules/bootstrap/scss/bootstrap';
SCSS ফাইল কম্পাইল করুন: SCSS ফাইলটি CSS ফাইলে কম্পাইল করতে Sass ব্যবহার করুন:
npx sass style.scss style.css
এভাবে আপনি বুটস্ট্রাপ ৫ কাস্টমাইজ করতে পারবেন।
এগুলো ছিল বুটস্ট্রাপ ৫ সেটআপ এবং ইনস্টলেশনের মূল পদ্ধতি। আপনার প্রয়োজন অনুযায়ী আপনি সিডিএন, লোকাল ইনস্টলেশন, বা npm ব্যবহার করে বুটস্ট্রাপ ৫ ইনস্টল করতে পারেন।
বুটস্ট্রাপ ৫ কে CDN (Content Delivery Network) ব্যবহার করে ইনস্টল করা সবচেয়ে সহজ এবং দ্রুত পদ্ধতি। এটি ব্যবহার করলে আপনি কোনো ফাইল ডাউনলোড বা ইনস্টল করতে হবেনা, এবং সরাসরি HTML ফাইলে সিডিএন লিংক যুক্ত করলেই বুটস্ট্রাপ ৫ এর ফিচার ব্যবহার করতে পারবেন। নিচে বুটস্ট্রাপ ৫ CDN ব্যবহার করে সেটআপ করার প্রক্রিয়া বিস্তারিতভাবে তুলে ধরা হলো।
বুটস্ট্রাপ ৫ এর সিডিএন লিংক সহজেই পাওয়া যায় এবং এই লিংকটি আপনার HTML ফাইলে যোগ করার মাধ্যমে আপনি বুটস্ট্রাপ ৫ এর সমস্ত CSS এবং JavaScript ফিচার ব্যবহার করতে পারবেন। নিচে বুটস্ট্রাপ ৫ এর সর্বশেষ সিডিএন লিংকগুলো দেওয়া হলো।
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
এখন আপনাকে শুধু বুটস্ট্রাপ ৫ এর সিডিএন লিংকগুলো আপনার HTML ফাইলে যোগ করতে হবে। নিচে একটি উদাহরণ দেয়া হলো কিভাবে এটি করতে হবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 CDN Example</title>
<!-- Bootstrap 5 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Example of a Bootstrap Button -->
<div class="container">
<button class="btn btn-primary">Bootstrap 5 Button</button>
</div>
<!-- Bootstrap 5 JavaScript CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
এভাবে, সিডিএন ব্যবহার করে বুটস্ট্রাপ ৫ ইনস্টল এবং ব্যবহার করা খুবই সহজ। এটি একটি দ্রুত এবং কার্যকরী পদ্ধতি, বিশেষত ছোট প্রোজেক্ট বা দ্রুত প্রোটোটাইপ তৈরি করার জন্য।
বুটস্ট্রাপ ৫ কে লোকালভাবে ইনস্টল করার মাধ্যমে আপনি আপনার প্রজেক্টে ফাইলগুলো ডাউনলোড এবং কনফিগার করতে পারবেন। এই পদ্ধতিতে আপনার প্রজেক্ট ফোল্ডারে CSS এবং JavaScript ফাইলগুলো থাকবে, যা আপনাকে সিডিএন ছাড়াই ব্যবহার করতে সাহায্য করবে। নিচে বুটস্ট্রাপ ৫ লোকাল ইনস্টলেশন পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
প্রথমে, আপনাকে বুটস্ট্রাপ ৫ এর ফাইলগুলো ডাউনলোড করতে হবে। এর জন্য বুটস্ট্রাপের অফিসিয়াল ওয়েবসাইটে গিয়ে ZIP ফাইল ডাউনলোড করুন।
ডাউনলোড করা ফাইলটি এক্সট্র্যাক্ট করুন এবং আপনার প্রজেক্ট ফোল্ডারে সেভ করুন। সাধারণত এক্সট্র্যাক্ট করা ফোল্ডারের মধ্যে css, js, এবং fonts নামক সাব-ফোল্ডারগুলো থাকবে।
এখন আপনার প্রজেক্ট ফোল্ডারে বুটস্ট্রাপ ৫ এর ফাইলগুলো সঠিকভাবে লিংক করতে হবে। নিচে একটি উদাহরণ দেয়া হলো কিভাবে লোকালভাবে বুটস্ট্রাপ ৫ এর CSS এবং JavaScript ফাইল লিংক করবেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Local Setup</title>
<!-- Local Bootstrap 5 CSS -->
<link href="path/to/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Example of a Bootstrap Button -->
<div class="container">
<button class="btn btn-primary">Bootstrap 5 Button</button>
</div>
<!-- Local Bootstrap 5 JavaScript -->
<script src="path/to/bootstrap.bundle.min.js"></script>
</body>
</html>
এখানে, path/to/bootstrap.min.css এবং path/to/bootstrap.bundle.min.js এর জায়গায় আপনার ডাউনলোড করা ফাইলের লোকাল পথ উল্লেখ করবেন।
বুটস্ট্রাপ ৫ এর ডাউনলোড করা ফোল্ডারের মধ্যে কিছু গুরুত্বপূর্ণ ফাইল থাকবে, যেমন:
bootstrap.min.css – বুটস্ট্রাপের মিনি ফাইলে লেখা CSS কোড যা সমস্ত স্টাইল শিট পরিচালনা করবে।bootstrap.bundle.min.js – বুটস্ট্রাপের প্রয়োজনীয় JavaScript ফাইল যা স্লাইডার, টুলটিপ, ড্রপডাউন ইত্যাদি ফিচার কাজ করবে।glyphicons-halflings-regular.woff2, glyphicons-halflings-regular.woff। যদিও বুটস্ট্রাপ ৫ এ Glyphicons আর অন্তর্ভুক্ত নয়, তবে আপনি অন্যান্য আইকন লাইব্রেরি ব্যবহার করতে পারেন।ধরা যাক, আপনি bootstrap-5 নামক একটি ফোল্ডার তৈরি করেছেন আপনার প্রজেক্টে, যার মধ্যে নিম্নলিখিত ফোল্ডার কাঠামো থাকবে:
/project-folder
/bootstrap-5
/css
bootstrap.min.css
/js
bootstrap.bundle.min.js
/fonts
glyphicons-halflings-regular.woff2
glyphicons-halflings-regular.woff
/index.html
এখন index.html ফাইলে আপনাকে সঠিক পথ উল্লেখ করতে হবে, যেমন:
<link href="bootstrap-5/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-5/js/bootstrap.bundle.min.js"></script>
বুটস্ট্রাপ ৫ এর ফাইলগুলো আপনার প্রজেক্টে সফলভাবে যুক্ত করার পর, আপনি কাস্টম CSS বা JavaScript ব্যবহার করে ডিজাইন পরিবর্তন করতে পারেন। আপনি custom.css নামে একটি ফাইল তৈরি করে এতে আপনার কাস্টম স্টাইল যোগ করতে পারেন, এবং সেই ফাইলটিকে HTML ফাইলে লিংক করতে পারেন:
<link href="path/to/custom.css" rel="stylesheet">
এভাবে, লোকাল ফাইল লিংক ব্যবহার করে বুটস্ট্রাপ ৫ ইনস্টল এবং কনফিগার করতে পারবেন।
এভাবে, বুটস্ট্রাপ ৫ কে লোকালভাবে ইনস্টল করে আপনি একটি শক্তিশালী এবং কাস্টমাইজেবল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।
যদি আপনি বুটস্ট্রাপ ৫ এর ফাইলগুলো কাস্টমাইজ বা অটোমেটিকালি বিল্ড করতে চান, তাহলে আপনি Webpack বা Parcel ব্যবহার করতে পারেন। এই দুটি টুল আপনার ডেভেলপমেন্ট প্রসেসকে আরো সুষ্ঠু ও কার্যকর করে তোলে, বিশেষত যখন আপনার প্রজেক্টে বিভিন্ন JavaScript, CSS, ইমেজ, ফন্ট ইত্যাদি ফাইল ম্যানেজ করতে হয়।
এখানে আমরা আলোচনা করবো কিভাবে Webpack এবং Parcel ব্যবহার করে বুটস্ট্রাপ ৫ ইন্টিগ্রেট করা যায়।
Webpack একটি শক্তিশালী মডিউল বंडলার যা আপনার প্রজেক্টের ফাইলগুলোকে মডিউলে বিভক্ত করে এবং সেগুলোকে একটি ফাইল বা একটি ফোল্ডারে একত্রিত করে। এটি খুবই কার্যকর যখন আপনার প্রজেক্টে একাধিক CSS বা JavaScript ফাইল থাকে।
প্রথমে আপনার প্রজেক্টে Node.js এবং npm ইনস্টল করা থাকতে হবে।
mkdir my-bootstrap-project
cd my-bootstrap-project
npm init -y
এটি একটি package.json ফাইল তৈরি করবে।
npm install --save-dev webpack webpack-cli
npm install bootstrap
npm install --save-dev style-loader css-loader
এখানে style-loader এবং css-loader ব্যবহার করা হচ্ছে CSS ফাইল লোড এবং প্রসেস করার জন্য।
প্রজেক্টের রুট ফোল্ডারে একটি webpack.config.js ফাইল তৈরি করুন এবং নিম্নলিখিত কনফিগারেশন লিখুন:
const path = require('path');
module.exports = {
entry: './src/index.js', // আপনার প্রধান জাভাস্ক্রিপ্ট ফাইল
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'], // CSS লোড করার জন্য
},
],
},
};
src/index.js ফাইলে বুটস্ট্রাপ ৫ এর CSS এবং JavaScript ইমপোর্ট করুন:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
এখন আপনি Webpack চালিয়ে আপনার ফাইলগুলোর বাণ্ডল তৈরি করতে পারেন:
npx webpack --mode development
এটি dist ফোল্ডারে bundle.js এবং index.html ফাইল তৈরি করবে।
আপনার index.html ফাইলে তৈরি হওয়া bundle.js ফাইলটি যুক্ত করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Webpack Example</title>
</head>
<body>
<button class="btn btn-primary">Bootstrap Button</button>
<script src="dist/bundle.js"></script>
</body>
</html>
এভাবে, Webpack ব্যবহার করে আপনি বুটস্ট্রাপ ৫ এর ফাইলগুলো প্রসেস এবং মডিউল বান্ডলিং করতে পারেন।
Parcel একটি দ্রুত ও সহজ JavaScript বান্ডলার, যা Webpack এর তুলনায় সহজে ব্যবহার করা যায়। Parcel স্বয়ংক্রিয়ভাবে বুটস্ট্রাপ ৫ এবং অন্যান্য ফাইল ম্যানেজ করতে পারে।
npm install --save-dev parcel
npm install bootstrap
প্রজেক্টে একটি src ফোল্ডার তৈরি করুন এবং সেখানে একটি index.html ও index.js ফাইল রাখুন।
index.html ফাইলের মধ্যে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Parcel Example</title>
</head>
<body>
<button class="btn btn-primary">Bootstrap Button</button>
<script src="./index.js"></script>
</body>
</html>
index.js ফাইলে:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
Parcel দিয়ে প্রজেক্ট রান করার জন্য নিচের কমান্ডটি ব্যবহার করুন:
npx parcel src/index.html
এটি আপনার প্রজেক্ট চালু করবে এবং আপনার ব্রাউজারে localhost:1234 এ দেখাবে।
এভাবে, আপনি Webpack বা Parcel ব্যবহার করে বুটস্ট্রাপ ৫ কে আপনার প্রজেক্টে ইন্টিগ্রেট করতে পারেন এবং আপনার ডেভেলপমেন্ট প্রক্রিয়াকে আরও কার্যকরী ও সুগম করতে পারেন।
বুটস্ট্রাপ ৫ ব্যবহার করে একটি নতুন ওয়েব প্রজেক্ট তৈরি করা বেশ সহজ এবং দ্রুত। এখানে ধাপে ধাপে দেখানো হলো কিভাবে আপনি বুটস্ট্রাপ ৫ দিয়ে প্রথম প্রজেক্ট তৈরি করতে পারেন।
প্রথমে একটি নতুন ফোল্ডার তৈরি করুন যেখানে আপনি আপনার প্রজেক্ট ফাইলগুলো রাখতে চান। উদাহরণস্বরূপ, my-bootstrap-project নামে একটি ফোল্ডার তৈরি করুন।
mkdir my-bootstrap-project
cd my-bootstrap-project
এখন এই ফোল্ডারে আপনার প্রজেক্ট ফাইলগুলো তৈরি করা শুরু করতে পারেন।
বুটস্ট্রাপ ৫ সঠিকভাবে আপনার প্রজেক্টে যুক্ত করতে হলে আপনি সিডিএন (CDN) ব্যবহার করতে পারেন অথবা বুটস্ট্রাপের লোকাল ফাইল ইনস্টল করতে পারেন।
সবচেয়ে সহজ পদ্ধতি হলো সিডিএন ব্যবহার করা। এটি আপনার প্রজেক্টের index.html ফাইলে সরাসরি লিংক করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Project</title>
<!-- Bootstrap 5 CSS via CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Sample Button using Bootstrap -->
<div class="container mt-5">
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<!-- Bootstrap 5 JS and dependencies via CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
যদি আপনি বুটস্ট্রাপ ৫ এর ফাইলগুলো লোকালভাবে রাখতে চান, তাহলে CSS এবং JavaScript ফাইলগুলো ডাউনলোড করে আপনার প্রজেক্টে যুক্ত করতে হবে। এর জন্য বুটস্ট্রাপের অফিসিয়াল ওয়েবসাইট থেকে ডাউনলোড করে ফাইলগুলো আপনার প্রজেক্ট ফোল্ডারে রাখুন এবং উপরের মতই HTML ফাইলে সঠিক পথ লিংক করুন।
এখন, আপনার প্রজেক্টের প্রাথমিক HTML স্ট্রাকচার তৈরি করুন। নিচে একটি সাধারণ উদাহরণ দেয়া হলো যেখানে বুটস্ট্রাপ ৫ ব্যবহার করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Example</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Header Section -->
<header class="bg-primary text-white text-center p-4">
<h1>Welcome to My Bootstrap Project</h1>
<p>Using Bootstrap 5 for styling</p>
</header>
<!-- Main Content Section -->
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<h2>Column 1</h2>
<p>This is the first column of content.</p>
</div>
<div class="col-md-6">
<h2>Column 2</h2>
<p>This is the second column of content.</p>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="bg-dark text-white text-center p-3 mt-5">
<p>© 2024 My Bootstrap Project</p>
</footer>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
এখানে আমরা একটি সাধারণ header, main content এবং footer সেকশন তৈরি করেছি। container, row, col-md-6, bg-primary, text-center সহ বুটস্ট্রাপ ৫ এর ক্লাস ব্যবহার করা হয়েছে।
বুটস্ট্রাপ ৫ আপনাকে দ্রুত সুন্দর এবং রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে। এখানে কিছু উদাহরণ দেয়া হলো:
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
এছাড়াও, বুটস্ট্রাপ ৫ আপনাকে Navbar, Modal, Carousel, Grid system ইত্যাদি অন্যান্য কম্পোনেন্ট ব্যবহারের সুবিধা দেয়।
যেহেতু এটি একটি HTML ফাইল, আপনি সরাসরি ব্রাউজারে এটি ওপেন করে দেখতে পারবেন। যদি আপনি জাভাস্ক্রিপ্ট এবং CSS ফাইলগুলোর সাথে কাজ করছেন, তাহলে আপনার ফাইলগুলো সঠিকভাবে লোড হচ্ছে কিনা নিশ্চিত করতে হবে।
এভাবে, বুটস্ট্রাপ ৫ ব্যবহার করে সহজেই একটি প্রজেক্ট তৈরি করা সম্ভব। সিডিএন ব্যবহার করে বা লোকাল ফাইল ডাউনলোড করে আপনি বুটস্ট্রাপ ৫ এর সুবিধাগুলো আপনার প্রজেক্টে প্রয়োগ করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
