ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |

ବାରଟି ସ୍ତମ୍ଭ ସିଷ୍ଟମ, ପାଞ୍ଚଟି ଡିଫଲ୍ଟ ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍ତର, ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସିନ ଏବଂ ଦଶହଜାର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ୍ରେଣୀ ଯୋଗୁଁ ସମସ୍ତ ଆକୃତି ଏବଂ ଆକାରର ଲେଆଉଟ୍ ନିର୍ମାଣ କରିବାକୁ ଆମର ଶକ୍ତିଶାଳୀ ମୋବାଇଲ୍-ପ୍ରଥମ ଫ୍ଲେକ୍ସବକ୍ସ ଗ୍ରୀଡ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଏହା କିପରି କାମ କରେ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବିଷୟବସ୍ତୁକୁ ଲେଆଉଟ୍ ଏବଂ ଆଲାଇନ୍ କରିବା ପାଇଁ ଏକ ପାତ୍ର, ଧାଡି, ଏବଂ ସ୍ତମ୍ଭ ବ୍ୟବହାର କରେ | ଏହା ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନିର୍ମିତ ଏବଂ ସମ୍ପୂର୍ଣ୍ଣ ପ୍ରତିକ୍ରିୟାଶୀଳ | ନିମ୍ନରେ ଏକ ଉଦାହରଣ ଏବଂ ଗ୍ରୀଡ୍ କିପରି ଏକତ୍ର ହୁଏ ତାହାର ଏକ ଗଭୀର ଦୃଷ୍ଟି |

ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନୂଆ କି ଅପରିଚିତ? ପୃଷ୍ଠଭୂମି, ଶବ୍ଦ, ନିର୍ଦ୍ଦେଶାବଳୀ, ଏବଂ କୋଡ୍ ସ୍ନିପେଟ୍ ପାଇଁ ଏହି CSS ଟ୍ରିକ୍ସ ଫ୍ଲେକ୍ସବକ୍ସ ଗାଇଡ୍ ପ Read ନ୍ତୁ |

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

ଉପରୋକ୍ତ ଉଦାହରଣ ଆମର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରି ଛୋଟ, ମଧ୍ୟମ, ବୃହତ ଏବଂ ଅତିରିକ୍ତ ବୃହତ ଉପକରଣଗୁଡ଼ିକରେ ତିନୋଟି ସମାନ-ପ୍ରସ୍ଥ ସ୍ତମ୍ଭ ସୃଷ୍ଟି କରେ | ସେହି ସ୍ତମ୍ଭଗୁଡ଼ିକ ପିତାମାତା ସହିତ ପୃଷ୍ଠାରେ କେନ୍ଦ୍ରୀଭୂତ .container|

ଏହାକୁ ଭାଙ୍ଗିବା, ଏହା କିପରି କାର୍ଯ୍ୟ କରେ ତାହା ଏଠାରେ ଅଛି:

