ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ଉଦାହରଣ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ମଧ୍ୟରେ ନିର୍ମାଣ ସହିତ ଆପଣଙ୍କୁ ପରିଚିତ କରିବା ପାଇଁ ମ Basic ଳିକ ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ |

ଏହି ଉଦାହରଣଗୁଡିକରେ .themed-grid-colକ୍ଲାସ୍ କିଛି ଥିମ୍ ଯୋଡିବା ପାଇଁ ସ୍ତମ୍ଭରେ ଯୋଡା ଯାଇଛି | ଏହା ଏକ ଶ୍ରେଣୀ ନୁହେଁ ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ବୁଟଷ୍ଟ୍ରାପରେ ଉପଲବ୍ଧ |

ପାଞ୍ଚଟି ଗ୍ରୀଡ୍ ସ୍ତର |

ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ପାଇଁ ପାଞ୍ଚଟି ପର୍ଯ୍ୟାୟ ଅଛି, ଆମେ ସମର୍ଥନ କରୁଥିବା ପ୍ରତ୍ୟେକ ଉପକରଣ ପାଇଁ ଗୋଟିଏ | ପ୍ରତ୍ୟେକ ପର୍ଯ୍ୟାୟ ସର୍ବନିମ୍ନ ଭ୍ୟୁପୋର୍ଟ ଆକାରରୁ ଆରମ୍ଭ ହୁଏ ଏବଂ ଓଭରବ୍ରିଡ୍ ନହେବା ପର୍ଯ୍ୟନ୍ତ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ବୃହତ ଉପକରଣଗୁଡ଼ିକରେ ପ୍ରଯୁଜ୍ୟ |

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

ତିନୋଟି ସମାନ ସ୍ତମ୍ଭ |

ଡେସ୍କଟପ୍ ଠାରୁ ଆରମ୍ଭ କରି ବଡ଼ ଡେସ୍କଟପ୍କୁ ମାପିବା ପାଇଁ ତିନୋଟି ସମାନ ଓସାର ସ୍ତମ୍ଭ ପାଆନ୍ତୁ | ମୋବାଇଲ୍ ଡିଭାଇସ୍, ଟାବଲେଟ୍ ଏବଂ ତଳେ, ସ୍ତମ୍ଭଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଷ୍ଟାକ ହେବ |

.col-md-4

ତିନୋଟି ସମାନ ସ୍ତମ୍ଭ ବିକଳ୍ପ |

କ୍ଲାସ୍ ବ୍ୟବହାର କରି .row-cols-*, ତୁମେ ସମାନ ସ୍ତମ୍ଭ ସହିତ ସହଜରେ ଏକ ଗ୍ରୀଡ୍ ସୃଷ୍ଟି କରିପାରିବ |

.colର ପିଲା .row-cols-md-3

ତିନୋଟି ଅସମାନ ସ୍ତମ୍ଭ |

ଡେସ୍କଟପ୍ ଠାରୁ ଆରମ୍ଭ କରି ବିଭିନ୍ନ ପ୍ରସ୍ଥର ବଡ଼ ଡେସ୍କଟପ୍କୁ ମାପିବା ପାଇଁ ତିନୋଟି ସ୍ତମ୍ଭ ପାଆନ୍ତୁ | ମନେରଖନ୍ତୁ, ଗୋଟିଏ ଭୂସମାନ୍ତର ବ୍ଲକ ପାଇଁ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡିକ ବାର ପର୍ଯ୍ୟନ୍ତ ଯୋଡିବା ଉଚିତ | ତା’ଠାରୁ ଅଧିକ, ଏବଂ ଭ୍ୟୁପୋର୍ଟକୁ ଖାତିର ନକରି ସ୍ତମ୍ଭଗୁଡ଼ିକ ଷ୍ଟାକିଂ ଆରମ୍ଭ କରନ୍ତି |

.col-md-3

.col-md-6

.col-md-3

ଦୁଇଟି ସ୍ତମ୍ଭ

ଡେସ୍କଟପ୍ ଠାରୁ ଆରମ୍ଭ କରି ବଡ଼ ଡେସ୍କଟପ୍କୁ ମାପିବା ପାଇଁ ଦୁଇଟି ସ୍ତମ୍ଭ ପାଆନ୍ତୁ |

.col-md-8

.col-md-4

ପୂର୍ଣ୍ଣ ମୋଟେଇ, ଏକକ ସ୍ତମ୍ଭ |

ପୂର୍ଣ୍ଣ ଓସାର ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ କ gr ଣସି ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ଆବଶ୍ୟକ ନାହିଁ |

