Header Ads

Header ADS

Grid-CSS Frameworks(Bootstrap 4+W3.CSS+Materialize Css)



Grid:

আজকের আলোচনার বিষয় গ্রিড।কিভাবে আমরা কলাম গুলোকে সুবিন্যস্ত করতে পারি।
প্রথমে একটি div এর মধ্যে ।row class টি দিতে হবে এর পরে সেই div এর মধ্যে .col ক্লাস গুলো লিখতে হবে।

W3.CSS:

w3.container

w3-row,
w3-row-padding (Container for responsive classes, with 8px left and right padding)

w3-col,s1-s12(small screen),m1-m12(medium screen),l1-l12(large screen)
w3-quarter(1/4)
w3-rest(কোন একটা অংশ নির্দিষ্ট করে দেওয়ার পরে ১২ গ্রিডের মধ্যে যতটুকু অংশ বাকি থাকে)
w3-row-padding ক্লাসের মধ্যে ইমেজ ইউজ করলে style="width: 100%" ব্যাবহার করতে হবে।


Bootstrap 4:

.container,
.container-fluid
.row, .justify-content-md-center, .align-items-start,align-items-start

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
offset-lg-4


Materialize CSS:

.container
.row
.col,s1-s12(small screen),m1-m12(medium screen),l1-l12(large screen)
offset-s6,push-l3,pull-m3,
.divider,.section,






No comments

Theme images by centauria. Powered by Blogger.