• ଧାରଣକାରୀମାନେ ଆପଣଙ୍କ ସାଇଟର ବିଷୟବସ୍ତୁକୁ କେନ୍ଦ୍ର ଏବଂ ଭୂସମାନ୍ତର ଭାବରେ ପ୍ୟାଡ୍ କରିବାର ଏକ ମାଧ୍ୟମ ପ୍ରଦାନ କରନ୍ତି | .containerଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ପିକ୍ସେଲ ଓସାର .container-fluidପାଇଁ କିମ୍ବା width: 100%ସମସ୍ତ ଭ୍ୟୁପୋର୍ଟ ଏବଂ ଡିଭାଇସ୍ ଆକାର ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |
• ଧାଡିଗୁଡ଼ିକ ସ୍ତମ୍ଭ ପାଇଁ ରାପର୍ | ସେମାନଙ୍କ ମଧ୍ୟରେ ଥିବା ସ୍ଥାନକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭରେ ଭୂସମାନ୍ତର padding(ଏକ ଗୁଟର୍ କୁହାଯାଏ) ଥାଏ | ଏହା paddingପରେ ନକାରାତ୍ମକ ମାର୍ଜିନ ସହିତ ଧାଡିରେ ପ୍ରତିରୋଧ କରାଯାଏ | ଏହି ଉପାୟରେ, ଆପଣଙ୍କର ସ୍ତମ୍ଭରେ ଥିବା ସମସ୍ତ ବିଷୟବସ୍ତୁ ବାମ ପାର୍ଶ୍ୱରେ ଭିଜୁଆଲ୍ ଆଲାଇନ୍ ହୋଇଛି |
• ଏକ ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ରେ, ବିଷୟବସ୍ତୁ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ସ୍ଥାନିତ ହେବା ଆବଶ୍ୟକ ଏବଂ କେବଳ ସ୍ତମ୍ଭଗୁଡ଼ିକ ତୁରନ୍ତ ଧାଡିର ପିଲା ହୋଇପାରେ |
• ଫ୍ଲେକ୍ସବକ୍ସକୁ ଧନ୍ୟବାଦ, ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବିନା ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ widthସ୍ୱୟଂଚାଳିତ ଭାବରେ ସମାନ ଓସାର ସ୍ତମ୍ଭ ଭାବରେ ଲେଆଉଟ୍ ହେବ | ଉଦାହରଣ ସ୍ୱରୂପ, ଚାରୋଟି ଉଦାହରଣ .col-smସ୍ୱୟଂଚାଳିତ ଭାବରେ ଛୋଟ ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଅପ୍ ଠାରୁ 25% ଚଉଡା ହେବ | ଅଧିକ ଉଦାହରଣ ପାଇଁ ଅଟୋ-ଲେଆଉଟ୍ ସ୍ତମ୍ଭ ବିଭାଗ ଦେଖନ୍ତୁ |
• ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ପ୍ରତି ସ୍ତମ୍ଭର ସମ୍ଭାବ୍ୟ 12 ମଧ୍ୟରୁ ଆପଣ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଥିବା ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ସୂଚିତ କରେ | ତେଣୁ, ଯଦି ଆପଣ ତିନୋଟି ସମାନ ଓସାର ସ୍ତମ୍ଭ ଚାହୁଁଛନ୍ତି, ଆପଣ ବ୍ୟବହାର କରିପାରିବେ .col-4|
• ସ୍ତମ୍ଭଗୁଡିକ widthଶତକଡା ସେଟ୍ ହୋଇଛି, ତେଣୁ ସେମାନେ ସର୍ବଦା ତରଳ ଏବଂ ସେମାନଙ୍କର ପିତାମାତା ଉପାଦାନ ସହିତ ଆକାରର |
• paddingବ୍ୟକ୍ତିଗତ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଗୁଟର୍ ସୃଷ୍ଟି କରିବାକୁ ସ୍ତମ୍ଭଗୁଡ଼ିକର ଭୂସମାନ୍ତର ଅଛି, ତଥାପି, ଆପଣ marginଧାଡିରୁ ଏବଂ ସହିତ ଥିବା paddingସ୍ତମ୍ଭରୁ ଅପସାରଣ କରିପାରିବେ |.no-gutters.row
• ଗ୍ରୀଡ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ କରିବାକୁ, ସେଠାରେ ପାଞ୍ଚଟି ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟ ଅଛି, ପ୍ରତ୍ୟେକ ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ଗୋଟିଏ : ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟ (ଅତିରିକ୍ତ ଛୋଟ), ଛୋଟ, ମଧ୍ୟମ, ବଡ଼ ଏବଂ ଅତିରିକ୍ତ ବଡ଼ |
• ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟଗୁଡିକ ସର୍ବନିମ୍ନ ଓସାର ମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ଆଧାରିତ, ଅର୍ଥାତ୍ ସେମାନେ ସେହି ଗୋଟିଏ ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଏହା ଉପରେ ଥିବା ସମସ୍ତଙ୍କ ପାଇଁ ପ୍ରଯୁଜ୍ୟ (ଉଦାହରଣ ସ୍ୱରୂପ, .col-sm-4ଛୋଟ, ମଧ୍ୟମ, ବଡ଼ ଏବଂ ଅତିରିକ୍ତ ବଡ଼ ଉପକରଣଗୁଡ଼ିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ, କିନ୍ତୁ ପ୍ରଥମ xsବ୍ରେକପଏଣ୍ଟ ନୁହେଁ) |
• ଅଧିକ ଅର୍ଥଗତ ମାର୍କଅପ୍ ପାଇଁ ଆପଣ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ (ଯେପରି .col-4) କିମ୍ବା ସାସ୍ ମିକ୍ସିନ ବ୍ୟବହାର କରିପାରିବେ |

ଫ୍ଲେକ୍ସବକ୍ସ ଚାରିପାଖରେ ଥିବା ସୀମିତତା ଏବଂ ତ୍ରୁଟି ବିଷୟରେ ସଚେତନ ରୁହନ୍ତୁ , ଯେପରି କିଛି HTML ଉପାଦାନକୁ ଫ୍ଲେକ୍ସ ପାତ୍ର ଭାବରେ ବ୍ୟବହାର କରିବାରେ ଅକ୍ଷମତା |