ଦୁଇଟି ସ୍ତମ୍ଭ ବିଶିଷ୍ଟ ଦୁଇଟି ସ୍ତମ୍ଭ |

ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଅନୁଯାୟୀ, ବସା ବାନ୍ଧିବା ସହଜ - କେବଳ ଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଏକ ଧାଡି ସ୍ତମ୍ଭ ରଖ | ଏହା ଆପଣଙ୍କୁ ଦୁଇଟି ସ୍ତମ୍ଭ ଡେସ୍କଟପ୍ ଠାରୁ ଆରମ୍ଭ କରି ବଡ଼ ଡେସ୍କଟପ୍କୁ ମାପିବା ସହିତ ବଡ଼ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଅନ୍ୟ ଦୁଇଟି (ସମାନ ପ୍ରସ୍ଥ) ସହିତ ପ୍ରଦାନ କରେ |

ମୋବାଇଲ୍ ଡିଭାଇସ୍ ସାଇଜ୍, ଟାବଲେଟ୍ ଏବଂ ଡାଉନ୍ ରେ, ଏହି ସ୍ତମ୍ଭଗୁଡିକ ଏବଂ ସେମାନଙ୍କର ନେଷ୍ଟେଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ଷ୍ଟାକ୍ ହେବ |

.col-md-8

.col-md-6

.col-md-4

ମିଶ୍ରିତ: ମୋବାଇଲ୍ ଏବଂ ଡେସ୍କଟପ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ v5 ଗ୍ରୀଡ୍ ସିଷ୍ଟମରେ six ଟି ପର୍ଯ୍ୟାୟ ଶ୍ରେଣୀ ଅଛି: xs (ଅତିରିକ୍ତ ଛୋଟ, ଏହି ଶ୍ରେଣୀ ଇନଫିକ୍ସ ବ୍ୟବହୃତ ହୁଏ ନାହିଁ), sm (ଛୋଟ), md (ମଧ୍ୟମ), lg (ବଡ଼), xl (x- ବଡ଼), ଏବଂ xxl (xx -large) ଅଧିକ ଗତିଶୀଳ ଏବଂ ନମନୀୟ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଆପଣ ଏହି ଶ୍ରେଣୀର ପ୍ରାୟ କ combination ଣସି ମିଶ୍ରଣକୁ ବ୍ୟବହାର କରିପାରିବେ |

ଶ୍ରେଣୀର ପ୍ରତ୍ୟେକ ସ୍ତର ମାପଚୁପ ହୁଏ, ଅର୍ଥାତ୍ ଯଦି ଆପଣ md, lg, xl ଏବଂ xxl ପାଇଁ ସମାନ ଓସାର ସେଟ୍ କରିବାକୁ ଯୋଜନା କରୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ କେବଳ md ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ପଡିବ |

.col-md-8

.col-6 .col-md-4

.col-6

ମିଶ୍ରିତ: ମୋବାଇଲ୍, ଟାବଲେଟ୍, ଏବଂ ଡେସ୍କଟପ୍ |

.col-sm-6 .col-lg-8 |

.col-6 .col-lg-4

.col-6 .col-sm-4

ଗୁଟର୍ସ |

କ୍ଲାସ୍ ସହିତ .gx-*, ଭୂସମାନ୍ତର ଗୁଟରଗୁଡିକ ସଜାଡିହେବ |

.col.gx-4ଗୁଟଖା ସହିତ |

.gy-*ଭୂଲମ୍ବ ଗୁଟର୍ଗୁଡ଼ିକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

.col.gy-4ଗୁଟଖା ସହିତ |

କ୍ଲାସ୍ ସହିତ .g-*, ଉଭୟ ଦିଗରେ ଥିବା ଗେଟର୍ ଗୁଡିକ ସଜାଡିହେବ |

.col.g-3ଗୁଟଖା ସହିତ |

ପାତ୍ରଗୁଡିକ |

ବୁଟଷ୍ଟ୍ରାପ୍ v4.4 ରେ ଯୋଗ କରାଯାଇଥିବା ଅତିରିକ୍ତ ଶ୍ରେଣୀଗୁଡ଼ିକ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପର୍ଯ୍ୟନ୍ତ 100% ଚଉଡା ପାତ୍ରଗୁଡ଼ିକୁ ଅନୁମତି ଦେଇଥାଏ | v5 ଏକ ନୂତନ xxlବ୍ରେକପଏଣ୍ଟ ଯୋଗ କରେ |

.କଣ୍ଟେନର୍

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.କଣ୍ଟେନର୍-ଫ୍ଲୁଇଡ୍ |