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

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

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

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

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

ଦୁଇଟି ସ୍ତମ୍ଭ

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

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

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

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

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

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

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

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

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

Mixed: mobile, tablet, and desktop

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.