ଗ୍ରୀଡ୍ ବିକଳ୍ପଗୁଡିକ |

ଅଧିକାଂଶ ଆକାର ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ems କିମ୍ବା s ବ୍ୟବହାର କରୁଥିବାବେଳେ , ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟ ଏବଂ କଣ୍ଟେନର ମୋଟେଇ ପାଇଁ s ବ୍ୟବହୃତ ହୁଏ | ଏହାର କାରଣ ହେଉଛି ଭ୍ୟୁପୋର୍ଟ୍ ଓସାର ପିକ୍ସେଲରେ ଅଛି ଏବଂ ଫଣ୍ଟ୍ ସାଇଜ୍ ସହିତ ପରିବର୍ତ୍ତନ ହୁଏ ନାହିଁ |rempx

ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଦିଗଗୁଡ଼ିକ କିପରି ଏକ ସହଜ ଟେବୁଲ୍ ସହିତ ଏକାଧିକ ଡିଭାଇସରେ କାର୍ଯ୍ୟ କରେ ଦେଖନ୍ତୁ |

ଅଟୋ-ଲେଆଉଟ୍ ସ୍ତମ୍ଭଗୁଡିକ |

ଯେପରି ଏକ ସ୍ପଷ୍ଟ ନମ୍ବରଯୁକ୍ତ ଶ୍ରେଣୀ ବିନା ସହଜ ସ୍ତମ୍ଭ ଆକାର ପାଇଁ ବ୍ରେକପଏଣ୍ଟ-ନିର୍ଦ୍ଦିଷ୍ଟ ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ .col-sm-6|

ସମାନ ଓସାର |

ଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ ଦୁଇଟି ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ଅଛି ଯାହା ପ୍ରତ୍ୟେକ ଡିଭାଇସ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟରେ xsପ୍ରଯୁଜ୍ୟ xl| ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ଯେକ number ଣସି ସଂଖ୍ୟକ ୟୁନିଟ୍-କମ୍ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ ଏବଂ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭ ସମାନ ପ୍ରସ୍ଥ ହେବ |

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ସମାନ ଓସାର ମଲ୍ଟି ଲାଇନ୍ |

ସମାନ-ଓସାର ସ୍ତମ୍ଭ ସୃଷ୍ଟି କରନ୍ତୁ .w-100ଯେଉଁଠାରେ ଆପଣ ଏକ ନୂତନ ଧାଡିରେ ଭାଙ୍ଗିବାକୁ ଚାହୁଁଥିବା ଏକ ସନ୍ନିବେଶ କରି ଏକାଧିକ ଧାଡି ବିସ୍ତାର କରନ୍ତି | .w-100କିଛି ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରଦର୍ଶନ ଉପଯୋଗୀତା ସହିତ ମିଶ୍ରଣ କରି ବ୍ରେକଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ କରନ୍ତୁ |

ସେଠାରେ ଏକ ସଫାରି ଫ୍ଲେକ୍ସବକ୍ସ ବଗ୍ ଥିଲା ଯାହାକି ଏହାକୁ ବିନା ସ୍ପଷ୍ଟ ଭାବରେ କାମ କରିବାରେ ପ୍ରତିରୋଧ flex-basisକରିଥିଲା border​​| ପୁରାତନ ବ୍ରାଉଜର୍ ସଂସ୍କରଣ ପାଇଁ ୱାର୍କଆଉଟ୍ ଅଛି, କିନ୍ତୁ ଯଦି ଆପଣଙ୍କର ଟାର୍ଗେଟ୍ ବ୍ରାଉଜର୍ଗୁଡ଼ିକ ବଗି ସଂସ୍କରଣରେ ନ ପଡ଼ନ୍ତି ତେବେ ସେଗୁଡିକ ଆବଶ୍ୟକ ହେବା ଉଚିତ୍ ନୁହେଁ |

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

ଗୋଟିଏ ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ ସେଟିଂ କରିବା |

