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

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

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

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

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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

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

.col-md-4
.col-md-4
.col-md-4

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

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

.col-md-3
.col-md-6
.col-md-3

ଦୁଇଟି ସ୍ତମ୍ଭ

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

.col-md-8
.col-md-4

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

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


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

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

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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

ବୁଟଷ୍ଟ୍ରାପ୍ v4 ଗ୍ରୀଡ୍ ସିଷ୍ଟମରେ ପାଞ୍ଚଟି ଶ୍ରେଣୀ ଅଛି: xs (ଅତିରିକ୍ତ ଛୋଟ), sm (ଛୋଟ), md (ମଧ୍ୟମ), lg (ବଡ଼), ଏବଂ xl (ଅତିରିକ୍ତ ବଡ଼) | ଅଧିକ ଗତିଶୀଳ ଏବଂ ନମନୀୟ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଆପଣ ଏହି ଶ୍ରେଣୀର ପ୍ରାୟ କ combination ଣସି ମିଶ୍ରଣକୁ ବ୍ୟବହାର କରିପାରିବେ |

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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

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