{
    "id": "bootstrap4",
    "title": "বুটস্ট্রাপ ৪",
    "slug": "bootstrap4",
    "description": "টুইটার বুটস্ট্রাপ হলো একটা এইচ টি এম এল,সি এস এস,জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যার সর্বশেষ সংস্করণ হলো বুটস্ট্রাপ ৪ , মূলত দ্রুত ওয়েব পেজ ও ওয়েব অ্যাপ্লিকেশন তৈরী করার জন্যে এটা ব্যাপকভাবে ব্যাবহৃত ।",
    "colorPref": "#2535e4",
    "contents": [{
            "title": "কন্টেনার ক্লাস",
            "items": [{
                "definition": "রেস্পন্সিভ ফিক্স উইড",
                "code": "<div class='container'>...</div>"
            }, {
                "definition": "ফুল উইড",
                "code": "<div class='container-fluid'>...</div>"
            }]
        },
        {
            "title": "গ্রিড ক্লাস",
            "items": [{
                "definition": "স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর ছোট",
                "code": "<div class='col-'>...</div>"
            }, {
                "definition": "স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর সমান বা বড়",
                "code": "<div class='col-sm'>...</div>"
            }, {
                "definition": "স্ক্রীন প্রস্থ যখন ৭৬৮পিক্সেল এর সমান বা বড়",
                "code": "<div class='col-md'>...</div>"
            }, {
                "definition": "স্ক্রীন প্রস্থ যখন ৯৯২পিক্সেল এর সমান বা বড়",
                "code": "<div class='col-lg'>...</div>"
            }, {
                "definition": "স্ক্রীন প্রস্থ যখন ১২০০পিক্সেল এর সমান বা বড়",
                "code": "<div class='col-xl'>...</div>"
            }]
        }, {
            "title": "ভার্টিকাল আলাইনমেন্ট",
            "items": [{
                "definition": "সব কলাম উপরে দেখানো",
                "code": "<div class='row align-items-start'><div class='col'>...</div><div class='col'>...</div></div>"
            }, {
                "definition": "সব কলাম মাঝে দেখানো",
                "code": "<div class='row align-items-center'><div class='col'>...</div><div class='col'>...</div></div>"
            }, {
                "definition": "সব কলাম নিচে দেখানো",
                "code": "<div class='row align-items-end'><div class='col'>...</div><div class='col'>...</div></div>"
            }, {
                "definition": "একটি কলাম উপরে দেখানো",
                "code": "<div class='row'><div class='col align-self-start'>...</div></div>"
            }, {
                "definition": "একটি কলাম মাঝে দেখানো",
                "code": "<div class='row'><div class='col align-self-center'>...</div></div>"
            }, {
                "definition": "একটি কলাম নিছে দেখানো",
                "code": "<div class='row'><div class='col align-self-end'>...</div></div>"
            }
        ]
        }, {
            "title": "হরিজেন্টাল আলাইনমেন্ট",
            "items": [{
                "definition": "সব কলাম বামে দেখানো",
                "code": "<div class='row justify-content-start'><div class='col'>...</div><div class='col'>...</div></div>"
            }, {
                "definition": "সব কলাম ডানে দেখানো",
                "code": "<div class='row justify-content-end'><div class='col'>...</div><div class='col'>...</div></div>"
            }, {
                "definition": "সব কলাম মাঝে দেখানো",
                "code": "<div class='row justify-content-center'><div class='col'>...</div><div class='col'>...</div></div>"
            }, {
                "definition": "সব কলাম ডানে বামে সমান গ্যাপে দেখানো",
                "code": "<div class='row'><div class='col justify-content-around'>...</div></div>"
            }
        ]
        }, {
            "title": "টাইপোগ্রাফি ক্লাস",
            "items": [
            {
                "definition": "বোল্ড টেক্সট",
                "code": "<p class='font-weight-bold'>...</p>"
            }, {
                "definition": "ইটালিক টেক্সট",
                "code": "<p class='font-italic'>...</p>"
            }, {
                "definition": "লাইট উইড টেক্সট",
                "code": "<p class='font-weight-light'>...</p>"
            }, {
                "definition": "লেফট অ্যালাইন",
                "code": "<p class='text-left'>...</p>"
            }, {
                "definition": "রাইট অ্যালাইন",
                "code": "<p class='text-right'>...</p>"
            }, {
                "definition": "জাস্টিফাই টেক্সট",
                "code": "<p class='text-justify'>...</p>"
            }, {
                "definition": "আপারকেস টেক্সট",
                "code": "<p class='text-uppercase'>...</p>"
            }, {
                "definition": "ক্যাপিটালাইস টেক্সট",
                "code": "<p class='text-capitalize'>...</p>"
            }
        ]
        }, {
            "title": "টেবিল ক্লাস",
            "items": [{
                "definition": "স্ট্রাইপ টেবিল",
                "code": "<table class='table-striped'>...</table>"
            }, {
                "definition": "বর্ডার টেবিল",
                "code": "<table class='table-bordered'>...</table>"
            }, {
                "definition": "বর্ডার ছাড়া টেবিল",
                "code": "<table class='table-borderedless'>...</table>"
            }, {
                "definition": "মাউস হোভারে বিজি কালার পরিবর্তন টেবিল",
                "code": "<table class='table-hover'>...</table>"
            }, {
                "definition": "ডার্ক কালার টেবিল",
                "code": "<table class='table-dark'>...</table>"
            }, {
                "definition": "রেস্পন্সিভ টেবিল",
                "code": "<div class='table-responsive'><table>...</table></div>"
            }]
        }, {
            "title": "ইমেজ ক্লাস",
            "items": [{
                "definition": "রাউন্ড কর্নার",
                "code": "<img class='rounded'>"
            }, {
                "definition": "বৃত্ত আকার",
                "code": "<img class='rounded-circle'>"
            }, {
                "definition": "লেফট অ্যালাইন",
                "code": "<img class='float-left'>"
            }, {
                "definition": "রাইট অ্যালাইন",
                "code": "<img class='float-right'>"
            }, {
                "definition": "সেন্টার অ্যালাইন",
                "code": "<img class='d-block mx-auto'>"
            }, {
                "definition": "রিস্পন্সিভ ইমেজ",
                "code": "<img class='img-fluid'>"
            }]
        }
    ]
}