ଫ୍ଲେକ୍ସବକ୍ସ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ପାଇଁ ଅଟୋ-ଲେଆଉଟ୍ ମଧ୍ୟ ଏହାର ଅର୍ଥ ହେଉଛି ଯେ ଆପଣ ଗୋଟିଏ ସ୍ତମ୍ଭର ମୋଟେଇ ସେଟ୍ କରିପାରିବେ ଏବଂ ଭାଇଭାଇନ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏହାର ଆକାର ବଦଳାଇ ପାରିବେ | ଆପଣ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ (ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି), ଗ୍ରୀଡ୍ ମିକ୍ସିନ୍ କିମ୍ବା ଇନଲାଇନ ପ୍ରସ୍ଥ ବ୍ୟବହାର କରିପାରିବେ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଅନ୍ୟ ସ୍ତମ୍ଭଗୁଡ଼ିକ କେନ୍ଦ୍ର ସ୍ତମ୍ଭର ମୋଟେଇକୁ ଗୁରୁତ୍ୱ ନଦେଇ ଆକାର ପରିବର୍ତ୍ତନ କରିବ |

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ଭେରିଏବଲ୍ ଓସାର ବିଷୟବସ୍ତୁ |

col-{breakpoint}-autoସେମାନଙ୍କର ବିଷୟବସ୍ତୁର ପ୍ରାକୃତିକ ମୋଟେଇ ଉପରେ ଆଧାର କରି ସ୍ତମ୍ଭଗୁଡିକ ଆକାର କରିବାକୁ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀଗୁଡିକ |

ଜଟିଳ ପ୍ରତିକ୍ରିୟାଶୀଳ ଲେଆଉଟ୍ ଗଠନ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ରେ ପାଞ୍ଚଟି ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୁକ୍ତ | ଅତିରିକ୍ତ ଛୋଟ, ଛୋଟ, ମଧ୍ୟମ, ବଡ଼, କିମ୍ବା ଅତିରିକ୍ତ ବଡ଼ ଉପକରଣଗୁଡ଼ିକରେ ତୁମର ସ୍ତମ୍ଭର ଆକାର କଷ୍ଟୋମାଇଜ୍ କର ଯଦିଓ ତୁମେ ଫିଟ୍ ଦେଖୁଛ |

ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟ |

ଗ୍ରୀଡ୍ ପାଇଁ ଯାହା ଛୋଟ ଉପକରଣରୁ ବଡ ପର୍ଯ୍ୟନ୍ତ ସମାନ, .colଏବଂ .col-*ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ଯେତେବେଳେ ଆପଣ ଏକ ବିଶେଷ ଆକାରର ସ୍ତମ୍ଭ ଆବଶ୍ୟକ କରନ୍ତି ଏକ ନମ୍ବରଯୁକ୍ତ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ; ନଚେତ୍, ସ୍ଥିର ରହିବାକୁ ମୁକ୍ତ ହୁଅ .col|

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ଭୂସମାନ୍ତର

ଶ୍ରେଣୀର ଗୋଟିଏ ସେଟ୍ ବ୍ୟବହାର କରି .col-sm-*, ଆପଣ ଏକ ମ basic ଳିକ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସୃଷ୍ଟି କରିପାରିବେ ଯାହା ଷ୍ଟାକ୍ ହୋଇ ଆରମ୍ଭ ହୁଏ ଏବଂ ଛୋଟ ବ୍ରେକପଏଣ୍ଟରେ ଭୂସମାନ୍ତର ହୋଇଯାଏ sm|

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ମିଶ୍ରଣ ଏବଂ ମେଳ କରନ୍ତୁ |

ତୁମର ସ୍ତମ୍ଭଗୁଡିକ କେବଳ କିଛି ଗ୍ରୀଡ୍ ସ୍ତରରେ ଷ୍ଟକ୍ କରିବାକୁ ଚାହୁଁନାହାଁନ୍ତି କି? ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପ୍ରତ୍ୟେକ ପର୍ଯ୍ୟାୟ ପାଇଁ ବିଭିନ୍ନ ଶ୍ରେଣୀର ମିଶ୍ରଣ ବ୍ୟବହାର କରନ୍ତୁ | ଏହା କିପରି କାର୍ଯ୍ୟ କରେ ତାହାର ଏକ ଉତ୍ତମ ଧାରଣା ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ଦେଖନ୍ତୁ |

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ଗୁଟର୍ସ |

ବ୍ରେକପଏଣ୍ଟ-ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ୟାଡିଂ ଏବଂ ନକାରାତ୍ମକ ମାର୍ଜିନ୍ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଦ୍ୱାରା ଗୁଟରଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ଆଡଜଷ୍ଟ ହୋଇପାରିବ | ପ୍ରଦତ୍ତ ଧାଡିରେ ଗୁଟର୍ଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ, s ଉପରେ ଏକ ନକାରାତ୍ମକ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ଏବଂ s .rowଉପରେ ମେଳ ଖାଉଥିବା ପ୍ୟାଡିଂ ଉପଯୋଗିତାକୁ ଯୋଡନ୍ତୁ | .colପୁନର୍ବାର ମେଳ ଖାଉଥିବା ପ୍ୟାଡିଂ ଉପଯୋଗିତାକୁ ବ୍ୟବହାର କରି ଅବାଞ୍ଛିତ ଓଭରଫ୍ଲୋକୁ ଏଡାଇବା ପାଇଁ .containerକିମ୍ବା .container-fluidପିତାମାତାଙ୍କୁ ମଧ୍ୟ ସଜାଡିବାକୁ ପଡିପାରେ |

lgବଡ଼ ( ) ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଉପରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ କଷ୍ଟୋମାଇଜ୍ କରିବାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି | ଆମେ .colପ୍ୟାଡିଂ ସହିତ ବୃଦ୍ଧି କରିଛୁ, ଏହାକୁ ପିତାମାତାଙ୍କ .px-lg-5ସହିତ ପ୍ରତିରୋଧ କରିଛୁ ଏବଂ ତା’ପରେ ରାପର୍ ସହିତ ସଜାଡିଛୁ |.mx-lg-n5.row.container.px-lg-5

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

ଧାଡି ସ୍ତମ୍ଭ

.row-cols-*ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ଶୀଘ୍ର ସେଟ୍ କରିବାକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା ଆପଣଙ୍କର ବିଷୟବସ୍ତୁ ଏବଂ ଲେଆଉଟ୍କୁ ସର୍ବୋତ୍ତମ ପ୍ରଦର୍ଶନ କରେ | ଯେଉଁଠାରେ ସାଧାରଣ .col-*ଶ୍ରେଣୀଗୁଡ଼ିକ ବ୍ୟକ୍ତିଗତ ସ୍ତମ୍ଭଗୁଡ଼ିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ (ଯଥା, .col-md-4), ଧାଡି ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡ଼ିକ .rowଏକ ସର୍ଟକଟ୍ ଭାବରେ ପିତାମାତା ଉପରେ ସେଟ୍ ହୋଇଛି |

ଶୀଘ୍ର ମ basic ଳିକ ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ କିମ୍ବା ଆପଣଙ୍କର କାର୍ଡ ଲେଆଉଟ୍ ନିୟନ୍ତ୍ରଣ କରିବାକୁ ଏହି ଧାଡି ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ଆପଣ ସାସ୍ ମିଶ୍ରଣକୁ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ , row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

ଶ୍ରେଣୀବଦ୍ଧତା |

ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର ଭାବରେ ଆଲାଇନ୍ କରିବା ପାଇଁ ଫ୍ଲେକ୍ସବକ୍ସ ଆଲାଇନ୍ମେଣ୍ଟ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ | ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 10-11 ଫ୍ଲେକ୍ସ ଆଇଟମଗୁଡିକର ଭୂଲମ୍ବ ଆଲାଇନ୍ମେଣ୍ଟକୁ ସମର୍ଥନ କରେ ନାହିଁ ଯେତେବେଳେ ଫ୍ଲେକ୍ସ ପାତ୍ରରେ min-heightନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି ଥାଏ | ଅଧିକ ବିବରଣୀ ପାଇଁ ଫ୍ଲେକ୍ସବଗ୍ # 3 ଦେଖନ୍ତୁ |

ଭୂଲମ୍ବ ଆଲାଇନ୍ମେଣ୍ଟ |

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ଭୂସମାନ୍ତର ଶ୍ରେଣୀବଦ୍ଧତା |

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

କ No ଣସି ଗୁଟଖା ନାହିଁ |

ଆମର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀର ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଥିବା ଗୁଟଖାଗୁଡ଼ିକୁ ଅପସାରଣ କରାଯାଇପାରିବ .no-gutters| ଏହା ସମସ୍ତ ତୁରନ୍ତ ଶିଶୁ ସ୍ତମ୍ଭରୁ ନକାରାତ୍ମକ margins .rowଏବଂ ଭୂସମାନ୍ତର ଅପସାରଣ କରିଥାଏ |padding

ଏହି ଶ yles ଳୀଗୁଡିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏଠାରେ ଉତ୍ସ କୋଡ୍ ଅଛି | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ସ୍ତମ୍ଭ ଓଭରବ୍ରିଡ୍ କେବଳ ପ୍ରଥମ ଶିଶୁ ସ୍ତମ୍ଭକୁ ସ୍କୋପ୍ ହୋଇଛି ଏବଂ ଆଟ୍ରିବ୍ୟୁଟ୍ ସିଲେକ୍ଟର୍ ମାଧ୍ୟମରେ ଟାର୍ଗେଟ୍ ହୋଇଛି | ଯେତେବେଳେ ଏହା ଏକ ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଚୟନକର୍ତ୍ତା ସୃଷ୍ଟି କରେ, ସ୍ତମ୍ଭ ପ୍ୟାଡିଂକୁ ବ୍ୟବଧାନ ଉପଯୋଗୀତା ସହିତ ଅଧିକ କଷ୍ଟମାଇଜ୍ କରାଯାଇପାରିବ |

ଏକ ଧାର-ଟୁ-ଡିଜାଇନ୍ ଆବଶ୍ୟକ କରନ୍ତି କି? ପିତାମାତାଙ୍କୁ ଡ୍ରପ୍ କରନ୍ତୁ .containerକିମ୍ବା .container-fluid।

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

ଅଭ୍ୟାସରେ, ଏହା କିପରି ଦେଖାଯାଏ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ ଅନ୍ୟ ସମସ୍ତ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡିକ ସହିତ ଏହାକୁ ବ୍ୟବହାର ଜାରି ରଖିପାରିବେ (ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ, ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍ତର, ସୀମା, ଏବଂ ଅଧିକ ଅନ୍ତର୍ଭୂକ୍ତ କରି) |

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ସ୍ତମ୍ଭ ରାପିଙ୍ଗ୍ |

ଯଦି ଗୋଟିଏ ଧାଡିରେ 12 ରୁ ଅଧିକ ସ୍ତମ୍ଭ ରଖାଯାଏ, ଅତିରିକ୍ତ ସ୍ତମ୍ଭର ପ୍ରତ୍ୟେକ ଗୋଷ୍ଠୀ, ଗୋଟିଏ ୟୁନିଟ୍ ଭାବରେ, ଏକ ନୂତନ ଧାଡିରେ ଗୁଡ଼ାଇ ହୋଇଯିବେ |

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

ସ୍ତମ୍ଭ ବିରତି |

ଫ୍ଲେକ୍ସବକ୍ସରେ ଏକ ନୂତନ ଧାଡିରେ ସ୍ତମ୍ଭ ଭାଙ୍ଗିବା ପାଇଁ ଏକ ଛୋଟ ହ୍ୟାକ୍ ଆବଶ୍ୟକ: width: 100%ଯେଉଁଠାରେ ଆପଣ ନିଜ ସ୍ତମ୍ଭକୁ ଏକ ନୂତନ ଧାଡ଼ିରେ ଗୁଡ଼ାଇବାକୁ ଚାହୁଁଛନ୍ତି ଏକ ଉପାଦାନ ଯୋଗ କରନ୍ତୁ | ସାଧାରଣତ this ଏହା ଏକାଧିକ .rows ସହିତ ସମ୍ପନ୍ନ ହୁଏ, କିନ୍ତୁ ପ୍ରତ୍ୟେକ କାର୍ଯ୍ୟକାରିତା ପଦ୍ଧତି ଏଥିପାଇଁ ହିସାବ କରିପାରିବ ନାହିଁ |

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରଦର୍ଶନ ଉପଯୋଗୀତା ସହିତ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟରେ ଆପଣ ଏହି ବ୍ରେକ୍ ପ୍ରୟୋଗ କରିପାରିବେ |

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

ରେକର୍ଡ କରିବା |

କ୍ଲାସ୍ ଅର୍ଡର କରନ୍ତୁ |

ତୁମର ବିଷୟବସ୍ତୁର ଭିଜୁଆଲ୍ କ୍ରମକୁ.order- ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ କ୍ଲାସ୍ ବ୍ୟବହାର କର | ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ପ୍ରତିକ୍ରିୟାଶୀଳ, ତେଣୁ ଆପଣ ବ୍ରେକପଏଣ୍ଟ ଦ୍ୱାରା ସେଟ୍ କରିପାରିବେ (ଯଥା, ) | ସମସ୍ତ ପାଞ୍ଚଟି ଗ୍ରୀଡ୍ ସ୍ତର ମଧ୍ୟରେ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |order.order-1.order-md-2112

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

ସେଠାରେ ମଧ୍ୟ ପ୍ରତିକ୍ରିୟାଶୀଳ .order-firstଏବଂ .order-lastଶ୍ରେଣୀଗୁଡ଼ିକ ଅଛି ଯାହା ଯଥାକ୍ରମେ ପ୍ରୟୋଗ ଏବଂ ( ) orderପ୍ରୟୋଗ କରି ଏକ ଉପାଦାନର ପରିବର୍ତ୍ତନ କରିଥାଏ | ଆବଶ୍ୟକ ଅନୁଯାୟୀ ସଂଖ୍ୟାଯୁକ୍ତ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟ ମିଶ୍ରିତ ହୋଇପାରେ |order: -1order: 13order: $columns + 1.order-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

ସ୍ତମ୍ଭଗୁଡିକ ଅଫସେଟ୍ କରିବା |

ଆପଣ ଦୁଇଟି ଉପାୟରେ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ଅଫସେଟ୍ କରିପାରିବେ: ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ .offset-ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ଏବଂ ଆମର ମାର୍ଜିନ୍ ୟୁଟିଲିଟିଜ୍ | ସ୍ତମ୍ଭ ସହିତ ମେଳ ହେବା ପାଇଁ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ଆକାରର ହୋଇଥିବାବେଳେ ମାର୍ଜିନଗୁଡିକ ଶୀଘ୍ର ଲେଆଉଟ୍ ପାଇଁ ଅଧିକ ଉପଯୋଗୀ ଯେଉଁଠାରେ ଅଫସେଟର ମୋଟେଇ ପରିବର୍ତ୍ତନଶୀଳ |

ଅଫସେଟ୍ କ୍ଲାସ୍ |

.offset-md-*କ୍ଲାସ୍ ବ୍ୟବହାର କରି ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ଡାହାଣକୁ ଘୁଞ୍ଚାନ୍ତୁ | ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ସ୍ତମ୍ଭ ଦ୍ୱାରା ଏକ ସ୍ତମ୍ଭର ବାମ ମାର୍ଜିନ୍ ବୃଦ୍ଧି କରେ *| ଉଦାହରଣ ସ୍ୱରୂପ, ଚାରୋଟି ସ୍ତମ୍ଭ ଉପରେ .offset-md-4ଗତି କରେ |.col-md-4

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟରେ ସ୍ତମ୍ଭ କ୍ଲିଅର୍ ସହିତ, ଆପଣଙ୍କୁ ଅଫସେଟ୍ ପୁନ res ସେଟ୍ କରିବାକୁ ପଡିପାରେ | ଗ୍ରୀଡ୍ ଉଦାହରଣରେ ଏହାକୁ କାର୍ଯ୍ୟରେ ଦେଖନ୍ତୁ |

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

ମାର୍ଜିନ୍ ଉପଯୋଗିତା |

V4 ରେ ଫ୍ଲେକ୍ସବକ୍ସକୁ ଯିବା ସହିତ, ଆପଣ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ବ୍ୟବହାର କରିପାରିବେ ଯେପରି .mr-autoଭାଇଭଉଣୀ ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ପରସ୍ପରଠାରୁ ଦୂରରେ ରଖିବାକୁ |

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ବସା ବାନ୍ଧିବା |

ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସହିତ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁକୁ ବସା କରିବାକୁ, ଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଏକ ନୂତନ .rowଏବଂ ସ୍ତମ୍ଭର ସେଟ୍ ଯୋଡନ୍ତୁ | ନେଷ୍ଟେଡ୍ ଧାଡିଗୁଡିକ ସ୍ତମ୍ଭର ଏକ ସେଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ ଯାହାକି 12 କିମ୍ବା ତା’ଠାରୁ କମ୍ ଯୋଗ କରିଥାଏ (ଆପଣ ସମସ୍ତ 12 ଉପଲବ୍ଧ ସ୍ତମ୍ଭ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ ନୁହେଁ) |.col-sm-*.col-sm-*

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

ସାସ୍ ମିଶ୍ରଣ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଫାଇଲ୍ ବ୍ୟବହାର କରିବାବେଳେ, କଷ୍ଟମ୍, ଅର୍ଥଗତ ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ପୃଷ୍ଠା ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସିନ ବ୍ୟବହାର କରିବାର ବିକଳ୍ପ ଅଛି | ଆମର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡ଼ିକ ଦ୍ରୁତ ପ୍ରତିକ୍ରିୟାଶୀଳ ଲେଆଉଟ୍ ପାଇଁ ପ୍ରସ୍ତୁତ-ବ୍ୟବହାର-ଶ୍ରେଣୀର ଏକ ସମ୍ପୂର୍ଣ୍ଣ ସୁଟ୍ ପ୍ରଦାନ କରିବାକୁ ଏହି ସମାନ ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସିନ ବ୍ୟବହାର କରନ୍ତି |

ଭେରିଏବଲ୍ |

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

ମିଶ୍ରଣ

ବ୍ୟକ୍ତିଗତ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ପାଇଁ ଅର୍ଥଗତ CSS ସୃଷ୍ଟି କରିବାକୁ ଗ୍ରୀଡ୍ ଭେରିଏବଲ୍ ସହିତ ମିଶ୍ରଣରେ ମିକ୍ସନ୍ସ ବ୍ୟବହୃତ ହୁଏ |

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ଉଦାହରଣ ବ୍ୟବହାର

ଆପଣ ନିଜ ନିଜ କଷ୍ଟମ୍ ମୂଲ୍ୟରେ ଭେରିଏବଲ୍ ଗୁଡିକୁ ରୂପାନ୍ତର କରିପାରିବେ, କିମ୍ବା କେବଳ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ସହିତ ମିକ୍ସିନ ବ୍ୟବହାର କରିପାରିବେ | ମଧ୍ୟରେ ଏକ ଫାଙ୍କ ସହିତ ଦୁଇଟି ସ୍ତମ୍ଭ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଡିଫଲ୍ଟ ସେଟିଂସମୂହ ବ୍ୟବହାର କରିବାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି |

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ଗ୍ରୀଡ୍ କଷ୍ଟୋମାଇଜ୍

ଆମର ବିଲ୍ଟ-ଇନ୍ ଗ୍ରୀଡ୍ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ମାନଚିତ୍ରଗୁଡିକ ବ୍ୟବହାର କରି, ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ସଂପୂର୍ଣ୍ଣ କଷ୍ଟମାଇଜ୍ କରିବା ସମ୍ଭବ | ସ୍ତର ସଂଖ୍ୟା, ମିଡିଆ ଜିଜ୍ଞାସା ପରିମାଣ, ଏବଂ ପାତ୍ରର ମୋଟେଇ ପରିବର୍ତ୍ତନ କରନ୍ତୁ - ତା’ପରେ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |

ସ୍ତମ୍ଭ ଏବଂ ଗୁଟଖା |

ଗ୍ରୀସ୍ ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ସାସ୍ ଭେରିଏବଲ୍ ମାଧ୍ୟମରେ ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ | $grid-columnsପ୍ରତ୍ୟେକ ବ୍ୟକ୍ତିଗତ ସ୍ତମ୍ଭର ମୋଟେଇ (ଶତକଡା) ସୃଷ୍ଟି କରିବାକୁ ବ୍ୟବହୃତ ହୁଏ ଯେତେବେଳେ $grid-gutter-widthସ୍ତମ୍ଭ ଗୁଟରଗୁଡ଼ିକ ପାଇଁ ମୋଟେଇ ସେଟ୍ କରେ |

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

ଗ୍ରୀଡ୍ ସ୍ତରଗୁଡିକ |

ନିଜେ ସ୍ତମ୍ଭଗୁଡିକ ଅତିକ୍ରମ କରି, ଆପଣ ଗ୍ରୀଡ୍ ସ୍ତର ସଂଖ୍ୟା ମଧ୍ୟ କଷ୍ଟମାଇଜ୍ କରିପାରିବେ | ଯଦି ତୁମେ କେବଳ ଚାରୋଟି ଗ୍ରୀଡ୍ ସ୍ତର ଚାହୁଁଛ, ତୁମେ ଏହାକୁ $grid-breakpointsଏବଂ $container-max-widthsଏହିପରି କିଛି ଅପଡେଟ୍ କରିବ:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

ସାସ୍ ଭେରିଏବଲ୍ କିମ୍ବା ମାନଚିତ୍ରରେ କ changes ଣସି ପରିବର୍ତ୍ତନ କରିବାବେଳେ, ତୁମର ପରିବର୍ତ୍ତନଗୁଡ଼ିକୁ ପୁନ save ସଂରକ୍ଷଣ କରିବାକୁ ପଡିବ | ଏହା କରିବା ଦ୍ column ାରା ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ, ଅଫସେଟ୍ ଏବଂ ଅର୍ଡର ପାଇଁ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀର ଏକ ନୂତନ ସେଟ୍ ଆଉଟପୁଟ୍ ହେବ | କଷ୍ଟମ୍ ବ୍ରେକପଏଣ୍ଟ ବ୍ୟବହାର କରିବାକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭିଜିବିଲିଟି ୟୁଟିଲିଟିଗୁଡିକ ମଧ୍ୟ ଅପଡେଟ୍ ହେବ | ଗ୍ରୀଡ୍ ମୂଲ୍ୟ ସେଟ୍ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ px(ନୁହେଁ rem, emକିମ୍ବା %) |